Showing or hiding elements based on user roles in Angular 4

Question

Showing or hiding elements based on user roles in Angular 4

I am currently working on a project that involves multiple user types (SuperUser - SchoolAdmin - Teacher).

Each role has specific privileges to access certain elements.

How can I dynamically hide elements based on the logged-in user's role using *ngIf?

Here is the link to the project on StackBlitz, where I have provided a live preview for guidance.

In the app, you will find common services under auth. This folder contains the login service and authentication guard.

Check out models >> enum to see the user type enum.

In the sign-in component, you will find the form that defines the user type.

Review the routes to see the expected roles assigned to each component.

Testing users:

This user should be directed to the school-list page

Admin (with super user role): [email protected] Password: 12345

This user should be directed to the dashboard

Student (with student role): [email protected] Password: 12345

For instance, if I want to hide an element on the dashboard visible only to the super user role, how can I achieve this?

I understand that I can use ngIf, but I am unsure of the correct way to implement it within NgIf. I need practical examples based on my code.

Update: The issue has been resolved, so I have removed the test users.

angular typescript authentication user-roles angular-ng-if

Answer 1

Answer №1

When registering a user in your project, you prompt them to specify if they are a 'Teacher', 'Parent', or 'Student'. This information can be used as a condition.

Upon signing in or registering, it is important to store the user data in a designated location, such as a service that can be accessed using @injection.

Subsequently, you can perform tests on the DOM utilizing this stored data:

/* If type_id == id(student) */
<div *ngIf="myService.currentUser.type_id">
   // Display for student...
</div>

 /* If type_id == id(teacher) */
<div *ngIf="myService.currentUser.type_id">
   // Display for teacher...
</div>

Is this guidance beneficial? It could be helpful to refer to the documentation found here.

[Example specific to your scenario]

Your Service:

import { Injectable } from '@angular/core';
/*
   Additional imports
*/

 @Injectable()
 export class UserService {

      public currentUser: any;

      constructor(){}

      public login(loginData: LoginModel): any {
            const apiUrl: string = environment.apiBaseUrl + '/api/en/users/login';  
            let promise = new Promise((resolve, reject) => { 
             this.http.post(apiUrl, loginData).subscribe((data: any) => {
                if(data.status)
                {
                  var userData = {
                      token: data.token,
                      user:data.user 
                     };
                this.currentUser = data.user // Save user data here
                return resolve(userData);
                }
                else {
                       return reject(data)
                 }
               }, (err: HttpErrorResponse) => {
               return reject(err);
            });
          });
     return promise;
      }
 }

Remember to inject this service in your constructor and your service in

Component:

// Ensure UserService has been imported !!
constructor(public userService: UserService){}

DOM:

*ngIf="userService.currentUser.type_id == 1"

Answer 2

When registering a user in your project, you prompt them to specify if they are a 'Teacher', 'Parent', or 'Student'. This information can be used as a condition.

Upon signing in or registering, it is important to store the user data in a designated location, such as a service that can be accessed using @injection.

Subsequently, you can perform tests on the DOM utilizing this stored data:

/* If type_id == id(student) */
<div *ngIf="myService.currentUser.type_id">
   // Display for student...
</div>

 /* If type_id == id(teacher) */
<div *ngIf="myService.currentUser.type_id">
   // Display for teacher...
</div>

Is this guidance beneficial? It could be helpful to refer to the documentation found here.

[Example specific to your scenario]

Your Service:

import { Injectable } from '@angular/core';
/*
   Additional imports
*/

 @Injectable()
 export class UserService {

      public currentUser: any;

      constructor(){}

      public login(loginData: LoginModel): any {
            const apiUrl: string = environment.apiBaseUrl + '/api/en/users/login';  
            let promise = new Promise((resolve, reject) => { 
             this.http.post(apiUrl, loginData).subscribe((data: any) => {
                if(data.status)
                {
                  var userData = {
                      token: data.token,
                      user:data.user 
                     };
                this.currentUser = data.user // Save user data here
                return resolve(userData);
                }
                else {
                       return reject(data)
                 }
               }, (err: HttpErrorResponse) => {
               return reject(err);
            });
          });
     return promise;
      }
 }

Remember to inject this service in your constructor and your service in

Component:

