title: Angular 11 Refresh Component After Logout
body: <p>I am new to Angular. I am trying to do login/logout operations. Login and logout were working succeessfully but when the user clicks the logout button, user component does not change and login button does not come again.
  Is it the that the problem about login and account operations are in different components and these two component becoming together in app-nav-user-layout component.</p>
  <p>nav-user.component.ts</p>
  <pre><code>@Component({
    selector: 'app-nav-user',
    templateUrl: './nav-user.component.html',
    styleUrls: ['./nav-user.component.css']
  })
  export class NavUserComponent implements OnInit {
    name: string = &quot;&quot;;
    roles: any = [];
    token: any;
    welcomeMessage: string;
    constructor(
      private jwtHelper: JwtHelperService,
      private localStorageService: LocalStorageService,
      private authService: AuthService
    ) { }
  
    ngOnInit(): void {
      this.userDetailFromToken();
      this.welcomeMessage = GlobalConstants.Messages.welcomeMessage;
    }
  
    userDetailFromToken() {
      this.token = this.localStorageService.get(&quot;token&quot;);
      let decodedToken = this.jwtHelper.decodeToken(this.token);
      let name = decodedToken['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name'];
      this.name = name.split(' ')[0];
      this.roles = decodedToken['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'];  
    }
  
    logOut(){
      this.authService.logout();
    }
  }
  </code></pre>
  <p>Html file of nav-user component</p>
  <pre><code>&lt;span&gt;
      {{welcomeMessage}} {{name}}
  &lt;/span&gt;
  &lt;button class=&quot;btn btn-secondary btn-sm dropdown-toggle shadow-none ms-2 &quot; type=&quot;button&quot; data-bs-toggle=&quot;dropdown&quot;
      aria-expanded=&quot;false&quot;&gt;
      &lt;fa-icon [icon]=&quot;['fas', 'user-cog']&quot;&gt;&lt;/fa-icon&gt; Panel
  &lt;/button&gt;
  &lt;ul class=&quot;dropdown-menu p-0&quot;&gt;
      &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; routerLink=&quot;/user/settings&quot;&gt;Profile Settings&lt;/a&gt;&lt;/li&gt;
      &lt;div *ngIf=&quot;roleCheck(['admin', 'yazar'])&quot;&gt;
          &lt;li&gt;
              &lt;hr class=&quot;dropdown-divider&quot;&gt;
          &lt;/li&gt;
          &lt;h6 class=&quot;dropdown-header&quot;&gt;Administration&lt;/h6&gt;
          &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; routerLink=&quot;/add/car&quot;&gt;Add Car&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; routerLink=&quot;/add/color&quot;&gt;Add Color&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; routerLink=&quot;/add/brand&quot;&gt;Add Brand&lt;/a&gt;&lt;/li&gt;
      &lt;/div&gt;
  &lt;/ul&gt;
  
  &lt;button class=&quot;btn btn-danger btn-sm ms-2 shadow-none&quot; type=&quot;button&quot; (click)=&quot;logOut()&quot;&gt;
      &lt;fa-icon [icon]=&quot;['fas', 'sign-out-alt']&quot;&gt;&lt;/fa-icon&gt;
  &lt;/button&gt;
  </code></pre>
  <p>auth.service.ts</p>
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class AuthService {
  
    constructor(
      private httpClient: HttpClient,
      private localStorageService: LocalStorageService,
      private router: Router
    ) { }
  
    login(loginModel: LoginModel): Observable&lt;SingleResponseModel&lt;TokenModel&gt;&gt;{
      return this.httpClient.post&lt;SingleResponseModel&lt;TokenModel&gt;&gt;(GlobalConstants.apiUrl + &quot;auth/login&quot;, loginModel);
    }
  
    register(registerModel: RegisterModel) : Observable&lt;ResponseModel&gt;{
      return this.httpClient.post&lt;ResponseModel&gt;(GlobalConstants.apiUrl + &quot;auth/register&quot;, registerModel);
    }
  
    isAuthenticated(): boolean{
      return this.localStorageService.checkExistsOrNot(&quot;token&quot;);
    }
  
    logout(){
      this.localStorageService.clean();
      this.router.navigateByUrl('/');
    }
  
  }
  </code></pre>
  <p>nav-login.component.ts is empty. Because I just use it for html. Html file includes login and register buttons and these are redirect to /login &amp; /register pages</p>
  <p>app-header-account-area.ts</p>
  <pre><code>@Component({
    selector: 'app-app-header-account-area',
    templateUrl: './app-header-account-area.component.html',
    styleUrls: ['./app-header-account-area.component.css']
  })
  export class AppHeaderAccountAreaComponent implements OnInit {
  
    isLoggedIn: boolean;
    constructor(
      private authService: AuthService
    ) { }
  
    ngOnInit(): void {
      this.isLoggedIn = this.authService.isAuthenticated();
    }
  }
  </code></pre>
  <p>html of this component</p>
  <pre><code>&lt;app-nav-login *ngIf=&quot;isLoggedIn==false&quot;&gt;&lt;/app-nav-login&gt;
  &lt;app-nav-user *ngIf=&quot;isLoggedIn==true&quot;&gt;&lt;/app-nav-user&gt;
  </code></pre>
  <p>How can I change view when the user press on the logout button? I can't find anything or didn't understand those solutions about communication of 2 components.</p>