Angular4 + Nodejs: How to show content only to a certain part of users?

Question

JavaScript

I have an idea: Show certain menu items in the SPA to persons that matter in the DB.
Like, if user1 has an agency field with a value of true, then the section in the menu is shown to him: for agencies.
Any ideas how best to implement this? I tried to implement it through a directive that is responsible for whether the user is authorized or not, then it came out crap.

Answer 1

Here is an example of directive content

import {
  Directive,
  Input,
  OnInit,
  TemplateRef,
  ViewContainerRef
} from '@angular/core';

import { UserService } from './services/user.service';

@Directive({ selector: '[showAuthed]' })
export class ShowAuthedDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private userService: UserService,
    private viewContainer: ViewContainerRef
  ) {}

  condition: boolean;

  ngOnInit() {
    this.userService.isAuthenticated.subscribe(
      (isAuthenticated) => {
        if (isAuthenticated && this.condition || !isAuthenticated && !this.condition) {
          this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
          this.viewContainer.clear();
        }
      }
    )
  }

  @Input() set showAuthed(condition: boolean) {
    this.condition = condition;
  }

}