camilogiraldo

<form [formGroup]="form">
  
</form>

camilogiraldo

import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormData } from './../../shared/interface/form-data';

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

camilogiraldo

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { DynamicFormComponent } from './components/dynamic-form/dynamic-form.component';

@NgModule({
  declarations: [
    AppComponent,

camilogiraldo

// create form-data.ts under app/shared/interface/form-data.ts

export interface FormData {
  controlName: string;
  controlType: string;
  valueType?: string;
  currentValue?: string;
  placeholder?: string;
  options?: Array<{
    optionName: string;

camilogiraldo

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BigFeatureComponentComponent } from './big-feature-component/big-feature-component.component';

const routes: Routes = [
  { path: '', component: BigFeatureComponentComponent}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],

camilogiraldo

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponentComponent } from './home-component/home-component.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home'},
  { path: 'home', component: HomeComponentComponent},
  { path: 'bigComponent', loadChildren: './big-module/big-module.module#BigModuleModule'}   // Code modified
];

camilogiraldo

//Generate a new module, the one that will be lazy loaded

ng generate module big-module --routing

camilogiraldo

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponentComponent } from './home-component/home-component.component';
import { BigFeatureComponentComponent } from './big-feature-component/big-feature-component.component';

@NgModule({
  declarations: [

camilogiraldo

<a routerLink='/home'>Home</a>
<a routerLink='/bigComponent'>Feature</a>
<h1>
  Big Feature here.
</h1>
<p>
  Here is where the big feature of our fancy app will reside. 
</p>

camilogiraldo

<a routerLink='/home'>Home</a>
<a routerLink='/bigComponent'>Feature</a>
<h1>
  Home Component
</h1>
<p>
  Home component will be the first screen when the user visits our page.
</p>