title: How to get the Header and Footer after the login succesfull
body: <p>In my app component I have <strong>Header</strong> and <strong>footer</strong> directives and in between i have <strong>router outlet</strong> to render all other components.</p>
  
  <p><strong>App.Component.html:</strong> </p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p><strong>App.Component.ts:</strong> </p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
      title = 'Smart Shopping';
  </code></pre>
  
  <p>}</p>
  
  <p>initially i am rendering my login Component when application starts.</p>
  
  <p><strong>Login.Component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { AuthService } from '../shared/services/auth.service';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
  })
  export class LoginComponent implements OnInit {
    credentials = { username: '', password: '' };
  
    constructor(
      private router: Router,
      private service: AuthService
    ) { }
  
    ngOnInit() {
    }
  
    login() {
      this.service.login(this.credentials.username, this.credentials.password)
        .subscribe(
          data =&gt; {
            console.log(data);
            this.router.navigate(['home']);
          },
          err =&gt; {
            console.log(err);
          }
        )
  
    }
  }
  </code></pre>
  
  <p>on Login Button I am going to load the <strong>Home Component</strong></p>
  
  <p>on this step i want my header and footer visible . i want that users can see the header and footer only if they logged in.</p>
  
  <p>I can do this by giving directives of header and footer in Home component but by doing this I have to give the directives in all other components to get header and footer which is not a good approach approach . how can i my desire output?</p>