set style to only first element created with *ngFor

Question

I am using the follwing code to display some number of * characters

  <div *ngFor="let line of lines;let i=index">*</div>

I would like to set a margin only to the first one. I want the margin to be bound to a marginVar variable inside coresponding .ts file.

This is how I would set margin to all of the elements.

[style.margin-left.px]="marginVar"

How can I apply it to only the first element created with *ngFor?

Answer 1

ngFor provides first

<div *ngFor="let line of lines;let i=index; first as isFirst"
    [style.margin-left.px]="isFirst ? marginVar : 0">*</div>

or using CSS

<div *ngFor="let line of lines;let i=index; first as isFirst"
    [class.first]="isFirst">*</div>

For all *ngFor variables see

https://angular.io/api/common/NgForOf#local-variables

Answer 2

If you switch to using css classes then it is straightforward:

[class.first]="i === 0"

Otherwise play with ngIf (ngIfThen/ngIfElse).