@viewchild无法从子组件获取输入元素值

Question

I am using parent and child component. In child component I use search box. I need to get search box value at any time on demand. How to get this?

Child Component html - GridViewComponent

<input id="successFilter" name='filterInput' type="text" (keyup)="searchSuccess($event)">

Parent Component ts

@ViewChild(GridviewComponent) grdView: GridviewComponent;

wrote above line before constructor

this.grdView.filterInput.subscribe(data => {
  console.log(data);
});

am unable to get input value on demand

Answer 1

GridView html

<input id="successFilter" name='filterInput' [(ngModel)]="filterInput" type="text" (keyup)="searchSuccess($event)">

GridView typescript

import { Output, OnInit } from '@angular/core';

@Component({
  selector: 'app-gridView',
  templateUrl: './gridView.component.html',
  styleUrls: ['./gridView.component.scss']
})
export class GridViewComponent implements OnInit {
  @Output() sendValue = new EventEmitter<string>();
   filterInput = '';

   constructor(){}

   ngOnInit() {}

  getValue() {
      this.sendValue.emit(this.filterInput);
  }
}

ParentComponent typescript, call getChildValue() whenever you need to get the value

@ViewChild('gridView') grdView;

getChildValue() {
   this.grdView.getValue();
}

receivedValue(theValue: string) {
   //this is where you actually get theValue
}

ParentComponent html

<app-gridView #gridView (sendValue)="receivedValue($event)"></app-gridView>