How to show the profile (user,super user,Admin) information based on the user type in dashboard page using angular Project

In my angular application I have created the Dashboard page ,super user dashboard and admin dashboard pages. Super user and admin dashboard pages having the same data as dashboard page and some extra tables on it.That’s why I have created the admin and components page as and some tables data in component.html page

And I have used the same navigation links(about,notifications,profile,logout) bar for all the dashboards which I have placed in basic Dashboard page.

Now I want to show the profile information based on the usertype(user,superuser,admin)when we click on the profile link.

I have created the page for profile link in navbar.something like:


<h4>First name:</h4>
<h4>Last name:</h4>
<h4>Last login:</h4>

And I have called the user profile with GET method,I have got the details as

usertype,firstname,lastname,email-id,last-login details.

Now I want to place the details of user or super user or admin details in profile page when we click on that profile link based on the usertype from the get method API.

Navigation links in dashboard page:


<ul class="navbar-nav mr-auto mt-2 mt-lg-0">

        <li class="nav-item">
          <a routerLink="/dashboard" class="nav-link" id="col"><i class="fa fa-fw fa-home fa-lg"></i>Home <span
        <li class="nav-item">
          <a routerLink="/About" class="nav-link" href="#" id="col"><i class="fa fa-info-circle fa-lg"></i> About</a>

        <li class="nav-item">
          <a routerLink="/dashboard" class="nav-link" id="col"><i class="fa fa-fw fa-bell"></i> Notifications&nbsp;<span class='badge badge-primary'>{{ncount}}</span></a>

      <div class="social-part">
        <a href="#" id="col" style="color: black;" >Profile</a>&nbsp;&nbsp;

        <a href="#" id="col" style="color: black;" (click)="logout()">Logout</a>


I have tried many ways but not working Can anyone help me regarding this.

Source: Angular Questions