how to re-render element in angular 11

user_15940689 0
Viewed 118

when I select option variable isdate change but check if don't work

<mat-select 
    (selectionChange)="selectOption($event.value)" 
[(ngModel)]="isDate">
   <mat-option *ngFor="let item of dateTime" value="{{item.checkDateTime}}">
       {{item.name}}
   </mat-option>
</mat-select>
<div *ngIf="isDate"> day</div>
<div *ngIf="!isDate"> time</div>

dateTime: DateTime[] = [
    {
      name: 'day',
      checkDateTime: true
    },
    {
      name: 'time',
      checkDateTime: false
    }
];

isDate: boolean;
selectOption(value): void{ 
    this.isDate = value;
}

How do I hide and show the date and time inverse?

angular11 angular show element render
2 Answers

You don't need the function selectOption when using ngModel. Use mat-option value as an angular attribute:

<mat-option [value]="item.checkDateTime"></mat-option>
user_33293250

value.checkDateTime consist of the actual value rather than the value

selectOption(value): void{ 
    this.isDate = value.checkDateTime;
}
user_24451110
Related