Currently, I am attempting to transmit data using @Output & EventEmitter and @ViewChild & AfterViewInit from a child component to a parent component.
Below is the code from my parent component .html file:
<app-child (filterEvent)=" getValuesFromFilters($event)" [name]="name"></app-child>
Here is the code from my parent component .ts file:
name = 'View';
@ViewChild(ChildComponent) child: ChildComponent;
getValuesFromFilters($event) {
this.criteria = $event;
console.log(this.criteria);
this.apply();
}
Now, let's take a look at the ChildComponent .html file:
<button (click)="applyValues()" mat-raised-button>
Apply
</button>
And the ChildComponent .ts file:
export class ChildComponent implements OnInit {
@Output() filterEvent = new EventEmitter < any > ();
@Input() name: string;
ngOnInit() {
console.log(this.name);
}
applyValues() {
this.filterEvent.emit(this.filterValues);
console.log(this.filterValues);
}
}
When I click the apply button in the child component, the values are successfully transmitted from child to parent. However, I am facing an issue where I want to retrieve the values from the child component to the parent component when the parent component loads initially. I attempted to use @ViewChild in the parent component, but it resulted in the following error:
TS2554: Expected 2 arguments, but got 1. core.d.ts(8070, 47): An argument for 'opts' was not provided.