Different Ways to Modify Data with the Change Event in Angular 8

Question

Different Ways to Modify Data with the Change Event in Angular 8

How can I dynamically change data using the (change) event? I'm attempting to alter the gallery items based on a matching value. By default, I want to display all gallery items.

public items = [{
    value: 'All',
    name: 'All Items'
  },
  {
    value: 'Photos',
    name: 'Photo Items'
  },
  {
    value: 'Video',
    name: 'Video Items'
  },
];

<div *ngFor="let item of items" class="nav-li">
  <ul>
    <li class="value" [value]="item.value"><a href="">{{item.value}}</a></li>
  </ul>

</div>

<div class="gallery">
  <div *ngFor="let item of items" class="card">
    <div class="data">{{item.name}}</div>
  </div>
</div>

If you click on "Photos," it should show only photo items instead of displaying all items by default.

angular typescript

Answer 1

Answer №1

Check out this HTML demo with a custom pipe

<div *ngFor="let item of items | customFilter : filter" class="card">
    <div class="data">{{item.name}}</div>
</div>

Set the initial value of the filter in the component to 'All'

filter='All'

Add a click method for each list item

<ul>
   <li class="value"(click)="updateFilter(item.value)" [value]="item.value"><a href="">{{item.value}}</a></li>
</ul>

In the component file, define the onChange function

updateFilter(value){
  this.filter=value;
}

This example demonstrates how to use a custom pipe in Angular

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customFilter'
})

export class CustomFilterPipe implements PipeTransform {
  transform(data: any[], filterValue:string): any {
      return data.filter(x => filterValue == 'All' || x.value == filterValue);       
  }
}

Answer 2

Check out this HTML demo with a custom pipe

<div *ngFor="let item of items | customFilter : filter" class="card">
    <div class="data">{{item.name}}</div>
</div>

Set the initial value of the filter in the component to 'All'

filter='All'

Add a click method for each list item

<ul>
   <li class="value"(click)="updateFilter(item.value)" [value]="item.value"><a href="">{{item.value}}</a></li>
</ul>

In the component file, define the onChange function

updateFilter(value){
  this.filter=value;
}

This example demonstrates how to use a custom pipe in Angular

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customFilter'
})

export class CustomFilterPipe implements PipeTransform {
  transform(data: any[], filterValue:string): any {
      return data.filter(x => filterValue == 'All' || x.value == filterValue);       
  }
}

Different Ways to Modify Data with the Change Event in Angular 8

Answer №1

Similar questions

Unable to establish a connection between Laravel websocket and Angular

Trouble extracting and utilizing GraphQL queries in Typescript with relay-compiler

Unable to display label in form for Angular 2/4 FormControl within a FormGroup

"Ionic Calendar 2 - The ultimate tool for organizing your

Troubleshooting: Why is my ng serve command in Angular 5 not

Struggling to position a div below another div within a flex box layout

To modify the pageSize of the KendoGrid in order to display 1-10 out of 100, you can customize the appearance and functionality of the page numbers by changing

Is it possible to use non-numeric values as keys in a Typescript Map?

Angularfire2 combined with Bootstrap Modal will enhance the user experience of

Change object values to capital letters

In TypeScript, the first element of an array can be inferred based on the second element

angular2 the custom template validator is encountering outdated values

My type is slipping away with Typescript and text conversion to lowercase

conflict between ng-content and textarea elements

When creating a new instance of a class in Angular, the methods for initialization are not included

Issue with installing angular CLI on Windows 10

Update the content of a page on an Ionic application every few minutes

Searching with Mat-autocomplete across multiple fields simultaneously

Update an API call to switch from promises to observables, implementing axios

Angular searchbar issue: Unable to assign parameter of type 'unknown' to parameter of type 'string'