Dynamic header link not working need refresh angular 7

Asked May 08 '19 at 06:20

Active May 08 '19 at 06:43

Viewed 420 times

I am developing role based permission where now I need to display the links on the header and it is coming from the db.

After login I need to refresh the page in order to display dynamic links.

I have used ngx-permission and loading the permission array and checking the permission.

header.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { LoginService } from '../login.service';
import { Router } from '@angular/router';
import { NgxPermissionsService } from 'ngx-permissions';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  permissionData = null
  permissionModule = null
  useremail = null
  perm = [];

  constructor(
    private loginApi: LoginService,
    private permissionsService: NgxPermissionsService,
    private http: HttpClient,
    private router: Router,
  ) {
    console.log("Header constuctor")
  }

  ngOnInit() {
    console.log('Header initialized')
    this.useremail = localStorage.getItem('useremail')
    this.perm.push(this.useremail)
    // console.log("User Email", this.useremail)
    this.checkUserPermissions()
  }

  logout() {
    this.loginApi.logout()
    this.router.navigate(['/login'])
  }

  checkUserPermissions() {
    let userID = localStorage.getItem('userid')
    if (userID) {
      this.loginApi.getAuthenticatedUserPermissions(userID).subscribe(res => {
        this.permissionModule = Object.keys(res[0].permissions[0])
        this.permissionData = res
        // ngx permission
        const perm = [];
        perm.push(this.permissionModule)
        this.permissionsService.loadPermissions(perm)
      }, error => {
        console.log(error)
      })
    }
  }

}

header.component.html

<div *ngIf="permissionModule?.length">
        <div *ngxPermissionsOnly="dashboard">
          <a routerLink="/barcharts">Dashboard</a>
        </div>
        <div *ngxPermissionsOnly="product management">
          <a routerLink="/productmanagement">Product Management</a>
        </div>
        <div *ngxPermissionsOnly="app userlisting">
          <a routerLink="/appuserlisting_new">App User Listing</a>
        </div>
      </div>

edited May 08 '19 at 06:38

asked May 08 '19 at 06:20

Mysterious Coder

do you want it to refresh it on logging in – Sathiraumesh May 08 '19 at 06:26
Nope I am developing SPA so there is no refresh concept. – Mysterious Coder May 08 '19 at 06:27
yeah I know do you want to update the links list in logging – Sathiraumesh May 08 '19 at 06:28
Yes but without refreshing page – Mysterious Coder May 08 '19 at 06:30
yes you can do that just bind the links to the template angular will automatically update your view – Sathiraumesh May 08 '19 at 06:31
I don't know about it – Mysterious Coder May 08 '19 at 06:32
have you get the links from the database to your angular app – Sathiraumesh May 08 '19 at 06:33
Yes everything works but need to refresh the page. – Mysterious Coder May 08 '19 at 06:35
is it populated in the perm array – Sathiraumesh May 08 '19 at 06:36
I have edited answer check it now – Mysterious Coder May 08 '19 at 06:38
did you correctly imported the module are there no any errors can you please verify by opening dev tools – Sathiraumesh May 08 '19 at 06:42
Yes I have checked everything and there is nor problem.. – Mysterious Coder May 08 '19 at 06:44
does permisonmodule array get populated – Sathiraumesh May 08 '19 at 06:49
Yes it is.. I think I need to watch on variable changes.. – Mysterious Coder May 08 '19 at 06:53
verify whether it gets populated – Sathiraumesh May 08 '19 at 06:59
it is working perfectly – Mysterious Coder May 08 '19 at 07:05
can you put up the code in stackblitz so I can view it – Sathiraumesh May 08 '19 at 07:06

Dynamic header link not working need refresh angular 7

0 Answers0