// Ensure UserService has been imported !!
constructor(public userService: UserService){}

DOM:

*ngIf="userService.currentUser.type_id == 1"

Answer 3

Answer №2

When it comes to hiding content, a boolean value of either true or false is typically utilized. In an HTML file, you can use the following code snippet:

<div *ngIf = !test>_contents to be printed_</div>

. Additionally, in the corresponding .ts file, you should initialize the variable test as false like so: test = false;. Then, by setting this.test = true;, the div will become visible. Otherwise, it will remain hidden. Be sure to carefully evaluate your condition and set test = true; accordingly.

Answer 4

When it comes to hiding content, a boolean value of either true or false is typically utilized. In an HTML file, you can use the following code snippet:

<div *ngIf = !test>_contents to be printed_</div>

. Additionally, in the corresponding .ts file, you should initialize the variable test as false like so: test = false;. Then, by setting this.test = true;, the div will become visible. Otherwise, it will remain hidden. Be sure to carefully evaluate your condition and set test = true; accordingly.

Answer 5

Answer №3

Here is a suggestion for your code:

<div *ngIf="superUserLoggedIn">
   // display content for SuperUser...
 </div>
<div *ngIf="schoolAdminLoggedIn">
       // display content for School Admin...
</div>
<div *ngIf="teacherLoggedIn">
       // display content for Teacher...
</div>

To implement this in the *.ts file, you can use the following function when someone logs into the system:

onLogin(userType: string) {
    this.superUserLoggedIn = false;
    this.schoolAdminLoggedIn = false;
    this.teacherLoggedIn = false;
    switch (userType) {
        case 'SuperUser':
            this.superUserLoggedIn = true;
            break;
        case 'SchoolAdmin':
            this.schoolAdminLoggedIn = true;
            break;
        case 'Teacher':
            this.teacherLoggedIn = true;
            break;
}

Answer 6

Here is a suggestion for your code:

<div *ngIf="superUserLoggedIn">
   // display content for SuperUser...
 </div>
<div *ngIf="schoolAdminLoggedIn">
       // display content for School Admin...
</div>
<div *ngIf="teacherLoggedIn">
       // display content for Teacher...
</div>

To implement this in the *.ts file, you can use the following function when someone logs into the system:

onLogin(userType: string) {
    this.superUserLoggedIn = false;
    this.schoolAdminLoggedIn = false;
    this.teacherLoggedIn = false;
    switch (userType) {
        case 'SuperUser':
            this.superUserLoggedIn = true;
            break;
        case 'SchoolAdmin':
            this.schoolAdminLoggedIn = true;
            break;
        case 'Teacher':
            this.teacherLoggedIn = true;
            break;
}

Showing or hiding elements based on user roles in Angular 4

Answer №1

Answer №2

Answer №3

Similar questions

How to retrieve a value from a base64-decoded string in Angular 6?

Organizing a collection of bags using ng2-dragula technology

Issue with upgrading node from 12v to 16v: Trying to access a property that does not exist, specifically 'splice', within a circular dependency in module exports

When attempting to access the property 'originalname' of an undefined nodejs Mongoose object, an error is triggered

Troubleshooting issue with beforeEach in karma and Mocha after upgrading to Angular 4

Angular triggers a reload of iframe content whenever there is a manipulation of the DOM

The mark-compacts were not efficient enough, they approached the heap limit and as a result, the allocation failed. The JavaScript

Angular: Understanding Render Delay Caused by *ngIf and Expression Changes from Filters

Create a new instance of the TypeScript singleton for each unit test

Am I on track with this observation?

Angular Service Singleton Utilized in Components

How to Invoke a Function from Entry Component to Parent Component in Angular 7

I am unable to log in, even though there are users saved in the database

The function with which you are trying to use 'new' does not have a call or construct signature

Looking for Angular 2 material components for dart with CSS styling? Need help centering a glyph on your page?

Encountering a Webpack compilation error following the installation of a new package

Error encountered in Nest.js tests due to dependency injection issues between modules. The module 'src/foo/foo.module' cannot be located from 'bar/bar.service.spec.ts'

What is the method to insert a new <input> element after the last input field has been filled in

Mocking a third-party callback function in Jest for method implementation

Title: How to Build a Dynamic Logo Carousel with React and CSS without External Dependencies