How to share data between components in Angular? What are the different ways?

1) Input/Output Binding:

One way to share data between parent and child components is through input and output bindings. You can use the @Input() and @Output() decorators to define inputs and outputs on your components. The @Input() decorator allows you to pass data from a parent component to a child component, while the @Output() decorator allows you to emit events from a child component to a parent component.

For example, suppose you have a parent component called AppComponent and a child component called ChildComponent. To pass data from AppComponent to ChildComponent, you would define an input property in ChildComponent using the @Input() decorator:

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

@Component({
  selector: 'app-child',
  template: '<p>Child Component: {{data}}</p>'
})
export class ChildComponent {
  @Input() data: string;
}

Then, in the AppComponent template, you would use property binding to pass the data to ChildComponent:

<app-child [data]="parentData"></app-child>

2) Service:

Another way to share data between components is through a shared service. You can create a service with a property that holds the data, and then inject that service into any components that need to access the data.

For example, suppose you have a service called DataService that holds a value sharedData. To access sharedData from a component, you would inject DataService into the component's constructor and then access the sharedData property:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  sharedData: string;
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-child',
  template: '<p>Child Component: {{data}}</p>'
})
export class ChildComponent {
  data: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.sharedData;
  }
}

3) Local Storage:

You can also share data between components using browser's local storage or session storage. Local storage allows you to store key-value pairs in the user's browser, which can be accessed by any component in the application.

For example, to store data in local storage, you can use the localStorage.setItem() method:

localStorage.setItem('data', JSON.stringify(data));

And to retrieve the data from local storage in another component, you can use the localStorage.getItem() method:

const data = JSON.parse(localStorage.getItem('data'));

4) Route Parameters:

You can pass data between components using route parameters. Route parameters allow you to define dynamic segments in your URL, which can be used to pass data between components.

For example, you can define a route with a parameter in your app-routing.module.ts file:

const routes: Routes = [
  { path: 'users/:id', component: UserComponent }
];

Then, in the UserComponent, you can access the id parameter from the ActivatedRoute service:

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: '<p>User Component: {{id}}</p>'
})
export class UserComponent {
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
  }
}

5) ViewChild:

You can also share data between components using ViewChild. ViewChild allows a parent component to access the properties or methods of a child component.

For example, suppose you have a child component called ChildComponent with a public property called childData. To access childData from the child component, you can use ViewChild:

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <p>Parent Component: {{childData}}</p>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent, { static: false }) child: ChildComponent;
  childData: string;

  ngAfterViewInit() {
    this.childData = this.child.childData;
  }
}

6) RxJS:

Another way to share data between components is to use Reactive Extensions for JavaScript (RxJS). RxJS is a library for reactive programming that provides an easy way to manage and share data streams.

For example, you can create a service that uses RxJS to provide a stream of data:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private dataSubject = new Subject<string>();
  data$ = this.dataSubject.asObservable();

  setData(data: string) {
    this.dataSubject.next(data);
  }
}

In this example, the DataService has a private dataSubject that is a Subject from RxJS. The data$ property is an observable that emits the values from the dataSubject. The setData() method allows you to push new data into the dataSubject.

Then, in a component that needs to access the data, you can subscribe to the data$ observable:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-child',
  template: '<p>Child Component: {{data}}</p>'
})
export class ChildComponent {
  data: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.data$.subscribe(data => this.data = data);
  }
}

In this example, the ChildComponent injects the DataService and subscribes to the data$ observable. Whenever new data is pushed into the dataSubject, the data$ observable emits the new value, and the ChildComponent updates the data property with the new value.

These are some of the ways you can share data between components in Angular. The best approach depends on the specific requirements of your application.

7) ngRx:

Another option to manage state in Angular is to use ngRx, a state management library based on the Redux architecture. ngRx provides a way to manage the state of your application in a centralized store, and allows you to easily share state between components.

Using ngRx, you can define actions that describe how the state should change, reducers that handle the actions and update the state, and selectors that provide access to the state from the components.

For example, you can define an action to update the user information:

import { createAction, props } from '@ngrx/store';

export const updateUser = createAction(
  '[User] Update User',
  props<{ id: number, name: string }>()
);

Then, you can define a reducer that handles the action:

import { createReducer, on } from '@ngrx/store';
import { updateUser } from './user.actions';

export interface UserState {
  id: number;
  name: string;
}

const initialState: UserState = {
  id: null,
  name: null
};

export const userReducer = createReducer(
  initialState,
  on(updateUser, (state, { id, name }) => ({ ...state, id, name }))
);

In this example, the userReducer function handles the updateUser action by updating the id and name properties in the state.

Then, you can define a selector that provides access to the user information:

import { createSelector } from '@ngrx/store';
import { UserState } from './user.reducer';

export const selectUser = (state: { user: UserState }) => state.user;
export const selectUserName = createSelector(
  selectUser,
  user => user.name
);

In this example, the selectUser selector provides access to the entire user state, while the selectUserName selector provides access to just the user name.

Finally, you can use the selectUserName selector in a component:

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { selectUserName } from './user.selectors';

@Component({
  selector: 'app-user',
  template: '<p>User Component: {{userName$ | async}}</p>'
})
export class UserComponent {
  userName$ = this.store.pipe(select(selectUserName));

  constructor(private store: Store) {}
}

In this example, the UserComponent injects the Store and uses the selectUserName selector to get the user name. The async pipe subscribes to the userName$ observable and automatically updates the view when the value changes.

These are some of the ways you can manage state and share data between components in Angular. The best approach depends on the complexity of your application and the specific requirements of your use case.