Angular 2+: Passing data between components (Quick Note)
Hi devs, This is a quick note to guide you how to pass data between components. There are 2 main ways of doing this: 1. Passing data from Parent to Child 2. Passing data from Child to Parent 1. Passing data from Parent to Child - using @Input() 1.1. Add variable to child component to retrieve value child.component.html < p > Value from parent: {{parentValue}} </ p > child.component.ts parentValue: string; @Input() set valueFromParent(value: any){ this .parentValue = value; }; 1.2. Pass value from parent to child parent.component.html < app-child [ valueFromParent ]= "parentValue" ></ app-child > parent.component.ts export class ParentComponent implements OnInit { parentValue: string = "sss" ; constructor () { } ngOnInit() { } } 2. Passing data from Child to Parent - using @Output() and EventEmitter 2.1. child.component.ts @Output() valueForParent = new EventEmitter<string>();