NgFor - How to Add/Remove Items from the Loop Dynamically?

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.

Category: Angular

NgFor – How to Add/Remove Items from the Loop Dynamically?