Input Output and forwardRef use for Component Interaction

Component Interaction

This cookbook contains recipes for common component communication scenarios in which two or more components share information.

import { Component, OnInit, Inject, forwardRef } from '@angular/core';

`forwardRef`

import { AppComponent } from '/AppComponent.ts';

@Inject(forwardRef(() => AppComponent))

public _AppComponent: AppComponent)

Pass data from child to parent  with input binding

child =>

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

@Output() filterObj: EventEmitter<Object> = new EventEmitter<Object>();

this.filterObj.emit(filterObj);

parent =>

<app-user (filterData)="filterData($event)"></app-user>

filterData(filterObject) {

console.log('res>>', filterObject);

}

Pass data from parent to child with input binding

child =>

1. @Input() modelNmae: any;
2. @Input('master') masterName: string;
3. @Input() set filter(modelId) { this.getUserList(modelId) }
4. get filter() { return this.modelId}

parent =>

1. @Selector <app-user [filter]="filter"></app-user>