3

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>
Avengers
  • 33
  • 5
  • Could'nt you do `
    ` ?
     – Augustin R Aug 30 '18 at 15:07
  • I've just updated the question. 'myConditionCheck' is based on the data comes out of each instance of the ngFor above it. If one of the condition satisfies, some content will be displayed below it and there has to be a header for that content. I can loop through for the separator as well to know if there is any qualifying data. But that would be inefficient. – Avengers Aug 30 '18 at 15:11
  • what do you have in the rowArray? – pradip shinde Aug 30 '18 at 15:13
  • Think of it as a data to build a table It has two dimensional data. 4 attributes for n number of rows. 1 of that attribute is a Boolean and if that has true, then that row data has to be displayed along with the separator above it. – Avengers Aug 30 '18 at 15:17

1 Answers1

3

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.

Augustin R
  • 7,089
  • 3
  • 26
  • 54
  • 1
    To return a boolean, you can use `some` instead of `find`. – ConnorsFan Aug 30 '18 at 15:26
  • 1
    You're right, I'm used to lodash instead of "vanilla" js. Updated answer. – Augustin R Aug 30 '18 at 15:29
  • Thanks for the answer. Is there a way to change the value of a boolean variable in HTML template? This solution would work for me. Still would like to know option to change value in template to avoid parsing data twice. – Avengers Aug 30 '18 at 15:41
  • As far as I know, you can only do this by the triggering of an event. Events can be DOM events as (click), (change), (focus), or Angular events as (ngOnChange). I hope you will find an event that suits your needs. – Augustin R Aug 30 '18 at 15:50