Ng If else
1)app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
2)app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app',
templateUrl: 'app.component.html'
})
export class AppComponent{
loginPage:boolean = false;
public showLogin(){
this.loginPage = true;
}
public hideLogin(){
this.loginPage = false;
}
login(){
this.loginPage = false;
}
}
3)app.component.html
<div *ngIf="loginPage;else elseBlock">
<form>
Email <input type="text" name="email"/>
Password <input type="password" name="password"/>
<button (click)="login();">login</button>
</form>
<button (click)="hideLogin();">close</button>
</div>
<ng-template #elseBlock>Welcome<button (click)="showLogin();">login</button></ng-template>