Dynamic Div in Angular

Introduction

 
Hello everyone! It feels good to be motivated and share my knowledge in the C# corner community. Thank you, everyone, for your valuable comments. I will share my knowledge continuously by writing articles and blogs hereafter. So, in this time, 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 <appname>". 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:
  1. addbutton()  
  2.    {  
  3.      this.lists.push({"declare":""})  
  4.    }  
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:
  1. deletebutton(i: number) {  
  2.      this.lists.splice(i, 1);  
  3.    }  
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.
  1. ngOnInit(){  
  2.       this.lists=[]  
  3.   this.lists.push({"declare":""})  
  4.     }  
 
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 .
    1. <div class="row" *ngFor="let data of Service; index as i;">  
    2.   
    3.       <div class="col-sm-4" style="margin-top: 1%;">  
    4.               <input type="text"  type="text" [value]="data.declare" class="form-control" placeholder="Name" (change)="serviceChange(i,$event.target.value)"  
    5.              ngModel  [ngModelOptions]="{standalone: true}">  
    6.                 
    7.       </div>  
    8.       <div class="col-sm-2">  
    9.           <button type="button" class="btn btn-primary" style="margin-top: 10%;" (click)="Addservice()" *ngIf="i==0">Add New</button>  
    10.           <button type="button" class="btn btn-danger" style="margin-top: 10%;" (click)="deleteservice(i)" *ngIf="i!=0">Delete</button>  
    11.       </div>  
    12.   </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.
  1. listChange(position: any, values: any)  
  2.   {  
  3.      this.lists[position].declare=values;  
  4.   }  
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!


Similar Articles