Refreshing Angular 9 component elements when data is updated

Question

Refreshing Angular 9 component elements when data is updated

Currently, I am working with Angular 9 and facing an issue where the data of a menu item does not dynamically change when a user logs in. The problem arises because the menu loads along with the home page initially, causing the changes in data to not be reflected in the menu items until I manually refresh the page. Despite my efforts using Renderer2, ChangeDetectorRef, and ElementRef, I have been unable to reload the menu automatically. Below are the relevant elements as the actual component code is lengthy. Feel free to ask if you require any additional information:

Html:

              <div class="widget-text">
                  <a mat-button [matMenuTriggerFor]="accountMenu" #accountMenuTrigger="matMenuTrigger" *ngIf="!isLoggedIn">
                    <mat-icon>person</mat-icon>
                    <span fxShow="false" fxShow.gt-sm class="flag-menu-title">Account</span>
                    <mat-icon class="mat-icon-sm caret cur-icon">arrow_drop_down</mat-icon>
                </a>
                <mat-menu #accountMenu="matMenu" [overlapTrigger]="false" xPosition="before" class="app-dropdown">
                    <span>
                        <button mat-menu-item [routerLink]="['/admin/login']" routerLinkActive="router-link-active">
                          <mat-icon >person</mat-icon>
                          <span>Login</span>
                        </button>
                        <button mat-menu-item [routerLink]="['/admin/login']" routerLinkActive="router-link-active">
                          <mat-icon>person_add</mat-icon>
                          <span>Register</span>
                        </button>
                    </span>
                </mat-menu>
                <a mat-button [matMenuTriggerFor]="profileMenu" #profileMenuTrigger="matMenuTrigger" *ngIf="isLoggedIn">
                  <mat-icon>person</mat-icon>
                  <span fxShow="false" fxShow.gt-sm class="flag-menu-title">Howdy, {{name}}</span>
                  <mat-icon class="mat-icon-sm caret cur-icon">arrow_drop_down</mat-icon>
              </a>
              <mat-menu #profileMenu="matMenu" [overlapTrigger]="false" xPosition="before" class="app-dropdown">
                  <span>
                      <button mat-menu-item [routerLink]="['/admin/profile']" routerLinkActive="router-link-active">
                        <mat-icon >person</mat-icon>
                        <span>Profile</span>
                      </button>
                      <button mat-menu-item (click)="logout()">
                        <mat-icon>warning</mat-icon>
                        <span>Logout</span>
                      </button>
                  </span>
              </mat-menu>
                  </div>

typescript:

public name;
public isLoggedIn = false;

  constructor(public router: Router, private cartService: CartService, public sidenavMenuService:SidebarMenuService) {
    this.checkLogin();
    this.name = Cookie.get('userName');
  }

public checkLogin(): any {
    if(Cookie.get('authtoken')) {
      this.isLoggedIn = true;
    }
  }

javascript angular typescript angular-material angular-changedetection

Answer 1

Answer №1

Keep it simple when dealing with authentication by using a logged in guard (auth guard) once you've logged in.

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuardService implements CanActivate {
  
  constructor(public auth: AuthService, public router: Router , private sideMenuService: SideMenuService) {}
  
  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.sideMenuService.sideMenuData.next({...data});  // Dispatch the side menu service data here
      this.router.navigate(['dashboard']); // Redirect to dashboard page after authentication
      return false;
     }
   return true;
   } 
 }
  
}

After redirecting to the Dashboard Page, inject the sideMenu Service and subscribe to the Behavior Subject menu data field in the Dashboard component.

public name;
public isLoggedIn = false; // No need to check login here, as you are redirected from auth guard
  constructor(public router: Router, private cartService: CartService, 
   public sidenavMenuService: SidebarMenuService) {
   this.checkLogin();  // Authentication handled by auth guard

   this.name = Cookie.get('userName');
}

