[SOLVED] Angular 6 - How to change a component's value in its template on a IF condition

Angular 6 - How to change a component's value in its template on a IF condition

I'm trying to display or hide the below 'separator-container' if any one of the row data satisfies some specific condition (as in 5th line of code "myConditionCheck").

I tried achieving it by having "isWarningSeperatorVisible" as controller class variable and tried to change it in my HTML code. Couldn't find a way to change it on a IF condition. Can someone help me how to change a controller variable on a IF condition or any other way to achieve this use case?

<div class="separator-container" *ngIf="isWarningSeperatorVisible">
     My Separator heading
</div>

<ng-container *ngFor="let rowData of rowArray;">
   <div class="cards-row" *ngIf="rowData.myConditionCheck; let isWarningSeperatorVisible"> 
    <div>
        Some content goes here
     </div>
    </div>
</ng-container>

Solution

You can do the following :

in .html :

<div class="separator-container" *ngIf="check()">

in .ts :

check(){
    return this.rowArray.some((row)=>row.myConditionCheck)
}

This is a stackblitz.