title: How to hide buttons on the top toolbar after clicking login using Angular 8?
body: <p>I am novice to Angular and trying to create an application. I have a home page where I have a toolbar at the top with two buttons namely, 'Admin' and 'Student'. If a person selects admin he would be directed to admin's login screen and if a person selects student he would be directed to student login. After successfully logging in I wanted those two buttons from the toolbar to disappear. I tried reading through data sharing between components but not sure on how to implement it. Help would be appreciated. Thanks in advance.</p>
  <p>home.component.html:</p>
  <pre><code>&lt;mat-toolbar color=&quot;primary&quot;&gt;
      &lt;span class=&quot;align-content&quot;&gt;Online Library Portal&lt;/span&gt;
      &lt;button mat-button routerLink=&quot;/adminLogin&quot; routerLinkActive=&quot;active&quot; (click)=&quot;showPage()&quot;&gt;Admin&lt;/button&gt;
      &lt;button mat-button routerLink=&quot;/studentLogin&quot; routerLinkActive=&quot;active&quot; (click)=&quot;showPage()&quot;&gt;Student&lt;/button&gt;
  &lt;/mat-toolbar&gt;
  &lt;mat-card-content *ngIf=&quot;show&quot;&gt;
      &lt;div class=&quot;welcome&quot;&gt;
          &lt;h1&gt;Welcome to My Library&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class=&quot;instructions&quot;&gt;
          &lt;li&gt;
              If you are an &lt;strong&gt;Admin&lt;/strong&gt;, please choose admin option to Login or Register.
          &lt;/li&gt;
          &lt;li&gt;
              If you are a &lt;strong&gt;Student&lt;/strong&gt;, please choose student option to Login or Register.
          &lt;/li&gt;
      &lt;/div&gt;
  
  &lt;/mat-card-content&gt; 
  </code></pre>
  <p>home.component.ts:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
  
    constructor(private router: Router) {}
  
    show: boolean = true;
   
    ngOnInit() {
      this.router.navigate([''])
    }
  
    showPage() {
      this.show = false;
    }
  
  }
  </code></pre>
  <p>admin-login.component.html:</p>
  <pre><code>&lt;mat-card class=&quot;admin-login&quot;&gt;
      &lt;mat-card-header class=&quot;login-header&quot;&gt;
          &lt;mat-card-title&gt;Admin Login&lt;/mat-card-title&gt;
      &lt;/mat-card-header&gt;
      &lt;mat-card-content class=&quot;content&quot;&gt; 
          &lt;form class=&quot;admin-login-form&quot;&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;mat-form-field class=&quot;admin-user-name&quot;&gt;
                              &lt;input matInput placeholder=&quot;User Name&quot; [(ngModel)]=&quot;username&quot; name=&quot;username&quot; required&gt;
                          &lt;/mat-form-field&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;mat-form-field class=&quot;admin-password&quot;&gt;
                              &lt;input matInput placeholder=&quot;Password&quot; [(ngModel)]=&quot;password&quot; type=&quot;password&quot;
                                  name=&quot;password&quot; required&gt;
                          &lt;/mat-form-field&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/form&gt;
      &lt;/mat-card-content&gt; 
      &lt;mat-card-actions class=&quot;action&quot;&gt;
          &lt;button mat-raised-button (click)=&quot;login()&quot; color=&quot;primary&quot;&gt;Login&lt;/button&gt;
      &lt;/mat-card-actions&gt;
      &lt;a class=&quot;register&quot; mat-menu-item routerLink=&quot;/adminRegistration&quot;&gt;Register&lt;/a&gt;
  &lt;/mat-card&gt;
  </code></pre>
  <p>After clicking this login button the buttons admin and student from home.component.html must disappear.</p>
  <p>admin-login.component.ts:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router} from '@angular/router';
  
  
  @Component({
    selector: 'app-admin-login',
    templateUrl: './admin-login.component.html',
    styleUrls: ['./admin-login.component.css']
  })
  export class AdminLoginComponent implements OnInit {
  
    constructor(private router : Router) { }
  
    username!: string;
    password!: string;
    
  
    ngOnInit(): void {
    }
  
    login() : void {
      if(this.username == 'admin' &amp;&amp; this.password == 'admin'){
       this.router.navigate([&quot;admin&quot;]);
      }else {
        alert(&quot;Invalid credentials&quot;);
      }
    }
    
  
  }
  </code></pre>