<Link> external resources using typescript variable

Question

I have the external link to the css file stored as string variable in typescript component. I want to use in a link tag in html to import the external css file for my web theme. I have defined the link variable as below.

matlink:string="http://localhost:8000/static/css/mat-header/theme.css";

Then I am trying to import in the html file as

<link href="{{matlink}}" rel="stylesheet"/>

However, in this case, no content is being shown. Is it possible to import resource file into html using some variable?

Answer 1

Assuming you are using Angular 2 and above:

You can also bind to [attr.href]="expression"

And final code would be <link [attr.href]="matlink" rel="stylesheet"/>