In the sidebar, I have 4 rubrics (Administration, Marché, Portefeuille, Déconnexion ).

When the user logs in, I would like the Portefeuille rubric to be hidden.

I created a method:

canAccess(id: string): boolean {

    if (id === "Portefeuille") {

      if (this.store.selectSnapshot(ProfileState.currentPortfolio)) {
        return true;
      } else {
        return false;
      }
    } 
    return true;
  }

TypeScript file

export class OnlineComponent implements OnInit {

  private unsubscribe$ = new Subject<void>();

  @Select(AuthState.user) user$!: Observable<string>;
  @Select(AuthState.lastConnexionMoment) lastConnexionMoment$!: Observable<ApiConnectionMoment>;
  @Select(ProfileState.currentPortfolio) currentPortfolio$!: Observable<Portfolio>;

  activeItem: any;
  openSidebar: boolean = true;


  menuSidebar: MenuSidebar[] = [
    {
      link_name: 'Administration',
      id: 'administration',
      link: null,
      icon: 'bx bx-collection',
      active: false,
      sub_menu: [
        {
          link_name: 'Sélection d\'un protefeuille',
          link: '/administrations/select-portfolio', 
        },
      ],
    },

    {
      link_name: 'Marchés',
      id: 'market',
      link: null,
      icon: 'bx bx-line-chart', 
      active: false,
      sub_menu: [
        {
          link_name: 'Valeurs',
          link: '/markets/stocks',
        },
        {
          link_name: 'Devise',
          link: '/markets/currencies',
        },
        
      ],
    },

    {
      link_name: 'Portefeuille',
      id: 'portefeuille',
      link: null,
      icon: 'bx bx-line-chart', 
      active: false,
      sub_menu: [
        {
          link_name: 'Titre en portefeuille',
          link: '/portfolio/stocks',
        },
       
      ],
    },

  ];

  constructor(
    private store: Store,
    private sandbox: OnlineSandbox) { }

  ngOnInit() {
  }

  showSubmenu(item: any) {
    if (item.link_name == this.activeItem) {
      this.activeItem = undefined;
    } else {
      this.activeItem = item.link_name;
    }
  }

  selectMenu(parentMenu: { link_name: string }): void {
    this.menuSidebar.forEach((menu) => {
      if (menu.link_name !== parentMenu.link_name) {
        menu.active = false;
      } else {
        menu.active = !menu.active;
      }
    });
  }

  signOut(): void {
    this.unsubscribe$.next();
    this.sandbox.signOut()
      .pipe(
        takeUntil(this.unsubscribe$)
      ).subscribe( res => {   } );
  }


  canAccess(id: string): boolean {

    if (id === "Portefeuille") {

      if (this.store.selectSnapshot(ProfileState.currentPortfolio)) {
        return true;
      } else {
        return false;
      }
    } 
    return true;
  }

}

I don't know where/how I should embed the canAccess method in html?

html

<ul  id="nav-links">
   <li *ngFor="let item of menuSidebar" [class.showMenu]="activeItem == item.link_name" #itemEl>
   <div *ngIf="item.sub_menu.length > 0"  (click)="showSubmenu(item)">
   <a (click)="selectMenu(item)">
   <i [class]="item.icon"></i>
   <span >{{ item.link_name }}</span>
   </a>
   <i ></i>
   </div>
   <ul  [class.blank]="item.sub_menu.length == 0">
      <li>
         <a >{{ item.link_name }}</a>
      </li>
      <li *ngFor="let item_sub of item.sub_menu" routerLinkActive="active">
         <a [routerLink]="[item_sub.link]">{{ item_sub.link_name }}</a>
      </li>
   </ul>
   </li>
   <li >
      <a href="#" (click)="signOut()">
         <i ></i>
         <!-- Déconnexion -->
         <span >Déconnexion</span>
      </a>
   </li>
</ul>

MenuSidebar

export type MenuSidebar = {
  link_name: string; 
  id: string,
  link: null;
  icon: string;
  active: boolean; 
  sub_menu: {
      link_name: string; 
      link: string;
  }[]
}

CodePudding user response：

<ul  id="nav-links">
<ng-container  *ngFor="let item of menuSidebar"   >
 <li  [class.showMenu]="activeItem == item.link_name" #itemEl *ngIf="this.canAccess(item.line_name)">
   <div *ngIf="item.sub_menu.length > 0"  (click)="showSubmenu(item)">
   <a (click)="selectMenu(item)">
   <i [class]="item.icon"></i>
   <span >{{ item.link_name }}</span>
   </a>
   <i ></i>
   </div>
   <ul  [class.blank]="item.sub_menu.length == 0">
      <li>
         <a >{{ item.link_name }}</a>
      </li>
      <li *ngFor="let item_sub of item.sub_menu" routerLinkActive="active">
         <a [routerLink]="[item_sub.link]">{{ item_sub.link_name }}</a>
      </li>
   </ul>
   </li>
</ng-container>
  
   <li   >
      <a href="#" (click)="signOut()">
         <i ></i>
         <!-- Déconnexion -->
         <span >Déconnexion</span>
      </a>
   </li>
</ul>

May be code help you...

CodePudding user response：

try:

  <li *ngFor="let item_sub of item.sub_menu" [hidden]="canAccess(item_sub)" routerLinkActive="active">
     <a [routerLink]="[item_sub.link]">{{ item_sub.link_name }}</a>
  </li>