Sunil Sunil - 2 months ago 20
Sass (Sass) Question

Angular 2: apply style on {{ }}

I have created one component for tooltip. Following is how my view appears:

<tooltip [tooltipDisplayText]="ttp.mainText" tooltipFullText="{{ttp.fieldType}} {{ttp.mainText}} {{ttp.subText}}"></tooltip>


I want it to appear in as follows: assuming (fieldType : Name, mainText : Shahrukh, and subText:Actor)

Name

Shahrukh

Actor

But I am confused how can I format this in brackets. Can someone help me with this?

Answer

You can pass any string in your property in use it within innerHTML property

tooltipFullText="<div><b>{{ttp.fieldType}}</b></div>{{ttp.mainText}}
                     <div><i>{{ttp.subText}}</i></div>"

Then in your tooltip component:

@Input() tooltipFullText;

<div [innerHTML]="tooltipFullText"></div>

Demo