How does one share data between components in Angular?

Question

Accepted Answer

Data can be shared between components in Angular using services, input/output properties, and observables.

Use services to create a shared data service that can be injected into multiple components
Use input/output properties to pass data from parent to child components
Use observables to create a data stream that can be subscribed to by multiple components

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