In this tutorial, we will see how to Maintain Data In Data Service For Angular Components (i.e multiple components). As we know it is the era of reusable of code for developers we make the reusable components and tries to optimize the data and the code. The same way we will maintain the data (i.e.: static data or might b the data from API response). Let’s get started with the module structure with services and components.
Module Structure
Let’s first create the module components and service files.
// Module
_
|-- Post
| |-- components
| |-- update-post
| |-- post-tags
| |-- post-form
|
|--services
|--data.service.ts
|--post.service.ts
Instead of using @input()
we will use the data.service.ts which will maintain the data for throughout the module components.
Data Service For Angular Components
First will create the multiple components for which we will use the data service as common data for all the components (i.e: without @input()
).
For this example, there will be three component,
- Update-post // – this will be the wapper component which will hold other two component
- post-tags // – contain tags of posts
- post-form // – contain content of the post
<!-- Wrapper component containing 2 post data component -->
<!-- With Out @input() -->
<app-post-from></app-post-from>
<app-post-tags></app-post-tags>
We can call an API in the wrapper component by creating another regular service file which will subscribe to the API data.
After subscribing the API the response data can be mapped to the data service.
As described below :
import { Component, OnInit } from '@angular/core';
import {DataService} from '../../services/data.service';
@Component({
selector: 'app-update-post',
templateUrl: './update-post.component.html',
styleUrls: [ './update-post.component.css' ]
})
export class UpdatePostComponent {
constructor(public dataService: DataService) {}
/*
@API FUNCTION CALL On INIT
ngOnInit(){
this.callApi();
}
@API Function
callApi(){
this.callSomeService().subscribe(
res => {
this.dataService.postData = res.data;
}
);
}
*/
}
As we have created the data service we can map the Data Service by mapping the response API data to the declared variable in the data service class.
export class DataService {
postData:any = {
post_title: 'Title Of the post',
post_content: `<p>^Is Html Content to be display on post page </p>`,
tags: [
{id:1, name: 'CSS'},
{id:2, name: 'HTML'},
{id:3, name: 'JavaScript'},
{id:4, name: 'TypeScript'},
{id:5, name: 'Angular'},
]
}
}
If your data is in different order we can create a function to map those response data
for E.g. :
export class DataService {
postData:any = {}
// Pass API response data to function
mapData(data){
return {
post_title: data.title,
post_content: data.content,
tags: data.tags
}
}
/*
And in component map function to class variable for E.g:
@ In update-post.component.ts In response
this.dataService.postData = this.dataService.mapData(res.data);
*/
}
Use Data In Other Components
In our other two components, we will inject Dataservice class and use its Data i.e.
- Post Content
- Post Tags
import { Component, OnInit } from '@angular/core';
import {DataService} from '../../services/data.service';
@Component({
selector: 'app-post-from',
templateUrl: './post-from.component.html',
styleUrls: ['./post-form.component.css']
})
export class PostFromComponent implements OnInit {
// inject Data Service as public so we can directly use in HTML
constructor(public dataService: DataService) { }
ngOnInit() {
}
}
After injecting the service we can use in HTML content to display the data.
<textarea>
{{dataService.postData.post_content}}
</textarea>
The same way we can inject data service in other component i.e. post-tags.component.ts and use data as mention below:
<h5>TAGS: </h5>
<ul>
<li *ngFor="let tags of dataService.postData.tags"> {{tags.id}} : {{tags.name}}</li>
</ul>
By using the data service we can save one API call if the same API call needs to be called in multiple components.
Without using
@input()
we can manage data from different components, which can make application a little bit faster.