typescript - How to correctly use angular directives when using [innerHTML]? -

i have sidebar code app text changes based on page being loaded. using switch statement set text [innerhtml] reads from. however, not work when there directives such routerlink. how should properly? way use bunch of *ngif's in html?

html:

<div [innerhtml]="text"></div> 

ts:

check = true; text = '<p>hello world</p>' +        '<div *ngif="check">testing</div>' +        '<a routerlink="/link">this link</a>'; 

set text :

    check = true;     text = '<p>hello world</p>' +     '<div *ngif="'+check+'">testing</div>' +     '<a routerlink="/link">this link</a>'; 

it equivalent to:

<p>hello world</p> <div *ngif="true">testing</div><a routerlink="/link">this link</a> 

which *ngif="check" when check = true