NG4- ngIf, else, ngIf then,else using ng-tempalte

NG4- ngIf, else, ngIf then,else using ng-tempalte
-------------------------------------------------------------
//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'else-cmp',
  template: `
    <button (click)="isValid = !isValid">update</button>
 
    <div *ngIf="isValid;else other_content">
       content here ...
    </div>

    <ng-template #other_content>other content here...</ng-template>

  `,
})
export class ElseComponent {
  isValid:boolean = true;
  constructor() {
  }
 
}



@Component({
  selector: 'else-then-cmp',
  template: `
      <button (click)="isValid = !isValid">update</button>

       <div *ngIf="isValid;then content else other_content"></div>
     
       <ng-template #content>content here...</ng-template>
       <ng-template #other_content>other content here...</ng-template>

  `,
})
export class ElseThenComponent {
  isValid:boolean = true;
  constructor() {
  }
 
}




@Component({
  selector: 'my-app',
  template: `
    <h4>Using else :</h4>
    <br>
    <else-cmp></else-cmp>
    <br>
    <br>
    <h4>Using else then:</h4>
    <br>
    <else-then-cmp></else-then-cmp>
  `,
})
export class App {
  isValid:boolean = true;
  constructor() {
  }
 
}

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

Ref: https://plnkr.co/edit/XD5vLvmwTApcaHJ66Is1?p=preview