coderkan

    private _employeeJsonPath = "assets/employes.json";
    
    const { url, method } = req;
    if (url.endsWith("/employes") && method === "GET") {
      req = req.clone({
        url: this._employeeJsonPath,
      });
      return next.handle(req).pipe(delay(500));
    }

coderkan

{
      "id": "b16ecd2b-596e-4453-a05c-fe10d6f1a4c2",
      "full_name": "Bard Corkan",
      "unit": "IT",
      "emp_avatar": "https://robohash.org/reprehenderitatquelaboriosam.jpg?size=36x36&set=set1"
}

coderkan

const routes: Routes = [
    
      { path: '', redirectTo: '/home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent },
      {
        path: 'admin', component: AdminDashboardComponent,
        canActivate: [AuthGuard],
        data: {
          role: 'ROLE_ADMIN'
        }

coderkan

 @Injectable({
      providedIn: 'root'
    })
    export class AuthGuard implements CanActivate, CanActivateChild, CanDeactivate<unknown>, CanLoad {
    
    
      constructor(private authService: AuthService, private router: Router) { }
    
      canActivate(
        next: ActivatedRouteSnapshot,

coderkan

    @Injectable({
      providedIn: 'root'
    })
    export class AuthService {
      isLogin = false;
    
      roleAs: string;
    
      constructor() { }
    

coderkan

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'dynamic-comp-app';
  frameworks: FrameworkItem[];
  @ViewChild(FrameworkDirective, { static: true }) frameworkHost: FrameworkDirective;
  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

coderkan

loadDynamicComponentsWithIndex(ind: any) {
    const frameworkItem = this.frameworks[ind];
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(frameworkItem.component);
    const viewContainerRef = this.frameworkHost.viewContainerRef;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent(componentFactory);
    (<FrameworkComponent>componentRef.instance).data = frameworkItem.data;
  }

coderkan

<h2>{{data.name}} component selected</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/cf/Angular_full_color_logo.svg">

coderkan

export class AngularComponent implements OnInit, FrameworkComponent{
  @Input('data') data: any;
  constructor() { }
  ngOnInit(): void {
  }
}

coderkan

import { Type } from '@angular/core';
export class FrameworkItem {
  constructor(public component: Type<any>, public data: any) {}
}