Assign a value to a variable in the template - Angular7

Question

There are toggle two button (edit and submit), which button should work like toggle show/hide style on click

<button (click)="showEditBtn = false;" *ngIf="showEditBtn;"> Edit</button>
<button (click)="showEditBtn =  true;" *ngIf="!showEditBtn;">Submit</button> 

I need showEditBtn variable should be true in default without touching script file

Is it possible to assign a value to a variable in the template, like below example?

<div> {{  let showEditBtn = true  }}  </div>

stackblitz example

Solution 1

Figured out. It is a bit of a hack. But works perfectly

<div *ngIf="true; let showEditBtn">
    <div> {{ showEditBtn }} </div>
    <button (click)="showEditBtn = false" *ngIf="showEditBtn"> Edit</button>
    <button (click)="showEditBtn = true" *ngIf="!showEditBtn">Submit</button>
</div>

Solution 2

You cannot create or set value in a variable inside interpolation {{ }}, interpolation is only used to print the output (value of variable).

Solution 3

Angular Interpolation is a way of data binding in Angular. And it will allow user to communicate between component and it's template (view).

String Interpolation is a one way data binding. In one-way data binding, the value of the Model is inserted into an HTML (DOM) element and there is no way to update the Model from the View.

Hope given link may help to understand well.

Solution 4

I highly recommend to not set or update variables in your template. All of your logic should be in the controller.

here is a simple example of how you can do it app.component.ts:

  public isEditMode: boolean;
  public toggleEditMode(): void {
      this.isEditMode = !this.isEditMode;
  }

app.component.html

<button (click)="toggleEditMode()" *ngIf="isEditMode;"> Edit</button>
<button (click)="toggleEditMode()" *ngIf="!isEditMode;">Submit</button>

View more solutions

Comments

[Fasco]

Well, not officially but with a little hack you can.