Understanding NgStyle

Question

I'm relatively new to Angular and would like to understand what the following syntax means.

<div *ngFor="let day of week; index as i;" [ngStyle]="{'height.px': day | arrLength : arrLength : 'height' : i}">
    //do something
</div>

Is it a pipe inside a style binding? why are there 3 colons after the pipe?

I would suggest you find the arrLength pipe in your codebase while you look at the Angular Pipe documentation https://angular.io/guide/pipes -- this will help you understand its implementation (basically everything after `'height.px' :`). — Nathan Beck, Jan 30 '20 at 15:10

score 0 · Accepted Answer · answered Jan 30 '20 at 15:01

The tree colons after the arrLength Pipe are inputs to the pipe itself. A Pipe is just a function that gets parameters as inputs in this case the pipe function would look like

@Pipe 

    transform(day,arrLength,height, i) {}

and it will produce some output most likely a number that would be assiggned to height.px

ngStyle is there because the height needs to be calculated dynamically at runtime.

Understanding NgStyle

1 Answers1