javascriptangularvariablesangular7angular-template-variable

Assign a value to a variable in the template - Angular7


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

  • 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>