How To Populate HTML Elements Dynamically in Angular

Thu, Apr 16, 2020

Read in 2 minutes

In this, we will explore how to generate HTML elements dynamically. So all the HTML details element name ,element type(text box,dropdown or date) , default values will come as JSON from backend.

Introduction:

In my previous post How to Consume REST API,I explained how to consume rest API.So I am going to use the same JSON and populated the HTML page.

Include bootstrap

npm install --save bootstrap
npm install --save jquery
copy  the below line and paste in style.css
@import "~bootstrap/dist/css/bootstrap.css";

app.component.html

<div class="container">
  <form #detailsForm="ngForm" (ngSubmit)="onFormSubmit(detailsForm)">
    <div *ngFor="let block of blockArr">
      <div *ngFor="let b of block.block">
        <p style="color:blue;font-size:larger;">{{ b.description }} block</p>
        <div *ngFor="let element of b.Elements">
          <div *ngIf="element.type == 'textbox'" class="form-group">
            <label>{{ element.description }}</label>
            <input
              type="{{ element.type }}"
              name="{{ element.key }}"
              class="form-control"
              id="{{ element.key }}"
              ngModel
            />
          </div>
          <div *ngIf="element.type == 'date'" class="form-group">
            <label>{{ element.description }}</label>
            <input
              type="{{ element.type }}"
              name="{{ element.key }}"
              class="form-control"
              id="{{ element.key }}"
              ngModel
            />
          </div>
          <div *ngIf="element.type == 'dropdown'" class="form-group">
            <label>{{ element.description }}</label>
            <select
              name="{{ element.key }}"
              class="form-control"
              id="{{ element.key }}"
              ngModel
            >
              <option *ngFor="let value of element.possibleValues">
                {{ value }}
              </option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group col-auto">
      <input type="submit" class="btn btn-primary" value="submit" />
    </div>
  </form>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'ConsumeAPI';

  url = 'assets/data.json';
//url="https://reqres.in/api/users";
 private blockArr:object[];

  constructor(private http:HttpClient){
    }

    ngOnInit(){

      this.http.get<any>(this.url).subscribe(data => {
        console.log(data);
    this.blockArr = data;
    //console.log(JSON.stringify(this.blockArr));
})
    }

    onFormSubmit(detailsForm){

      alert("detailsForm== "+JSON.stringify(detailsForm.value));

    }
}

app.module.ts

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

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Output

dynamicHtmlOP1

dynamicHtmlOutPut