CODEWITHSUNDEEP
htmlangulartypescriptangular-ng-if
snir.hak
snir.hak

Reputation: 43

angular *ngIf not work as expected html tag not re-display after the value change

I have a variable defined as a boolean type and I have a function that at the click of a button changes the value from true to false. And a change should be made in html when the value changes.

The problem is that there is a change once, in the transition from truth to false. But when you click again and the value changes to true nothing happens in html

this is my html code Who is responsible for the change of values

<mat-radio-group >
  <mat-radio-button (change)='itIsRoundtrip($event.value)' class="example-margin" checked value="true">Roundtrip</mat-radio-button>
  <mat-radio-button (change)='itIsRoundtrip($event.value)' class="example-margin" value="false">One way</mat-radio-button>
</mat-radio-group>

and this is the part that is supposed to change

<mat-form-field *ngIf='Roundtrip == true' appearance="outline">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

This is the function that changes the values

  Roundtrip: boolean = true;

  itIsRoundtrip(Roundtrip:boolean){
    this.Roundtrip = Roundtrip
    console.log(this.Roundtrip)
  }

What do you think is happening in the background and prevents what html re-display the tag?

Upvotes: 0

Views: 1375

Answers (1)

Shalom Peles
Shalom Peles

Reputation: 2632

The value of Roundtrip is actually a string, 'true' or 'false', both are true. You should enclose the property name in square brackets, and then angular binds it to the evaluated value of 'true':

    <mat-radio-group >
      <mat-radio-button (change)='itIsRoundtrip($event.value)' class="example-margin" [value]="true">Roundtrip</mat-radio-button>
      <mat-radio-button (change)='itIsRoundtrip($event.value)' class="example-margin" [value]="false">One way</mat-radio-button>
    </mat-radio-group>                                                             // ^^^^^^^

StackBlitz

Upvotes: 2

Related Questions