0

EDITED

i got reference to a by a template variable in its component.

<ng-template #templateLogGroup>Logs Group</ng-template>

@ViewChild('templateLogGroup') templateLogGroup : TemplateRef<any>;

Now, how can i change the content dynamically in a method of the controller?

i'm trying to do in this way: this.templateLogGroup.elementRef.nativeElement.innerHtml = "<strong>changed<strong>";

but on the screen nothing is changed.

On the other hand, if i print to the console the content of "templateLogGroup" i can notice that the conthent of templateLogGroup.elementRef.nativeElement.innerHtml is changed.

So seems that this operation doesn't fire the rendering

this is the code: https://stackblitz.com/github/pinale/changetemplatecontent

pinale
  • 2,060
  • 6
  • 38
  • 72
  • 1
    Take a look at https://stackoverflow.com/questions/45667715/update-innerhtml-of-element-using-viewchild-in-angular-2 . Also read about componentFactoryResolver.resolveComponentFactory – Shashank Vivek Apr 23 '20 at 08:32
  • You need to provide more detail to suggest best approach in your case. – Shashank Vivek Apr 23 '20 at 08:33
  • What kind of content? And why can't it be solved with `*ngIf` `*ngFor` or routing? –  Apr 23 '20 at 08:51
  • @Shashank Vivek it's a step further – pinale Apr 23 '20 at 08:56
  • @Mike S simple html, i need to change the content when someone click on a "step" of a "material stepper", so using *ngIf or *ngFor is too complicated for me without changing the setup i've – pinale Apr 23 '20 at 09:00
  • 1
    You will need to sanitize the html before using it in a template. That said, I still wonder if you can't just use different templates for your "steps". If they are generated dynamically, then of course it's a little more complicated. –  Apr 23 '20 at 09:10
  • 1
    https://stackblitz.com/edit/angular-ubveqw is this close to what you're looking for? –  Apr 23 '20 at 09:27
  • @MikeS. it seems just what i need but my code doesn't work as expected, i've provided a stackblitz: https://stackblitz.com/github/pinale/changetemplatecontent – pinale Apr 23 '20 at 09:52
  • [Forked from your stackblitz](https://stackblitz.com/edit/github-kcb2dv) . Angular seems to not update the view after you set the innerHtml. This works, but it uses a binding to the innerHtml of your div element. –  Apr 23 '20 at 10:14

0 Answers0