I have an input with ngfor, it appears several options
<article *ngIf="layout=='esalpet'" class="filter-group">
<header class="card-header">
<a href="#" data-toggle="collapse" data-target="#collapse_4" aria-expanded="true" class="">
<i class="icon-control fa fa-chevron-down"></i>
<h6 class="title">Marcas</h6>
</a>
</header>
<div class="filter-content collapse show" id="collapse_4">
<div *ngFor="let categ of filtro" class="card-body">
<label class="custom-control custom-radio">
<input (change)="filterMarcas($event)" class="custom-control-input" type="radio" id="5" name="marca"
value="{{categ.marcaJ.marca}}" id="flexCheckChecked" />
<div class="custom-control-label" id="5">{{categ.marcaJ.marca}}</div>
</label>
</div>
<!-- card-body.// -->
</div>
when selecting some of the inputs, I would like only the input selected by the user to appear
follow my method i tried to do
filterMarcas(event){
this.slicedItems = this.slicedItems.filter(item => item.marcaJ?.marca === event.target.value )
console.log(this.slicedItems)
this.filtro = this.slicedItems.filter((record, index) => this.filtro.findIndex(check => check.marcaJ?.marca === record.marcaJ?.marca) === index);
this.peso = this.peso.filter((record, index) => this.peso.findIndex(check => check.peso === record.peso) === index);
}
Is there a better method than this?
this.filtro = this.slicedItems.filter((record, index) => this.filtro.findIndex(check => check.marcaJ?.marca === record.marcaJ?.marca) === index);
Can anyone help me with this ?
Create a new PipeTransform
import { Pipe, PipeTransform } from '@angular/core';
interface Marca {
marcaJ: {
marca: string
}
}
@Pipe({
name: 'marcaFilter'
})
export class MarcaFilterPipe implements PipeTransform {
transform(marcas: Marca[], name: string): Marca[] {
if (!name) {
return marcas;
}
return marcas.filter(marca => marca.marcaJ?.marca === name);
}
}
Declare it within your module.
@NgModule({
...,
declarations: [
...
MarcaFilterPipe,
],
})
export class AppModule { }
And add the pipe to your *ngFor
<div *ngFor="let categ of filtro | marcaFilter: categ.marcaJ.marca">
...
</div>