How do I change a Typescript boolean variable if a ngIf condition is met?

Viewed 770
<ng-container *ngIf="condition1">//now set showTable2 to false
 //show table1
</ng-container>

<ng-container *ngIf="showTable2>
 //show table2
</ng-container>

(Typescript)

showTable2 = true;

4 Answers

Can you just do something like this?

<ng-container *ngIf="condition1">//now set showTable2 to false
 //show table1
</ng-container>

<ng-container *ngIf="showTable2 && !condition1">
 //show table2
</ng-container>

You can try this

in .html file

<ng-container *ngIf="condition1">//now set showTable2 to false
 //show table1
{{  showTable2 = false }}
</ng-container>

<ng-container *ngIf="showTable2>
 //show table2
</ng-container>
html
<ng-container *ngIf="check(condition1)">//now set showTable2 to false
         //show table1
        </ng-container>
        
        <ng-container *ngIf="showTable2>
         //show table2
        </ng-container>
ts
check(condition1){
  if(condition1){
    this.showTable2 = false;
  }
  return condition1;
}

If you want to show the block of template depends on the condition then you can use this,

<ng-container *ngIf="condition1; then conditionTrue; else conditionFalse">
//Condition1 true
</ng-container>

<ng-template #conditionTrue >
//Condition1 true
</ng-template>

<ng-template #conditionFalse>
//Condition1 false
</ng-template>

Or if you want to change the value then you can use this,

<ng-container *ngIf="check(condition1)">
</ng-container>

<ng-container *ngIf="condition2">
//Condition1 true
</ng-container>

//In component
condition1:boolean=true;
condition2:boolean=false;
check(condition1:boolean):void{
  if(condition1){
    this.condition2 = true;
  }
}
Related