CODEWITHSUNDEEP
angular
codeDragon
codeDragon

Reputation: 565

Show html template on click event angular

I am new to Angular and I would like to know do do you do the following: when click either login or signup show the appropiate template, which is in <app-login></app-login> and <app-register></app-register>.

So this is my app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <!--<h1>
    Welcome to {{ title }}!
  </h1>-->
  <img width="300" alt="findasitter" src="/assets/images/findasitter.png">
  <br>
  <button (click)="showLoginForm()">Login</button>
  <button type="button">Signup</button>
  <app-login></app-login>
  <app-register></app-register>
  <router-outlet></router-outlet>
</div>

And this is app.component.ts

// import
import { Component } from '@angular/core';

// decorator
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', // you can write inline HTML here within backticks
  styleUrls: ['./app.component.scss']  // and css here
})
// class
export class AppComponent {
  buttonState: any;
  title = 'FindaSitter';
  showLoginForm() {
    console.log("I have been clicked");
    // show the HTML template
}

Upvotes: 1

Views: 6219

Answers (1)

Gopal
Gopal

Reputation: 673

We can use *ngIf to make visible the appropriate template in your app.component.html file.

<button (click)="showLoginForm()">Login</button>
<button type="button" (click)="showSignupForm()">Signup</button>
<app-login *ngIf='login'></app-login>
<app-register *ngIf='signup'></app-register>

if the login variable true it will render the login template or else if the signup becomes true it will show up the register template in your page.

here how I have used the variable in the app.component.ts file

export class AppComponent {
buttonState: any;
title = 'FindaSitter';
login:boolean;
signup:boolean;

showLoginForm() {
this.login=true
this.signup=false
console.log("I have been clicked");
}

showSignupForm(){
this.signup=true
this.login=false
}
}

Upvotes: 1

Related Questions