I have developed 4 roles access projects in angular. The dashboard have different content pages. Whenever logged in the portal intially called dashboard page.
This dashboard content will shows based on logged user role. I have used ngSwitch. Anyone knows a different way implementation instead of using ngSwitch. Kindly share your answer. It's working but I want different solution
I have explained what i did,
defined 4 role
SuperAdmin, Admin, AdminUser, User
I have created 4 component files. follow this code component.ts file
export class DashboardComponent implements OnInit {
userRole: string;
constructor(private authService: AuthService) {
this.userRole = this.authService.userRole();
}
html file:
<div [ngSwitch]="userRole">
<app-header-component title="Dashboard" *ngSwitchCase="'SuperAdmin'">
</app-header-component>
<app-system-integrator-dashboard *ngSwitchCase="'Admin'">
</app-system-integrator-dashboard>
<app-organization-admin-dashboard *ngSwitchCase="'AdminUser'">
</app-organization-admin-dashboard>
<app-organization-user-dashboard *ngSwitchCase="'User'">
</app-organization-user-dashboard>
</div>
create directive like
/* Usage : *roleIsOneOf="[userType.ADMIN, userType.ANALYST, userType.SUPER_ANALYST]" */
@Directive({
selector: '[roleIsOneOf]',
})
export class RoleIsOneOfDirective {
constructor(private authService: AuthService,
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) {
}
@Input() set roleIsOneOf(allowedRoles: Role[]) {
const userRole: Role = this.authService.userRole();
if (allowedRoles.includes(userRole)) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
}