Angular Tutorial: Sibling Communication via Service 🎯

Welcome back to CodeYourCraft! Today, we're diving into a fascinating aspect of Angular: Sibling Communication via Service. This tutorial is designed to help both beginners and intermediates understand this concept with ease. Let's get started!

Understanding Sibling Communication 📝

In Angular, sibling components can't directly communicate with each other. But, we can create a service to facilitate this communication. Let's explore how!

Creating Our First Service 💡

First, let's create a service. In your Angular project, navigate to src > app > services and create a new file named shared.service.ts. Replace the content with the following:

typescript

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

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

  constructor() {
    this.sharedData = 'Initial Data';
  }

  setData(data: string) {
    this.sharedData = data;
  }

  getData(): string {
    return this.sharedData;
  }
}

Here, we've created a simple service called SharedService with a sharedData property and two methods: setData and getData.

Sharing Data Between Components 💡

Now, let's use this service to share data between two components. We'll create two components: ComponentA and ComponentB.

ComponentA 💡

Create a new directory componentA under src > app > components, and create a new component componentA.component.ts with the following content:

typescript

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../services/shared.service';

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html',
  styleUrls: ['./component-a.component.scss'],
  providers: [SharedService]
})
export class ComponentAComponent implements OnInit {

  constructor(private sharedService: SharedService) { }

  ngOnInit(): void {
    this.sharedService.setData('Hello from ComponentA!');
  }
}

Here, we've injected our SharedService and set the shared data in the ngOnInit lifecycle hook.

ComponentB 💡

Next, create a new directory componentB under src > app > components, and create a new component componentB.component.ts with the following content:

typescript

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../services/shared.service';

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html',
  styleUrls: ['./component-b.component.scss']
})
export class ComponentBComponent implements OnInit {

  sharedData: string;
  constructor(private sharedService: SharedService) {
    this.sharedService.getData().subscribe(data => this.sharedData = data);
  }

  ngOnInit(): void {
  }
}

In this component, we've injected the SharedService and subscribed to the getData observable to get the shared data.

Component Templates 💡

Finally, create the HTML templates for both components. In src > app > components > componentA > component-a.component.html, add:

html

<p>
  Component A: {{ sharedService.getData() }}
</p>

And in src > app > components > componentB > component-b.component.html, add:

html

<p>
  Component B: {{ sharedData }}
</p>

Testing Our Setup 💡

Now that our setup is complete, let's see it in action. Run your Angular application and open it in a browser. You should see the shared data displayed in both components.

Quiz 📝

That's it for today! In the next tutorial, we'll dive deeper into Angular services and explore more advanced concepts. Until then, happy coding! 🚀