What is Dynamic Div in Angular?

Introduction

Hello everyone! In this post, we have discussed how to generate a dynamic div textbox.

Requirements for the application:

• NodeJs
• Angular CLI
• Visual studios code IDE

Step 1 - Create an Angular app

The command to create a new Angular app is "ng new ". Let’s create an Angular app using the following commands.

Step 2

Open the above project that you have created in Visual Studio code.

Step 3

Open the app.component.ts file. This code is a sample designed for the input textbox

We can follow the below code:

addbutton()  
   {  
     this.lists.push({"declare":""})  
   }  

Here, I have used this function button for generating the input box.

What is Push?

The push() method adds a new item to the end of an array and returns the new length.

The next step is to add the following code:

deletebutton(i: number) {  
     this.lists.splice(i, 1);  
   }  

Delete function declare for the delete the your generated input box using for splice .

What is Splice?

The splice() method adds and removes items from an array, and returns the removed items.

Step 3

Then, we can call the empty array for ngOnIinit.

ngOnInit(){  
      this.lists=[]  
  this.lists.push({"declare":""})  
    }  

Whats is ngOnInit?

It’s called once the component is initialized.

Step 4

Let’s open the app.componet.html file, follow the below code:

1. We can assign for array list in ngfor as an index position after getting the div length for inputbox.
2. Input box Add the ngModeldirective and ngmodeloptions .

<div class="row" *ngFor="let data of Service; index as i;">  
  
      <div class="col-sm-4" style="margin-top: 1%;">  
              <input type="text"  type="text" [value]="data.declare" class="form-control" placeholder="Name" (change)="serviceChange(i,$event.target.value)"  
             ngModel  [ngModelOptions]="{standalone: true}">  
                
      </div>  
      <div class="col-sm-2">  
          <button type="button" class="btn btn-primary" style="margin-top: 10%;" (click)="Addservice()" *ngIf="i==0">Add New</button>  
          <button type="button" class="btn btn-danger" style="margin-top: 10%;" (click)="deleteservice(i)" *ngIf="i!=0">Delete</button>  
      </div>  
  </div>  

Whats is ngFor?

Its point is to repeat a provided HTML template once for each value in an array, each time passing an array value is a context for string binding. By default, *ngFor has the following local variables.

Index

The index of the current item in the iterable.

Change

Invoked event changes every time there is a change in one of the input properties [inputProperty] of the component.

What is $event?

Notice $event? It’s optional, and it is used to capture the data which is emitted by the event.

It’s useful if you want to invoke a function only for input means just use (input).

What is ngIf?

The ngIfdirective, which is used for what you want to display or remove an element based on a condition.

If the condition is a false element, the directive attached to it will be removed from the DOM.

Syntax: ngIf=”condition”

Step 5

Now, add the change event in the app.componet.ts file.

listChange(position: any, values: any)  
  {  
     this.lists[position].declare=values;  
  }  

Check the position and values and afterwards assign to the object .

Step 5

After completing all the above steps, we can run the project using the below command:

Command - ng serve --open

After completing all the above steps we can see the output. Please refer to the above screenshot for your reference.

Summary

I hope you understand how to add dynamic div. I hope this article is useful to you and please comment below if you have any queries. Thanks for reading!

#angular #dynamic #programming