angular - ngFor full list and unique list

Angular - ngFor full list and unique list

In Angular, when using ngFor to iterate over a list of items, you might encounter scenarios where you need to display both the full list and a unique list of items (without duplicates). Here's how you can achieve both functionalities:

Example Implementation

Assume you have a component with a list of items and you want to display both the full list and a unique list of items using ngFor.

1. Component TypeScript (app.component.ts)

import { Component } from '@angular/core'; @Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponent { items: string[] = ['Apple', 'Banana', 'Cherry', 'Banana', 'Apple', 'Date']; // Get unique items using a Set uniqueItems = Array.from(new Set(this.items)); }

2. HTML Template (app.component.html)

<div> <h3>Full List</h3> <ul> <li *ngFor="let item of items">{{ item }}</li> </ul> </div> <div> <h3>Unique List</h3> <ul> <li *ngFor="let item of uniqueItems">{{ item }}</li> </ul> </div>

Explanation

  • Component TypeScript:

    • items: Array containing the full list of items, including duplicates.
    • uniqueItems: Uses a Set to get unique items from items. Array.from(new Set(this.items)) creates an array from unique values in items.

  • HTML Template:

    • *ngFor="let item of items": Iterates over items to display the full list.
    • *ngFor="let item of uniqueItems": Iterates over uniqueItems to display the unique list.

Notes

  • Set Usage: Using Set ensures that duplicates are automatically removed because Set stores only unique values.

  • Performance Consideration: If you need to handle large datasets or ensure consistency in uniqueness, consider using data transformation techniques or Angular pipes.

  • Styling: Customize the HTML (ul, li) and CSS (app.component.css) according to your application's design requirements.

By following these steps, you can effectively display both the full list of items and a unique list of items without duplicates using ngFor in your Angular component. Adjust the logic and styling as per your specific use case and UI design needs.

Examples

  1. "How to display a full list with ngFor in Angular?"

    Description: Use *ngFor to iterate over an array and display each item in a template.

    Code:

    import { Component } from '@angular/core'; @Component({ selector: 'app-full-list', template: ` <ul> <li *ngFor="let item of items">{{ item }}</li> </ul> ` }) export class FullListComponent { items = ['Item 1', 'Item 2', 'Item 3', 'Item 4']; }

    Explanation: This code displays a list of items using *ngFor, which iterates over the items array and generates an <li> element for each item.

  2. "How to display a unique list with ngFor in Angular?"

    Description: Use *ngFor with a unique list derived from an array.

    Code:

    import { Component } from '@angular/core'; @Component({ selector: 'app-unique-list', template: ` <ul> <li *ngFor="let item of uniqueItems">{{ item }}</li> </ul> ` }) export class UniqueListComponent { allItems = ['Item 1', 'Item 2', 'Item 1', 'Item 3', 'Item 2']; uniqueItems = [...new Set(this.allItems)]; }

    Explanation: The uniqueItems array is created by converting allItems to a Set and then back to an array, ensuring that only unique items are displayed.

  3. "How to filter unique items from an array and display with ngFor?"

    Description: Filter unique items from an array and display them using *ngFor.

    Code:

    import { Component } from '@angular/core'; @Component({ selector: 'app-filter-unique', template: ` <ul> <li *ngFor="let item of uniqueItems">{{ item }}</li> </ul> ` }) export class FilterUniqueComponent { allItems = ['Item 1', 'Item 2', 'Item 1', 'Item 3', 'Item 2']; get uniqueItems() { return Array.from(new Set(this.allItems)); } }

    Explanation: The uniqueItems getter filters out duplicates from allItems using Set and displays the unique items.

  4. "How to use ngFor with an array of objects and display unique properties?"

    Description: Display unique properties of objects in an array using *ngFor.

    Code:

    import { Component } from '@angular/core'; @Component({ selector: 'app-unique-objects', template: ` <ul> <li *ngFor="let item of uniqueItems">{{ item.name }}</li> </ul> ` }) export class UniqueObjectsComponent { allItems = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 1, name: 'Item 1' }, { id: 3, name: 'Item 3' } ]; get uniqueItems() { const seen = new Set(); return this.allItems.filter(item => { const duplicate = seen.has(item.id); seen.add(item.id); return !duplicate; }); } }

    Explanation: This example filters out duplicate objects based on their id property and displays unique items.

  5. "How to use ngFor to display items from a dynamically updated list?"

    Description: Use *ngFor to display a list that updates dynamically.

    Code:

    import { Component } from '@angular/core'; @Component({ selector: 'app-dynamic-list', template: ` <ul> <li *ngFor="let item of items">{{ item }}</li> </ul> <button (click)="addItem()">Add Item</button> ` }) export class DynamicListComponent { items = ['Item 1', 'Item 2']; addItem() { this.items.push(`Item ${this.items.length + 1}`); } }

    Explanation: This code shows a list that updates when a new item is added, demonstrating *ngFor's ability to handle dynamic lists.

  6. "How to handle an empty array in ngFor?"

    Description: Handle cases where the array might be empty using *ngFor.

    Code:

    import { Component } from '@angular/core'; @Component({ selector: 'app-empty-array', template: ` <ul *ngIf="items.length; else noItems"> <li *ngFor="let item of items">{{ item }}</li> </ul> <ng-template #noItems>No items to display</ng-template> ` }) export class EmptyArrayComponent { items: string[] = []; }

    Explanation: This example uses *ngIf to check if the array is empty and display a message if no items are present.

  7. "How to use ngFor with nested arrays and display unique items?"

    Description: Display unique items from nested arrays using *ngFor.

    Code:

    import { Component } from '@angular/core'; @Component({ selector: 'app-nested-array', template: ` <ul> <li *ngFor="let item of uniqueItems">{{ item }}</li> </ul> ` }) export class NestedArrayComponent { nestedItems = [ ['Item 1', 'Item 2'], ['Item 2', 'Item 3'], ['Item 4'] ]; get uniqueItems() { const allItems = this.nestedItems.flat(); return Array.from(new Set(allItems)); } }

    Explanation: This code flattens the nested arrays into a single array, then filters out duplicate items before displaying them.

  8. "How to sort items and display unique items with ngFor?"

    Description: Sort and display unique items from an array using *ngFor.

    Code:

    import { Component } from '@angular/core'; @Component({ selector: 'app-sorted-unique', template: ` <ul> <li *ngFor="let item of sortedUniqueItems">{{ item }}</li> </ul> ` }) export class SortedUniqueComponent { items = ['Item 3', 'Item 1', 'Item 2', 'Item 1', 'Item 2']; get sortedUniqueItems() { const uniqueItems = Array.from(new Set(this.items)); return uniqueItems.sort(); } }

    Explanation: This code filters out duplicate items and sorts the unique items before displaying them.

  9. "How to use ngFor with pagination and display unique items?"

    Description: Implement pagination with *ngFor while displaying unique items.

    Code:

    import { Component } from '@angular/core'; @Component({ selector: 'app-pagination', template: ` <ul> <li *ngFor="let item of paginatedItems">{{ item }}</li> </ul> <button (click)="previousPage()">Previous</button> <button (click)="nextPage()">Next</button> ` }) export class PaginationComponent { items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']; currentPage = 0; itemsPerPage = 2; get paginatedItems() { const uniqueItems = Array.from(new Set(this.items)); return uniqueItems.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage); } nextPage() { this.currentPage++; } previousPage() { if (this.currentPage > 0) { this.currentPage--; } } }

    Explanation: This code implements basic pagination for a list, ensuring that only unique items are displayed on each page.

  10. "How to conditionally format items in a list using ngFor?"

    Description: Conditionally format items while displaying them with *ngFor.

    Code:

    import { Component } from '@angular/core'; @Component({ selector: 'app-conditional-format', template: ` <ul> <li *ngFor="let item of items" [ngClass]="{ 'highlight': item.includes('1') }"> {{ item }} </li> </ul> `, styles: [` .highlight { color: red; } `] }) export class ConditionalFormatComponent { items = ['Item 1', 'Item 2', 'Item 3', 'Item 4']; }

    Explanation: This code uses ngClass to conditionally apply a CSS class based on the item's content, allowing for dynamic formatting.

More Tags

string.format xml-drawable git-push pyttsx global-variables purrr jtableheader processstartinfo landscape-portrait stack

More Programming Questions

More Cat Calculators

More Statistics Calculators

More Pregnancy Calculators

More Animal pregnancy Calculators