Set selected value in angular dropdown doesn't work

Question

I have a droprdown to filter a list, in which I manage to recover the filter options dynamically but I don't know how to make it filter the list and show only those of the selected option.

Here my html:

  <div class="dropdown">
    <select-dropdown *ngIf="distinctYear" wrapperClass="input-mid" label="Filter by date" (eClickAction)="this.setDateSelected($event)" [options]="distinctYear"></select-dropdown>
  </div>

here my ts:

public distinctYear = [];

   getDistinctYear(bills) {
    if (bills) {     
      for (const bill of bills) {
        if (this.distinctYear.filter(value => {
          return value.value === bill['billing_at'].split('-')[0];
        }).length === 0) {
          this.distinctYear.push({title: bill['billing_at'].split('-')[0], value:  bill['billing_at'].split('-')[0]});
        }
      }
      this.distinctYear.push({title: 'All your bills', value: 'all'});
      return Array.from(new Set(this.distinctYear));
    }
  }

  setDateSelected(singleDate: any) {
    singleDate = singleDate;
    this.dateSelected.emit(singleDate);
    if (singleDate !== undefined && singleDate !== null) {
      this.bills.forEach((item: { disabled: boolean; billing_at: any; }) => {
        item.disabled = item.disabled !== singleDate;
      });
    if (singleDate === 'all') {
      this.bills.forEach((item: { disabled: boolean; billing_at: any; }) => {
        item.disabled = item.billing_at === singleDate;
      });
    }
    }
  }

there's a 3rd component as a select-dropdown component:

import { Component, EventEmitter, Input, OnInit, Output, HostBinding, HostListener } from '@angular/core';

@Component({
  selector: 'select-dropdown',
  templateUrl: './select-dropdown.component.html',
  styleUrls: ['./select-dropdown.component.scss']
})
export class SelectDropdownComponent implements OnInit {

  @Input() label = '';
  @Input() wrapperClass: string;
  @Input() options: any;
  @Input() defaultValue = null;
  @Input() search = false;
  @Input() extendSearchIn = [];
  @Input() stateSelected ;
  @Input() dateSelected ;
  @Input() resetConventions;
  @Output() output = new EventEmitter<string>();
  @Output() eClickAction = new EventEmitter<string>();


  private defaultValueStored = null;
  public toggle: boolean;
  public title: string;
  public disabled: boolean;
  private disabledString = 'disabled';
  private selectedObj: any;
  private _data = [];
  private classes: string[];

  @HostBinding('attr.tabindex') tabindex = '0';
  convention: any;

  @HostListener('blur', ['$event']) onBlur(e) {

    if (e.relatedTarget === null) {
      this.toggle = false;
      if (this.search) { this.changeSearch(''); }
    }

  }


  @Input()
  set data(value) {
    this._data = value;
    if (this._data !== undefined) {
      if (this.defaultValueStored !== null && this.defaultValueStored !== undefined && (this.defaultValueStored === this.defaultValue)) {
      //  this.setDefault();
      } else {
        this.resetControl();
      }
      this.setDisabledClass();
    }
  }

  get data() {
    return this._data;
  }


  constructor() {
    this.toggle = false;
    this.title = '';
  }

  ngOnInit() {

  }

  clickAction(option) {
    if ( option.value !== this.selectedObj) {
      this.selectedObj = option.value;
    }
      this.title = option.title;
      this.eClickAction.emit(option.value);
    }




  toggleSelect(e) {
    if (this.disabled || e.target.className === 'search') { return; }
    this.toggle = !this.toggle;
    if (this.search && !this.toggle) { this.changeSearch(''); }
  }


  resetControl() {
    this.clickAction({
      title: '',
      value: null
    });
  }

  setDisabledClass() {

    if (this.classes === undefined) { return; }
    if (this.data !== undefined && this.data.length) {

      this.disabled = false;
      this.classes = this.classes.filter(function(e) { return e !== this.disabledString; }, this);
    } else {
      this.disabled = true;
      this.classes.push(this.disabledString);
    }

    this.wrapperClass = this.classes.join(' ');
    this.toggle = false;

    if (this.defaultValueStored === null) {
      this.resetControl();
    }

  }

//   setDefault() {

//     if (
//           this.defaultValueStored === null ||
//           this.defaultValueStored === undefined ||
//           this.defaultValueStored === '' ||
//           this.data === null ||
//           this.data === undefined
//     ) {
//       return;
//     }

//     if (!this.data.length) {
//       this.setSelected({
//         title: '',
//         value: null
//       });
//       return;
//     }

//   const selected = this.data.find(item => {
//     return item.value === this.defaultValueStored || item.title === this.defaultValueStored;
//   });

//   this.setSelected({
//     title: (selected !== undefined) ? selected.title : '',
//     value: (selected !== undefined) ? selected.value : null
//   });

// }

  changeSearch(searchTerm: string) {

    this.data.forEach(item => {
      item.show = false;
      this.extendSearchIn.forEach(prop => {
        item.show = item.show || this.searchByProperty(item, prop, searchTerm);
      });
    });

  }

  searchByProperty(item: object, property: string, searchTerm: string) {
    return (<String>item[property].toLowerCase()).startsWith(searchTerm.toLowerCase());
  }
}

I manage to show all the filtering options in the combo. And doing checks in the console, it sets the selected value but it doesn't filter in the list. if anyone can give me a hand. Thanks in advance.

Answer 1

What is the 'select-dropdown' selector referring to here? Is it a 3rd party component or your own custom component? Would be able to advise better if that were clear.

Regardless, generally it's the options in a dropdown themselves that you could apply an *ngIf directive to, but your html doesn't enumerate those options. With the syntax you've given, you're basically applying a condition to the entire control.

If you have your own custom component, you could add the *ngIf to the options within that control.

Another approach would be to filter options in the component.ts and pass those filtered options to the component (i.e. no need for *ngIf directive)