CODEWITHSUNDEEP
angulartypescripteventemitter
Слава Мельников
Слава Мельников

Reputation: 75

Event Emitter Angular

The code below applies filters for the page, but filters start to work only when I click to close filter's panel. How can I apply them on the fly, without closing the panel itself?

import { Component, OnInit, ViewEncapsulation, Input, ElementRef, 
EventEmitter, Output } from '@angular/core';
import { MultiselectBaseModel } from '../app-models/MultiselectBaseModel';

@Component({
  selector: 'app-filter-multiselect',
  templateUrl: './filter-multiselect.component.html',
  styleUrls: ['./filter-multiselect.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class FilterMultiselectComponent implements OnInit {
  @Input() labelComponent: string;
  @Input() items: MultiselectBaseModel[];
  @Input() itemsSelected: MultiselectBaseModel[];
  @Output() closeMultiselectEventHandler: EventEmitter<any> = new 
EventEmitter();

  isOpen = false;

  constructor(public el: ElementRef) { }

  ngOnInit() { }

  handlePanelShow() {
    this.isOpen = true;
  }

  handlePanelHide() {
    this.isOpen = false;
    this.closeMultiselectEventHandler.emit(this.itemsSelected);
  }

  handleClickMultiSelect(event) {

  }
}

My HTML is here: 

<div class="filter-multiselect">
  <p-multiSelect [options]="items"
             [(ngModel)]="itemsSelected"                 
             styleClass="multiSelect"
             [defaultLabel]="labelComponent"
             (onPanelShow)="handlePanelShow()"
             (onPanelHide)="handlePanelHide()"
             panelStyleClass="panelStyleClassCustom"
             [ngClass]="isOpen ? 'multi-select-open' : '' "
             [maxSelectedLabels]="0">
    <ng-template let-element let-i="index" pTemplate="item">
      <div class="ui-multiselect-item-text">{{element.label}}</div>
    </ng-template>
  </p-multiSelect>
</div>

Upvotes: 0

Views: 1521

Answers (1)

Слава Мельников
Слава Мельников

Reputation: 75

Solved! I have added onChange as @webdevius suggested:

Added onChange to my panel's HTML

<div class="filter-multiselect">
  <p-multiSelect [options]="items"
                 [(ngModel)]="itemsSelected"
                 styleClass="multiSelect"
                 [defaultLabel]="labelComponent"
                 (onPanelShow)="handlePanelShow()"
                 (onPanelHide)="handlePanelHide()"
                 (onChange)="filtersApply()"
                 panelStyleClass="panelStyleClassCustom"
                 [ngClass]="isOpen ? 'multi-select-open' : '' "
    [maxSelectedLabels]="0">
    <ng-template let-element let-i="index" pTemplate="item">
      <div class="ui-multiselect-item-text">{{element.label}}</div>
    </ng-template>
  </p-multiSelect>
</div>

and emit when the filter is selected (now it doesn't depend whether the panel is open or not)

import { Component, OnInit, ViewEncapsulation, Input, ElementRef, EventEmitter, Output } from '@angular/core';
import { MultiselectBaseModel } from '../app-models/MultiselectBaseModel';

@Component({
  selector: 'app-filter-multiselect',
  templateUrl: './filter-multiselect.component.html',
  styleUrls: ['./filter-multiselect.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class FilterMultiselectComponent implements OnInit {
  @Input() labelComponent: string;
  @Input() items: MultiselectBaseModel[];
  @Input() itemsSelected: MultiselectBaseModel[];
  @Output() closeMultiselectEventHandler: EventEmitter<any> = new EventEmitter();

  isOpen = false;

  constructor(public el: ElementRef) { }

  ngOnInit() {}

  handlePanelShow() {
    this.isOpen = true;
  }

  handlePanelHide() {
    this.isOpen = false;
  }

  filtersApply() {
    this.closeMultiselectEventHandler.emit(this.itemsSelected);
  }

  handleClickMultiSelect(event) {

  }
}

Upvotes: 0

Related Questions