How does one share data between components in Angular?

Question

Accepted Answer

there are several ways to share data between components, depending on their relationship (parent-child, sibling, or unrelated components). 1. Using Input & Output Decorators (Parent to Child & Child to Parent) Parent to Child (Using @Input) The parent component passes data to the child component using @Input. export class ChildComponent { @Input() data: string = ''; } Child to Parent (Using @Output and EventEmitter) The child component emits an event that the parent listens to. export class ChildComponent { @Output() dataEvent = new EventEmitter(); sendData() { this.dataEvent.emit('Hello Parent'); } } 2. Using a Shared Service (For Any Components) Useful for sharing data between unrelated or sibling components. Step 1: Create a Service typescript Copy Edit import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class DataService { private messageSource = new BehaviorSubject('Default Message'); currentMessage = this.messageSource.asObservable(); updateMessage(message: string) { this.messageSource.next(message); } } 3. Using Local Storage / Session Storage Stores data persistently across components. 4. Using a State Management Library (e.g., NgRx, Akita, Zustand) Suitable for large-scale applications.

Top OodlesTechnologies Front end Developer interview questions & answers

Popular interview questions of Front end Developer