NG7- Role based access the application -Auth gurad and CanActivate

Ng7- NGXPermission  - Role Based app access
----------------------------------------------

To install this library, run:
$ npm install ngx-permissions --save

and then from your Angular AppModule:
// Import your library
import { NgxPermissionsModule } from 'ngx-permissions';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
     NgxPermissionsModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

SharedModule
--------------
If you use a SharedModule that you import in multiple other feature modules, you can export the NgxPermissionsModule to make sure you don't have to import it in every module.
@NgModule({
    exports: [
        CommonModule,
        NgxPermissionsModule
    ]
})
export class SharedModule { }

Lazy loaded modules
--------------------
When you lazy load a module, you should use the forChild static method to import the NgxPermissionsModule
@NgModule({
    imports: [
        NgxPermissionsModule.forChild({
        permissionsIsolate: true,
        rolesIsolate: true})
    ]
})
export class LazyIsolatedLoadedModule { }

using in component
------------------
import { Component, OnInit } from '@angular/core';
import { NgxPermissionsService } from 'ngx-permissions';

 constructor(private permissionsService: NgxPermissionsService,
               private http: HttpClient) {}

  ngOnInit(): void {
    const perm = ["ADMIN", "EDITOR"];

    this.permissionsService.loadPermissions(perm);
 
     this.http.get('url').subscribe((permissions) => {
       //const perm = ["ADMIN", "EDITOR"]; example of permissions
       this.permissionsService.loadPermissions(permissions);
    })
  }

  Usage in templates
------------------------
<div *ngxPermissionsOnly="['ADMIN', 'GUEST']">
    <div>You can see this text congrats</div>
</div>

<ng-template ngxPermissionsOnly="ADMIN">
  <div>You can see this text congrats</div>
 </ng-template>

 <ng-template [ngxPermissionsExcept]="['JOHNY']">
   <div> All will see it except JOHNY</div>
 </ng-template>


 App-routing.module.ts
 ======================
 lazy module with autguard
 --------------------------->>>
  { path:'admin',canActivate: [AuthGuard],canLoad: [NgxPermissionsGuard],
                data: {
                  permissions: {
                    only: ['SUPER_ADMIN','ADMIN',],
                    redirectTo: '/'
                  }
                }, loadChildren:'./lazymodule/lazymodule.module#LazyModule'  },

 lazy module and inside component
 ---------------------------->>>>
const routes: Routes = [
  {
    path: '', component: lazymoduleComponentComponent,canActivateChild: [NgxPermissionsGuard],
    children: [{
        path: '',component: LazymoduleComponent,
        data: {
          permissions: { 'ROLE_DEVELOPER', 'ROLE_INFORMATIONOWNER', 'ROLE_ADMINISTRATOR', 'ROLE_DELEGATEINFORMATIONOWNER'],
            redirectTo: '/'
          },
        }
      },

  FOR THIS
  IMPORT in import part of module [,...NgxPermissionsModule.forChild(),..], add in providers [NgxPermissionsService]

  import { NgxPermissionsModule } from "ngx-permissions";
import { NgxPermissionsService } from 'ngx-permissions';

///// IMportant:
To load the user roles from Global Service - > loadService or Authguard service or initGetToken service
--------------------------------------------------------------------------------------------------------
import { NgxPermissionsService } from 'ngx-permissions';
@injectable {
export class AuthService

 constructor( private permissionsService: NgxPermissionsService){

 this.permissionsService.loadPermissions(response.Roles);
 }
 }
 REf: https://www.npmjs.com/package/ngx-permissions