Angular2. How can I use *ngFor for set “URL” in the tag “href” and set '{{theme.name}}' in the condition *ngIf?

Question

I need switching templates. I have 12 css files need to be loaded dynamic

I have a template html. It's works for example (hardcode):

<div class="container">
    <link rel='stylesheet'   href="/app/switchTemplate/css/amelia/bootstrap.min.css" *ngIf="currentTheme.name === 'amelia'" />
</div>

When I use <*ngFor="let theme of themes"> for tag "href" It's not worked (dynamic)

<div class="container">
    <link rel='stylesheet'  *ngFor="let theme of themes"  href="{{theme.url}}" *ngIf="currentTheme.name === '{{theme.name}}'" />
</div>

How can I use *ngFor for set "URL" in the tag "href" and set '{{theme.name}}' in the condition *ngIf?

Answer 1

You can't have more than one structural directive on a single element. You can use a <template> tag but the new <ng-container> element is more convenient because it works with the same syntax as structural directives on normal elements:

<div class="container">
  <ng-container *ngFor="let theme of themes">
    <link rel='stylesheet'    href="{{theme.url}}" *ngIf="currentTheme.name === theme.name" />
  </ng-container>
</div>

The <template> or <ng-container> elements are only processed internally by Angular2 and never added to the DOM.