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>
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>
You cannot create or set value in a variable inside interpolation {{ }}, interpolation is only used to print the output (value of variable).
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.
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>
There is no way in Angular2+ to initialize the variable value in the template. You must look into the ngOnInit() function.
{{ }}is only used to print the output