Angular 6，ngFor范围内的访问组件变量

Question

How can I access a components global variable inside a ngFor loop scope (which is in the html template of the component).

Please don't tell me this isn't possible, I'm disappointed enough with Angular already.

<ng-container *ngFor="let option of options">
   <label class="{{globalVariable}}">{{option}}</label>
</ng-container>

This doesn't work. How can I use 'globalVariable' inside the ngFor scope?

The 'globalVariable' is define in the component like so:

@Input() globalVariable: 'someClass';

Answer 1

Use ngClass directive.

<p [ngClass]="red">
  Start editing to see some magic happen :)
</p>

stackblitz

Answer 2

Pass the parameter globalVariable as like (Note the single quote):

<app-temp [globalVariable]="'globalVariable'"></app-temp>

Then it will work as you are expecting:

<ng-container *ngFor="let option of options">
   <div class="{{globalVariable}}">{{option}}</div>
</ng-container>`

For more details, see this

Answer 3

You have defined @Input() globalVariable: string; . So I believe you are passing that globalVariable as input from parent component like this :

<parent-comp [globalVariable]="globalVariable"></parent-comp>

In above line there should be globalVariable defined in your parent component ts file.

Rest of your code looks fine to me :

<ng-container *ngFor="let option of options">
   <label class="{{globalVariable}}">{{option}}</label>
</ng-container>