CODEWITHSUNDEEP
javascriptangularangular-material2
carlcheel
carlcheel

Reputation: 621

Override a components template in Angular2/4?

If I detail the problem I'm trying to solve, it will help with my question.

I want to use HTML in the Angular Material tooltip, the current template doesn't enable this functionality:

<div class="mat-tooltip"
     [ngClass]="tooltipClass"
     [style.transform-origin]="_transformOrigin"
     [@state]="_visibility"
     (@state.done)="_afterVisibilityAnimation($event)">
  {{message}}
</div>

In order to use HTML in the tooltip I'd like to override the template to the following:

<div class="mat-tooltip"
     [ngClass]="tooltipClass"
     [innerHTML]="message"
     [style.transform-origin]="_transformOrigin"
     [@state]="_visibility"
     (@state.done)="_afterVisibilityAnimation($event)">
</div>

Is this possible? Is there another method I'm overlooking to achieve what I'm looking for?

Upvotes: 1

Views: 673

Answers (1)

Myonara
Myonara

Reputation: 1207

The html file cannot be changed, however you can access the element from the component.ts file

@ViewChild('dataContainer') dataContainer: ElementRef;

loadData(data) {
    this.dataContainer.nativeElement.innerHTML = data;
}

as found in thie SO-answer.

Upvotes: 1

Related Questions