We Keep Coding

click event is not working in innerhtml string angular 6

I am working on an generate dynamic template using angular 6. I have an API that return strings like below:
<button type="button" (click)="openAlert()">click me</button>
and html
<div [innerHtml]="myTemplate | safeHtml">
</div>
function is bellow:
openAlert() {
alert('hello');
}

You cannot bind angular events directly to innerHTML.
Still if you need to attach the event listeners you need to to do it after the html content is loaded.
Once the content is set to the variable, ngAfterViewInit Angular life cycle event will be triggered. Here you need to attach the required event listeners.
Checkout the working example below.
component.html
<button (click)="addTemplate()">Get Template</button>
<div [innerHTML]="myTemplate | safeHtml"></div>
component.ts
import { Component, ElementRef } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
myTemplate = '';
constructor(private elementRef:ElementRef){
}
openAlert() {
alert('hello');
}
addTemplate(){
this.myTemplate = '<button type="button" id="my-button" (click)="openAlert()">click mee</buttn>';
}
ngAfterViewChecked (){
if(this.elementRef.nativeElement.querySelector('#my-button')){
this.elementRef.nativeElement.querySelector('#my-button').addEventListener('click', this.openAlert.bind(this));
}
}
}
safe-html.pipe.ts
import { Pipe, PipeTransform } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
#Pipe({
name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}

this should work too:
component.html
<div #template></div>
component.ts
#ViewChild('template') myTemplate: ElementRef;
addTemplate(){
this.myTemplate.nativeElement.innerHTML = '<button type="button">click me</button>';
this.myTemplate.nativeElement.addEventListener('click', this.openAlert);
}

Basically this will not work. When you write code in Angular, it is transpiled by webpack and converted to javascript that is executed in the browser.
However, now you are injecting Angular code dynamically and not building it. The event detection (click) would not work natively and the function openAlert is also not in the global scope where it is injected. You will have to consider a different approach and generate content using <ng-template> based on response from the API.

In Angular I want to project the nativeElement to another component without using innerHTML

In Angular I want to project (Transclude) a nativeElement to another component without using innerHTML.
Currently I'm trying to do this using ngComponentOutlet using a child component that has an ng-content.
I want to load the component and send html data to it all rendered so I dont need to use innerHTML to compile it to HTML.
Reason for this is, innerHTML looses the bindings.
This is my attempt:
My Parent Component:
import { Component, ContentChildren, QueryList } from '#angular/core';
import { TableRowComponent } from '../table-row/table-row.component';
import { TableCellComponent } from '../table-cell/table-cell.component';
#Component({
selector: 'ls-table-body',
template: `
<ng-container>
<tr ls-table-row *ngFor="let row of rows">
<ng-container *ngFor="let cell of cells">
<ng-container *ngComponentOutlet="tableCellComponent; content: [[cell.elem.nativeElement]]"></ng-container>
</ng-container>
</tr>
</ng-container>
`,
styleUrls: ['./table-body.component.scss']
})
export class TableBodyComponent {
#ContentChildren(TableRowComponent) rows: QueryList<TableRowComponent>;
#ContentChildren(TableCellComponent) cells: QueryList<TableCellComponent>;
public tableCellComponentComponent = TableCellComponent;
}
My Child Component called TableCellComponent:
import { Component, HostBinding, Input, ContentChildren, ViewEncapsulation, QueryList } from '#angular/core';
#Component({
selector: '[ls-table-cell]',
template: `
<ng-content></ng-content>
`,
styleUrls: ['./table-cell.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class TableCellComponent {
#HostBinding() #Input('class') classList = 'ls-table-cell';
#ContentChildren(TableCellComponent) cells: QueryList<TableCellComponent>;
#Input() span: number;
#Input() data: any;
}
Outcome I'm looking for:
I'm looking to compile the HTML - as I cannot use innerHTML due to the bindings getting removed - so I've optted for the ngComponentOutlet solution using ng-content - as I believe that compiles my HTML I pass through using cell.elem.nativeElement.
I'm also open to alternatives

Integrate xterm.js to Angular

I'm new to Angular.
I'm trying to use xterm.js (https://xtermjs.org/) but it display badly.
Here is the render :
Render
I created a xterm component. The xterm.component.ts file code is :
import { Component, OnInit } from '#angular/core';
import { Terminal } from "xterm";
#Component({
selector: 'app-xterm',
templateUrl: './xterm.component.html',
styleUrls: ['./xterm.component.css'],
})
export class XtermComponent implements OnInit {
public term: Terminal;
container: HTMLElement;
constructor() { }
ngOnInit() {
this.term = new Terminal();
this.container = document.getElementById('terminal');
this.term.open(this.container);
this.term.writeln('Welcome to xterm.js');
}
}
My xterm.component.html only contains this :
<div id="terminal"></div>
I don't really know what to do more ...
Thanks in advance guys

