If you're looking to manage permissions in your Angular application, consider using the ngx-permissions library. This library offers the advantage of removing elements from the DOM based on set permissions. An example of how to load permissions:

import { Component, OnInit } from '@angular/core';
import { NgxPermissionsService } from 'ngx-permissions';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'app';

   constructor(private permissionsService: NgxPermissionsService,
               private http: HttpClient) {}

  ngOnInit(): void {
    const perm = ["ADMIN", "EDITOR"];

    this.permissionsService.loadPermissions(perm);

     this.http.get('url').subscribe((permissions) => {
       //const perm = ["ADMIN", "EDITOR"]; example of permissions
       this.permissionsService.loadPermissions(permissions);
    })
  }
}

Implementation in templates

<ng-template [ngxPermissionsOnly]="['ADMIN']" (permissionsAuthorized)="yourCustomAuthorizedFunction()" (permissionsUnauthorized)="yourCustomAuthorizedFunction()">
    <div>Congratulations! You can see this text.</div>
 </ng-template>
<div *ngxPermissionsOnly="['ADMIN', 'GUEST']">
    <div>Congratulations! You can see this text.</div>
</div>

 <div *ngxPermissionsExcept="['ADMIN', 'JOHNY']">
   <div>Everyone will see it except for Admin and Johny.</div>
 </div>

From my perspective, obtaining API permissions is the most effective way to manage user rights. Along with utilizing the canActivate attribute in Router for permission checks, I prefer incorporating permission validation in a navigation interceptor. This method ensures that the URL remains intact even when incorrect permissions are detected, instead of redirecting to localhost:42000/#/.../permission-denied.

Below is an example of how I implement this:

In the template:

<ng-template [ngIf]="!loading" [ngIfElse]="loadingView">
  <router-outlet *ngIf="canView"></router-outlet>
  <app-permission-denied *ngIf="!canView"></app-permission-denied>
</ng-template>
<app-loading #loadingView></app-loading>

In the component:

import { Component, OnInit} from '@angular/core';
import {
  Router,
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'
import { Title } from '@angular/platform-browser';
import { DataService } from '../core/service/data.service';
import { NotificationService } from '../core/service/notification.service';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit{

  loading: boolean = true;
  canView: boolean = false;

  constructor(private router: Router,
              private _dataService: DataService,
              private titleService: Title,
              private _notificationService: NotificationService) {
    this.router.events.subscribe((event: RouterEvent) => {
      this.navigationInterceptor(event);
    });
  }

  ngOnInit() { }

  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true;
      this.canView = false;
    }
    if (event instanceof NavigationEnd) {
      
      // Permission check based on function ID...
      let functionId = this.getDataRouter(this.router, "function");

      if (functionId != null) {
        this._dataService.get('your_api_to_check_permission_with_functionId' + functionId).subscribe(
          (data) => {
            if (data && data.CanRead) {
              this.canView = true;
              let title = this.getDataRouter(this.router, "title");
              this.titleService.setTitle(title);
            } else {
              this.canView = false;
              this.titleService.setTitle('Permission denied');
            }
            this.loading = false;
          }, (err) => {
            this._dataService.handleError(err);
          });
      } else {
        this.loading = false;
        this.canView = true;
        this._notificationService.printErrorMessage('Dev: please provide function Id to check permission');
      }
    }

    if (event instanceof NavigationCancel || event instanceof NavigationError) {
      this.loading = false;
    }
  }

  getDataRouter(router, name) {
    var root = router.routerState.snapshot.root;
    while (root) {
      if (root.children && root.children.length) {
        root = root.children[0];
      } else if (root.data && root.data[name]) {
        return root.data[name];
      } else {
        break;
      }
    }
    return null;
  }
}

In the router module:

const mainRoutes: Routes = [
      { path: 'user', loadChildren: './system/user/user.module#UserModule', data: { function: "USER" } },

      { path: 'function', loadChildren: './system/function/function.module#FunctionModule', data: { function: "FUNCTION" } }
    ]

If you're looking for the best method to achieve this, I recommend utilizing Angular's Router Guard.

To kickstart your journey, take a look at the following resources:

router guard alligator

Router Guard Medium