Service for Component Communication in Angular

Welcome to this comprehensive guide on Service for Component Communication in Angular! In this tutorial, we'll dive deep into creating a shared service to communicate between components. By the end of this lesson, you'll have a solid understanding of how to build scalable Angular applications. 🎯

What is a Service?

A Service in Angular is a class that provides a common functionality which can be easily shared across your application. Services can be injected into components, directives, pipes, and other services. They help in maintaining a separation of concerns and make your application more modular. 📝

Creating a Shared Service

Let's start by creating a shared service called DataService.

bash

ng generate service data

Now, open src/app/data.service.ts and update the contents as follows:

typescript

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data = { name: '', age: 0 };

  constructor() { }

  setData(name: string, age: number) {
    this.data = { name, age };
  }

  getData(): object {
    return this.data;
  }
}

In the DataService, we have a private property data and two methods: setData and getData. The service can now be used to share data between components. 💡

Using the Shared Service

Let's create two components: ChildComponent and ParentComponent.

bash

ng generate component child
ng generate component parent

Open src/app/child/child.component.ts and update the contents as follows:

typescript

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  data: object;

  constructor(private dataService: DataService) { }

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

In ChildComponent, we have injected the DataService and subscribed to the data in the ngOnInit life cycle hook.

Now, open src/app/parent/parent.component.ts and update the contents as follows:

typescript

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.setData('John Doe', 25);
  }
}

In ParentComponent, we have injected the DataService and set the data in the constructor.

Lastly, open src/app/child/child.component.html and update the contents as follows:

html

<p>
  Name: {{ data.name }}
</p>
<p>
  Age: {{ data.age }}
</p>

Now, when you run the application, you should see the name and age from the ParentComponent displayed in the ChildComponent. 💡

Quiz Time 🧠

Conclusion

In this tutorial, we learned how to create a shared service in Angular to communicate between components. You now have a solid foundation for building scalable applications with Angular. Keep exploring and building! 💡

That's all for now! If you're enjoying our tutorials, don't forget to subscribe to CodeYourCraft for more content like this. Happy coding! 👋