Hide/Show form field(s) on mat-checkbox check Angular

Question

I am trying to show and hide the search filter input field which is basically my form field with the check of a checkbox that is in my search filter button.

I am using *ngIf here to show and hide the field. It doesn't seem to work the issue is, it always returns the boolean value of the last checked checkbox from the dropdown filter. I'm not sure what am I doing wrong. I've got two arrays out of which one has all the available filter options and another one is where I'm pushing my filter when checked. I only want to display those input fields which are checked.

  hideFilter(param: any) {
    this.showTheseFilter.forEach((item: any, index) => {
      if (param == item) {
        this.hide = true;
      } else {
        this.hide = false;
      }
    });
    return this.hide;
  }

My stackblitz URL: https://stackblitz.com/edit/angular-zub6zk-axvvdk?file=src/app/table-basic-example.ts

Bembem · Accepted Answer · 2021-03-05 22:02:16Z

1

I fixed it here https://angular-zub6zk-rqler6.stackblitz.io

https://stackblitz.com/edit/angular-zub6zk-rqler6?file=src/main.ts

The issue was with the hideFilter function.

I suggest you use a pipe for the function which you can reuse when you need to. Sometime like

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
   name : 'arrIncludesItem'
})
export class ArrIncludesItemPipe implements PipeTransform {
   transform(array: any[], item: any) : boolean{
      if(!item || !array || !array.length) return false
      return array.includes(item);
   }
}

Then you can use it as

<element *ngIf="showTheseFilter: arrIncludesItem: 'filterByDateRange'"></element>

edited Mar 5, 2021 at 22:02

answered Mar 5, 2021 at 21:55

Bembem

2696 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Hide/Show form field(s) on mat-checkbox check Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related