6

I have a component1 selector that I called "app-component1".

@Component({
   selector: 'app-component1',
   templateUrl: './test-widget.component.html',
   styleUrls: ['./test-widget.component.scss'] })

So to call the html of this component I usually use:

<app-component1></app-component1>

and it works perfectly fine.

Now from another component2 I have the following variable:

variableToBind = "<app-component1></app-component1>";

And In the html of component 2 I used the following: 

<div [innerHtml]="varibableToBind"></div>

The html code binding isn't working. Is is possible to help me understand why and maybe help me find another alternative?

Improve this question
1
  • Why do you use variableToBind instead of putting <app-component1></app-component1> directly in your template? If you want to choose different components based on conditions, could routing or *ngIf be an alternative? Commented Jan 17, 2018 at 23:36

5 Answers 5

Reset to default
6

Thanks Everyone for the suggestions, I actually just find the answer to this:

This can't work because innerHtml is rendered AFTER Angular's compiled the templates. That means that it doesn't understand your selectors at this point of time.

If you guys want to load a component (or any content) dynamically, you should use *ngIf. It worked perfectly fine for me.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Angular sanitizes the HTML to prevent XSS attacks. You should find something like WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss). in your console output.

For further information, check out the documentation on property binding (esp. content security) and the security docs.

Depending on your use case, you need to choose another approach.

Improve this answer

Comments

0

Your example code is not a valid approach as

1) html code cannot be bound to element property directly for security reason. ref: https://angular.io/guide/security#xss

2) There is no need to do property binding for HTML in your case. If you want to perform different logic inside AppComponent2, the best practice is to do property binding for the parameters that can customise component behaviours:

<div>
    <app-component1 [prop1]="myVar1" [prop2]="myVar2"></app-component1>
</div>

and then you can customise it from the component properties instead of the component itself. This would make more sense.

Improve this answer

Comments

0

If you really* need to pass HTML to component (for example if you have text with <br> tags or something like that), you can create custom Input like so:

export class YourComponent {
  @Input() public htmlContent = '';
}

<div [innerHtml]="htmlDescription"></div>

And use it like so:

<your-component [htmlDescription]="textWithHtmlTags"></your-component>

* - for example if a string of text with basic HTML formatting tags (like <b>, <i> or even <br>) needs to be rendered.

Improve this answer

Comments

0

In Angular, it is generally not recommended to bind a component selector using the [innerHTML] binding, because this can lead to security vulnerabilities. Instead, you should use Angular's template syntax and component structure to include components in your templates.

If you need to dynamically choose which component to include based on some condition, you can use the ngIf directive and the element to include a component only if a certain condition is met.

<ng-template [ngIf]="showMyComponent">
  <my-component></my-component>
</ng-template>
Improve this answer

Comments