I know in javascript, I can create an element in below way.

     var input = document.createElement("input");
     input.type = "text";
     input.className = "css-class-name"; // set the CSS class
     document.body.appendChild(input);

In my angular application, I'm getting some array value from http service inside ngOnInit of appponent.ts.

I have a scenario to create the input type text dynamically based on array value. If the array value is 5, it should create five input type.

Is it possible with typescript? Or should I use the above code in typescript as well?

What is the best approach to deal this scenario?

I know in javascript, I can create an element in below way.

     var input = document.createElement("input");
     input.type = "text";
     input.className = "css-class-name"; // set the CSS class
     document.body.appendChild(input);

In my angular application, I'm getting some array value from http service inside ngOnInit of app.ponent.ts.

I have a scenario to create the input type text dynamically based on array value. If the array value is 5, it should create five input type.

Is it possible with typescript? Or should I use the above code in typescript as well?

What is the best approach to deal this scenario?

• javascript
• angular
• typescript

• You mean if length of array is five? – Lazar Ljubenović Commented Aug 30, 2018 at 14:11
• Yes Exactly..... – UI_Dev Commented Aug 30, 2018 at 14:12
• TypeScript piles to, and is a superset of, JavaScript. Anything you write in JavaScript will be valid TypeScript. However, in Angular it's not a good idea to create nodes using createElement and the like. You probably want to create an array of 5 elements, and bind an *ngFor to that. – Heretic Monkey Commented Aug 30, 2018 at 14:14
• Your code already is valid Typescript except you haven't added types. – connexo Commented Aug 30, 2018 at 14:15
• @connexo true, though it's not remended in Angular. – user4676340 Commented Aug 30, 2018 at 14:17

3 Answers 3

Create a bundle of form controls. Stackblitz

inputs: FormControl[] = [];

ngOnInit() {
  this.myService.getNumberOfInputs().subscribe(count => {
    for (let i = 0; i < count; i++) {
      this.inputs.push(new FormControl(''));
    }
  });
}

<input type="text" *ngFor="let input of inputs" [formControl]="input">

Use the *ngFor, which is an Angular directive, to loop over elements of the array. If in your model you have public array = [1, 2, 3, 4], and in your template you have

<ul>
  <li *ngFor="let element of array">{{ element }}</li>
</ul>

this will print the following DOM:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

So, for your problem, to create inputs, just put inputs inside the loop.

<div *ngFor="let element of array">
  <input type="text" class="css-class-name">
</div>

By the way, this is a basic operation in Angular templates. I urge you to read the official introduction to Angular from the official site to get a grasp at what Angular can do.

Component:

public inputControlsArr : Array<any> = [];

this.service.getValues().subscribe((values)=>{
   this.inputControlsArr = values;
});

Template:

<div *ngFor="let input of inputControlsArr; let i = index;">
    <input type="text" [(ngModel)}="inputControlsArr[i]"/>
</div>