A4 filtering data on checkbox click

[Stef]

Hello,

i try to create a data filter and i have to say that i am totally new to Angular.

So, if a user clicks on a special checkbox the data should be displayed and the rest should be blacklisted.

At the moment when a checkbox is checked, the whole list is blacklisted.

At this point, i want to filter the gender. If checkbox 1(-> value = m) is checked, each female(-> f) have to be blacklisted.

home.component.ts

const HEROES: Hero[] = [

  { id: 11, name: 'Mr. Nice', gender : 'm' },

  { id: 12, name: 'Narco', gender : 'f' },

  { id: 13, name: 'Bombasto', gender : 'm' },

  { id: 14, name: 'Celeritas', gender : 'f' },

  { id: 15, name: 'Magneta', gender : 'm' },

  { id: 16, name: 'RubberMan', gender : 'm' },

  { id: 17, name: 'Dynama', gender : 'f' },

  { id: 18, name: 'Dr IQ', gender : 'm' },

  { id: 19, name: 'Magma', gender : 'm' },

  { id: 20, name: 'Tornado', gender : 'f' }

];

@Pipe({

  name: 'filterPipe'

})

export class FilterPipe implements PipeTransform {

  transform(check: any[], checked: any[]): any {

    return checked

            ? check.filter(gender =>  gender.heroes == checked) 

            : check;

  }

}

home.component.html

<div class="row">

<div class="col-xs-12">

<form class="form-inline">

    <div class="form-group">

        <input type="checkbox" id="checkbox11" [(ngModel)]="checked"  [ngModelOptions]="{standalone: true}" name="gender" value="m">

        <label for="checkbox11">1</label>

    </div>

    <div class="form-group">

        <input type="checkbox" id="checkbox22" checked="checked">

        <label for="checkbox22">2</label>

    </div>

    <div class="form-group">

        <input type="checkbox" id="checkbox33" checked="checked">

        <label for="checkbox33">3</label>

    </div>

</form>

<h1>{{title}}</h1>

    <h2>My Heroes</h2>

    <ul class="heroes">

      <li *ngFor="let hero of (heroes | filterPipe: checked)"

        [class.selected]="hero === selectedHero"

        (click)="onSelect(hero)">

        {{hero.id}} - {{hero.name}} - {{ hero.gender }}

      </li>

    </ul>

    <div *ngIf="selectedHero">

      <h2>{{selectedHero.name}} details!</h2>

      <div><label>id: </label>{{selectedHero.id}}</div>

      <div>

        <label>name: </label>

        <input [(ngModel)]="selectedHero.name" placeholder="name">

      </div>

    </div>

</div>

</div>

Thx for help 

Stefan

[Sander Elias]

Hi Stefan,

I created a sample for you on plnk. You were already very close, just missing a few things.

Regards

Sander

[Stef]

Hello Sander,

thx for your help :-) Do you have an example with multiple checkboxes, so that we a have a third gender r => for robot :-))) 

Or do i have to create multiple Pipes for this?

Rgds

Stefan

[Sander Elias]

Hi Stefan,

Just at it to the radio-buttons and it will work. it has 3 options now, but you can as many as you please.

Regards

Sander

[Stef]

Hi Sander,

i tried this, but it won't work for me:

const HEROES: Hero[] = [

  { id: 11, name: 'Mr. Nice', gender : 'm' },

  { id: 12, name: 'Narco', gender : 'f' },

  { id: 13, name: 'Bombasto', gender : 'm' },

  { id: 14, name: 'Celeritas', gender : 'f' },

  { id: 15, name: 'Magneta', gender : 'm' },

  { id: 16, name: 'RubberMan', gender : 'm' },

  { id: 17, name: 'Dynama', gender : 'f' },

  { id: 18, name: 'Dr IQ', gender : 'm' },

  { id: 19, name: 'Magma', gender : 'r' },

  { id: 20, name: 'Tornado', gender : 'r' }

];

<input type="radio" [(ngModel)]="sex"  name="sex" value="m">Male<br>

<input type="radio" [(ngModel)]="sex"  name="sex" value="f">Female<br>

<input type="checkbox" [(ngModel)]="sex"  name="sex" [value]='null' >Don't care<br>

<input type="checkbox" [(ngModel)]="sex"  name="sex" value="r">Robots<br>

Now the radio button Male, the checkboxes Don't care and Robots are checked, i get this list:

• 11 - Mr. Nice - m
• 13 - Bombasto - m
• 15 - Magneta - m
• 16 - RubberMan - m
• 18 - Dr IQ - m

I can't check only 1 checkbox, always 2 or 3 are checked.

Rgds

Stefan

[Stef]

Hello Sander, 

i found a solution :-)

https://plnkr.co/edit/EQR9DHZQY9e1ItRcKL5s?p=preview

This is exactly what i need. Thank you so much for your time.

Bye

Stefan

Am Montag, 16. Oktober 2017 07:46:19 UTC+2 schrieb Sander Elias: