0

I have created a sample with innerHTML binding property. I want to use other component inside my template like below:

export class AppComponent  {
        constructor(private sanitized: DomSanitizer) {}

   name = 'Angular';
  public bar = 'bars';
  foo = this.sanitized.bypassSecurityTrustHtml( `<div>`+this.bar+`
  </div>
  <hello></hello>
`);
}

hello-component

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<button ejs-button>Button</button>`
})
export class HelloComponent  {
  @Input() name: string;
}

Sample - https://stackblitz.com/edit/angular-vdf66x?file=src/app/app.component.ts

Improve this question
6
  • stackoverflow.com/questions/40473910/… Commented May 24, 2019 at 9:05
  • hi @Indragith, do you have any idea how to implement this in my app. i have tried this but i couldn't achieve Commented May 24, 2019 at 9:08
  • what is the need of using innerhtml here. you are trying to make angular components behave like html elements Commented May 24, 2019 at 9:13
  • no i need a template compilation. i have my own template compilation method but today only i see this innerHTML property so that i want to use this instead of my template compilation method Commented May 24, 2019 at 9:15
  • Try defining your angular components(<hello>) as angular elements. Angular elements are custom html elements(web components). It might work Commented May 24, 2019 at 9:25
Related questions
14
How to get Angular2 to bind component in innerHTML
1
Binding not working for innerHTML in nested component
1
Angular2 components not binding the property to DOM
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.