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>

results matching ""

    No results matching ""