Desktop to Web: Passing Data Between Angular Components

Passing data between Angular components can be achieved using both the @Input and @Output decorators.

To pass data to a child component, create a property on the child component and apply the @Input attribute to that property.

@Input() childProperty: string;

Then simply create a property binding from the parent component to the property you defined on the child component.

To pass data from the child component back up to the parent, define an EventEmitter and apply the @Output decorator to it.

@Output() notify: EventEmitter[string] = new EventEmitter[string]();

Then in the parent, provide an event handler using the $event argument for the event emitter on the child component:

(notify)=”onNotified($event)”