aniketmuruskar

const option = {
    url: Routes.fetchLocalResponse(pageName),
    // url: Routes.fetchServerResponse(pageName)
};

aniketmuruskar

{
    "pageElements": [
        {
            "id": "projectDetailTitle",
            "name": "projectDetailTitle",
            "componentType": "label",
            "visible": true,
            "data": "Dynamic component loader",
            "heading": true
        },

aniketmuruskar

import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { AddComponent } from '../add.component';
import { AppComponentHostDirective } from '../app-component-host.directive';

@Component({
    selector: 'app-ui-builder',
    templateUrl: './app-ui-builder.component.html',
    styleUrls: []
  })
  export class AppUIBuilderComponent implements OnInit, OnDestroy, OnChanges {

aniketmuruskar

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AddComponent } from '../add.component';

@Component({
  selector: 'app-dynamic-component',
  templateUrl: './app-dynamic.component.html',
  styleUrls: []
})
export class AppDynamicComponent implements OnInit {

aniketmuruskar

import { Type } from '@angular/core';

export class AddComponent {
    constructor(
        public component: Type<any>,
        public config: any,
        public data: string
    ) {}
}

aniketmuruskar

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import {
  Resolve,
  RouterStateSnapshot,
  ActivatedRouteSnapshot
} from '@angular/router';
import { map, Observable } from 'rxjs';
import { PageBuilderService } from './page-builder.service';

aniketmuruskar

<app-ui-builder [components]="components"></app-ui-builder>

aniketmuruskar

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppDynamicComponent } from './app-dynamic-component/app-dynamic.component';
import { AppResolver } from './shared/app.resolver';

const routes: Routes = [
  {
    path: 'project-overview',
    component: AppDynamicComponent,
    resolve: {

aniketmuruskar

<div class="container mt-4">
    <ul>
        <li><a routerLink="/project-overview" routerLinkActive="active">Project Overview</a></li>
        <li><a routerLink="/project-detail">Project Detail</a></li>
    </ul>
    <router-outlet></router-outlet>
</div>

aniketmuruskar

import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { AddComponent } from '../add.component';
import { AppComponentHostDirective } from '../app-component-host.directive';

@Component({
    selector: 'app-ui-builder',
    templateUrl: './app-ui-builder.component.html',
    styleUrls: []
  })
  export class AppUIBuilderComponent implements OnInit, OnDestroy, OnChanges {