How to use ngIf according to a variable's value?

Question

My code in file.html is

<button ion-button item-right>
        <ion-icon name="md-add-circle" (click)="save();"></ion-icon>
      </button>

file.ts

editmode = false;

What I want to achieve is if editmode is false then call save() function, and if editmode is true then call editedu(elem,index) function when button from html page is clicked.

Answer 1

Please see the plunker demo https://plnkr.co/edit/X5e6avkveGeVRqhzLVFr?p=preview

 //our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 (click)='editMode = !editMode'>Toggle editMode {{editMode}}</h2>
      <button (click)='editMode? save(): ""'>Call Me</button>
    </div>
  `,
})
export class App {
  name:string
  editMode: boolean = true;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  save(): void {
    alert("Called because editMode is true");
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 2

Juse use

<button ion-button item-right>
 <div *ngIf="editmode">     
<ion-icon name="md-add-circle" (click)="editedu(elem,index);"></ion-icon>
</div>
 <div *ngIf="!editmode">     
<ion-icon name="md-add-circle" (click)="save();"></ion-icon>
</div>
</button>

if you want to do it in single line,

<div   *ngIf=editmode ? save() : editedu(elem, index)">
   <ion-icon name="md-add-circle" (click)="save();"></ion-icon>
</div>

Answer 3

You can use ternary if (or you can call a method where you call another method depending on editmode)

(click)="editmode ? save() : editedu(elem, index)"