How to pass data from service to component in Angular 16

Angular is a popular framework for building web applications. One of the key features of Angular is the ability to pass data between different components. In this article, we will discuss how to pass data from a service to a component in Angular 16.

Create a service

The first step is to create a service that will be responsible for fetching the data and passing it to the component. You can create a new service using the following command:


ng generate service data


This will create a new file named data.service.ts in the app folder. Inside this file, you can define a method that will fetch the data from an API or any other source and return it to the component.

Inject the service into the component

Once the service is created, you need to inject it into the component where you want to use the data. You can do this by including the service in the constructor of the component class:


constructor(private DataService: DataService) {}


This will allow you to access the methods of the service within the component.

Retrieve the data in the component

After injecting the service into the component, you can call the method of the service to retrieve the data. For example, if the service has a method named getData, you can call it in the component like this:


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


In this example, the getData method of the service is called, and the data is retrieved using the subscribe method of the Observable. Once the data is retrieved, it is stored in a variable of the component for further use.

Display the data in the component template

Finally, you can display the data in the component template using interpolation. For example, if you want to display the data in a list, you can use the ngFor directive to loop through the data and display it:

This will display the data retrieved from the service in the component template.

Passing data from a service to a component in Angular 16 is a common task when building web applications. By following the steps outlined in this article, you can easily pass data from a service to a component and display it in the template.