Angular2 How to let different users see different contents from one component?

Question

Hi I'm working on making web application with angular 2.

I want to add few user-specific contents to one component, which means I want user A to see only A1content, user B to see only B1content, C-C1 and so on.

I also want to seperate contents for logged-in user and guests (ppl who are not logged in).

How can I proceed this? For all I know, I should be using AuthGuard for protected content and ngIf for specific users?

Answer 1

Can you use NgSwitch? https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html

Template

<div *ngFor="let item of listOfItems">
  <div [ngSwitch]="item.type">
    <div *ngSwitchCase="'A'">
      <h1>output A - {{ item.name }}</h1>
    </div>
    <div *ngSwitchCase="'B'">
      <h1>output B - {{ item.name }}</h1>
    </div>
    <div *ngSwitchCase="'C'">
      <h1>output C - {{ item.name }}</h1>
    </div>
    <div *ngSwitchDefault>output2</div>
  </div>
</div>

component

export class SomeComponent {
  public listOfItems = [
    {
      name: 'Adam',
      type: 'C',
    },
    {
      name: 'Eve',
      type: 'B',
    },
    {
      name: 'George',
      type: 'A'
    }
  ];
  constuctor() {}
}