You must set the component encapsulation
#Component({
encapsulation: ViewEncapsulation.None,
...
})

Encountered the same problem and found this page.
Maybe this is too late for the OP, but could be useful for others.
The styles are wrong because 1) the xterm.css is not loaded, and 2) the encapsulation.
My solution to 1) was to add #import 'xterm/dist/xterm.css'; in the scss file for this component.
And 2) can be solved by setting encapsulation: ViewEncapsulation.None as Victor96's answer, or better setting encapsulation: ViewEncapsulation.ShadowDom.
Hope this helps.

I know this is old, but I had to put terminal initialation in ngAfterViewInit. Otherwise the DOM elements are undefined.

Try to use in template reference variable by using the hash symbol
<div #myTerminal></div>
and in component
#ViewChild('myTerminal') terminalDiv: ElementRef;
In ngOnInit
ngOnInit() {
this.term = new Terminal();
this.term.open(this.terminalDiv.nativeElement);
this.term.writeln('Welcome to xterm.js');
}

Angular add style tag into innerHTML

I create an Angular project and I wanted to insert style CSS into the html, but I don't want the inserted CSS replace other style that have the same tag or class name.
const testStyle = '<style>
body {color: red}
table {width : 200px}
h1{font-size:12px}
.another-same-class-name{color: blue;font-size: 13px}
</style>'
Above is my sample style that I want to insert into my component template
My Component
#Component({
selector : 'app-my-component',
templateUrl: './my-template.component.html',
styleUrls: ['./my-style.component.scss'],
})
export class MyComponent{
myStyle:string
...
ngOnInit(){
const testStyle = '<style>
body {color: red}
table {width : 200px}
h1{font-size:12px}
.another-same-class-name{color: blue;font-size: 13px}
</style>'
this.myStyle = testStyle
}
updateCss(newCss){
this.myStyle = `<style>${newCss}</style>`
}
}
<div #styleWillGoHere [innerHtml]="myStyle"></div>
Edit: I have update my question, to make it more clear :)
I appreciate any kind of solution.

You need to use DomSanitizer of #angular/platform-browser to sanitize the HTML. Take a look of the docs: https://angular.io/api/platform-browser/DomSanitizer.
In your particular case, you need to use bypassSecurityTrustHtml() method. Also, for apply styles only to one component, add an id to your target component and use it in your styles. (You can use class if that component will appear more than once in your web).
EXAMPLE:
import { Component } from '#angular/core';
import { DomSanitizer, SafeHtml } from '#angular/platform-browser';
#Component({
selector: 'my-app',
template: `
<div id="myId">
<div [innerHtml]="myStyle"></div>
<h1>Hello</h1>
</div>
`
})
export class AppComponent {
myStyle: SafeHtml;
constructor(private _sanitizer: DomSanitizer) { }
ngOnInit() {
this.myStyle =
this._sanitizer.bypassSecurityTrustHtml(`<style>#myId h1{color: red}</style>`);
}
}
DEMO: https://stackblitz.com/edit/angular-3kza7c?file=src%2Fapp%2Fapp.component.ts

Javascript Angular 4 using eventEmitter though several layers of components

I am having a bit of a problem with getting the following situation done in Angular.
I am using Angular 4 and this is the situation.
app.component.html contains a wrapper div which I would like to be able to change it's color by adding a class to it.
My problem is that I have different layers of components.
For example, if I wanted to change the class in app.component.html it would have this:
app.component - root
button-wrapper.component - holds the button
button.component - message comes from there.
Normally I could do this:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
myClass = '';
handleEvent(value) {
console.log(value);
myClass = value;
}
}
and in app.component.html have this:
<div [ngClass]="myClass">
<app-button (outputEvent)="handleEvent($event)"></app-button>
</div>
BUT, my problem is that app-button component is inside button-wrapper component so it looks like this:
<div [ngClass]="myClass">
<button-wrapper></div>
</div>
So where would I put this:
(outputEvent)="handleEvent($event)"
How can I go round this issue?

You can chain events as long as their direct children:
button.component.ts (selector: app-button)
startChainEvent() {
this.outputEvent.emit('className');
}
button-wrapper.component.html
<app-button (outputEvent)="handleEvent($event)"></app-button>
button-wrapper.component.ts (selector: app-button-wrapper)
handleEvent(e) {
this.outputEvent.emit(e);
}
app.component.html
<app-button-wrapper (outputEvent)="handleEvent($event)"></app-button-wrapper>
app.component.ts
handleEvent(e) {
myClass = e;
}