public ngOnInit(){
  this.sideMenuService.sideMenuData.subscribe((data)=>{
    // Receive dynamic data here and assign to any component field
 });
}
 public checkLogin(): any {
    if(Cookie.get('authtoken')) {
    this.isLoggedIn = true;
 }

}

This method ensures that each time you log in, dynamic data is dispatched and updated in the Behavior Subject for components like the Dashboard component to access.

Hope this explanation proves helpful.

Answer 2

Keep it simple when dealing with authentication by using a logged in guard (auth guard) once you've logged in.

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuardService implements CanActivate {
  
  constructor(public auth: AuthService, public router: Router , private sideMenuService: SideMenuService) {}
  
  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.sideMenuService.sideMenuData.next({...data});  // Dispatch the side menu service data here
      this.router.navigate(['dashboard']); // Redirect to dashboard page after authentication
      return false;
     }
   return true;
   } 
 }
  
}

After redirecting to the Dashboard Page, inject the sideMenu Service and subscribe to the Behavior Subject menu data field in the Dashboard component.

public name;
public isLoggedIn = false; // No need to check login here, as you are redirected from auth guard
  constructor(public router: Router, private cartService: CartService, 
   public sidenavMenuService: SidebarMenuService) {
   this.checkLogin();  // Authentication handled by auth guard

   this.name = Cookie.get('userName');
}

public ngOnInit(){
  this.sideMenuService.sideMenuData.subscribe((data)=>{
    // Receive dynamic data here and assign to any component field
 });
}
 public checkLogin(): any {
    if(Cookie.get('authtoken')) {
    this.isLoggedIn = true;
 }

}

This method ensures that each time you log in, dynamic data is dispatched and updated in the Behavior Subject for components like the Dashboard component to access.

Hope this explanation proves helpful.

Answer 3

Answer №2

Upon the creation of the page, the constructor is only executed once.

constructor(public router: Router, private cartService: CartService, public sidenavMenuService:SidebarMenuService) {
    this.checkLogin();
    this.name = Cookie.get('userName');
  }

Based on the code provided, if the cookie authtoken is not found during construction, it becomes impossible for your app to determine if it was created by another (login) process.

It is advisable to call the checkLogin function and assign the name immediately after completing the login process.

Answer 4

Upon the creation of the page, the constructor is only executed once.

constructor(public router: Router, private cartService: CartService, public sidenavMenuService:SidebarMenuService) {
    this.checkLogin();
    this.name = Cookie.get('userName');
  }

Based on the code provided, if the cookie authtoken is not found during construction, it becomes impossible for your app to determine if it was created by another (login) process.

It is advisable to call the checkLogin function and assign the name immediately after completing the login process.

Refreshing Angular 9 component elements when data is updated

Answer №1

Answer №2

Similar questions

FusionCharts Gauges may share similar code, but each one produces a unique output

What methods can I use to emphasize three distinct dates?

Creating a function within a module that takes in a relative file path in NodeJs

The $.parseJSON function accurately retrieves valid items but also presents an endless stream of undefined

Reload iframe content using a .php file within a different iframe

Explore by the anchor tag

Tips for connecting Angular events to <input> elements in HTML?

What is the best way to specify a type for an object that may or may not contain a certain property?

"Utilize Angular's $http module to execute a POST request for

Acquiring information from file within component operation

How can images be resized according to screen resolution without relying on javascript?

Can I use leaflet to customize the types of roads displayed on the map?

Dynamic RSS Aggregator

Plaid webhook failing to activate

What is the best way to design a dynamic menu using HTML, CSS, and jQuery, where each li element gradually disappears?

Comparison of getComputedStyle() and cssText functionality between Internet Explorer and Firefox

Retrieving a dynamic JSON object for the MusicBrainz application using AngularJS

Generate a new data type based on the value of a single attribute within a collection of objects

Configuring Stylelint in a NextJS project using Emotionjs

Cleaning out input fields in React applications