coderkan

<div class="card-container">
    <button (click)="loadDynamicComponentsWithIndex(0);" class="btn btn-outline-danger m-2"> <img
      width="40"
      alt="Angular Logo"
      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
    />Angular</button>
    <button (click)="loadDynamicComponentsWithIndex(1);" class="btn btn-outline-success m-2"><img src="https://img.icons8.com/color/48/000000/vue-js.png"/>VueJS</button>
    <button (click)="loadDynamicComponentsWithIndex(2);" class="btn btn-outline-info m-2"><img src="https://img.icons8.com/colo

coderkan

export interface FrameworkComponent {
	data: any;
}

coderkan

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

coderkan

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

coderkan

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

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

@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

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

coderkan

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

coderkan

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