How To Add Dynamic Input Fields In Angular | AV Coding
Hey guys welcome to AV Coding
Today we will learn how to add dynamic input fields in angular simple and easy.
We will be using stackbliz for live preview and you can find the preview link below
Preview Link :- https://stackblitz.com/edit/angular-dynamic-field/
The complete code is explained in the video below and the source code is provided below.
app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'Dynamic Add Fields';
values = [];
ngOnInit() {
}
removevalue(i){
this.values.splice(i,1);
}
addvalue(){
this.values.push({value: ""});
}
}
app.component.html
<h2>{{ name }}</h2>
<div *ngFor="let value of values; let i = index">
<input type="text" [(ngModel)]="value.value" #name="ngModel" name="value{{i}}">
<button (click)="removevalue(i)">Remove</button>
</div>
<button (click)="addvalue()">ADD</button>
<h2>Result</h2>
<div *ngFor="let value of values;">
{{ value.value }}
</div>Hope You Liked This Blog. Share, Comment, Subscribe And Press The Bell Icon In The Bottom Right Side For More Code Feeds
0 Comments
