How to change an already bound "label" on a component in Angular, in dependence of attributes of the item from the ngFor loop?

Question

I found a lot of articles about binding, ngIf, ngFor and all that stuff but nothing worked for my particular problem. It also feels like I am only missing out on some syntax-rules.

Following problem: If a step inside the ngFor loop is repeated, it should add an (1) to its translated name. Right now it displays the whole 'step.header | translate ' as label and not what is behind that.

<div *ngFor="let step of dataService.current.steps" >
            <component 
            ...
            [label]="!step.repeated ? 'step.header | translate' : 'step.header | translate' + ' (1)'"
            ...
           </component>
</div>

I hope the problem is kind of clear from that.

Thank you very much in advance!

Answer 1

If you want to use a pipe as part of a complex expression you should wrap it in parentheses. You can also simplify the expression a bit since the main part is the same:

<div *ngFor="let step of dataService.current.steps">
    <component 
        [label]="(step.header | translate) + (step.repeated ? ' (1)' : '')">
    </component>
</div>