Даем знать об изменении input дочернего компонента родителю посредством сеттера и геттера в Angular

Dec 27, 2018

Пробрасываем значение от дочернего компонента родителю по изменению значения в инпуте дочернего компонента при помощи сеттера и геттера.

    // родитель шаблон:
    <mh-criteria
        (valueChange)='onValueChange($event)'>
    </mh-criteria>

    // получаем значение от ребенка в компоненте элемента родителя
    onValueChange(value: string): void {
        this.performFilter(value);
    }


    // ребенок шаблон 
    <input type='text' #filterElement [(ngModel)]='listFilter' />


    // ребенок компонент (эмитим значение):
    @Output() valueChange: EventEmitter<string> =
          new EventEmitter<string>();

    @ViewChild('filterElement') filterElementRef: ElementRef;

    private _listFilter: string;
    get listFilter(): string {
        return this._listFilter;
    }


    set listFilter(value: string) {
    this._listFilter = value;
        this.valueChange.emit(value);
    }
Добавить комментарий