In Angular, the ngFor
directive is used to iterate over an array or an object and display each item in the template. In some cases, you may need to add or remove items from the loop dynamically. In this tutorial, we will discuss how to add and remove items from the loop dynamically.
Let’s say we have a list of products in a dummy JSON file and we want to display the list in the template using ngFor
. We also want to give users the ability to add and remove products from the list dynamically.
How to Add/Remove Item in NgFor Loop Dynamically?
Step 1-Â Set up the environment
Step 2-Â Create the product interface and dummy data
Step 3-Â Create the app component
Step 4-Â Create the app template
Step 5-Â Test the application
Step 1 – Set up the environment
Create a new Angular project using the Angular CLI by running the command ng new dynamic-ngFor
. Navigate to the project folder using cd dynamic-ngFor
and open the project in your favorite code editor.
Step 2 – Create the product interface and dummy data
In the src/app
folder, create a new file called product.ts
and define the Product
interface as follows:
export interface Product {
id: number;
name: string;
price: number;
}
Create a new file called products.json
in the src/assets
folder and add some dummy data:
[
{
"id":1,
"name":"Product 1",
"price":10
},
{
"id":2,
"name":"Product 2",
"price":20
},
{
"id":3,
"name":"Product 3",
"price":30
}
]
Step 3 – Create the app component
In the src/app
folder, open the app.component.ts
file and define the component as follows:
import { Component } from '@angular/core';
import { Product } from './product';
import products from '../assets/products.json';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
products: Product[] = products;
addProduct() {
const id = this.products.length + 1;
const name = `Product ${id}`;
const price = id * 10;
this.products.push({ id, name, price });
}
removeProduct(product: Product) {
const index = this.products.indexOf(product);
this.products.splice(index, 1);
}
}
In the component, we import the Product
interface and the products.json
file. We define a products
array to store the product data and initialize it with the data from the JSON file. We define two methods addProduct()
and removeProduct()
to add and remove products from the list.
Step 4 –Â Create the app template
In the src/app
folder, open the app.component.html
file and define the template as follows:
<h2>Products</h2>
<ul>
<li *ngFor="let product of products">
{{ product.name }} - ${{ product.price }}
<button (click)="removeProduct(product)">Remove</button>
</li>
</ul>
<button (click)="addProduct()">Add Product</button>
In the template, we use the ngFor
directive to iterate over the products
array and display each product’s name and price. We also add a button to remove the product and another button to add a new product to the list.
Step 5 – Test the application
Run the application using the command ng serve --open
.
Conclusion
In this tutorial, we have learned how to add and remove items from a loop dynamically using ngFor
in Angular. We started with an introduction to the ngFor
directive and discussed its usage and syntax. We then proceeded to create an Angular app that displays a list of products using ngFor
and allows users to add and remove products dynamically.
We also discused a sample problem where we needed to add a new field quantity
to each product in the list and allow users to update the quantity dynamically. We provided a solution to this problem by updating the Product
interface, the addProduct()
method, and the template.
By following this tutorial, developers can now create Angular apps tht use ngFor
to display lists of items and allow users to add and remove items dynamically. This is a common requirement in many web applications, and this tutorial provides developers with the necessary knowledge and skills to implement this functionality.
Leave a Reply