Contents hide 1) Module Structure 2) Data Service For Angular Components 3) Shared Data Service 4) Use Data In Other Components 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. Demo Module Structure Letβs first create the module components and service files. File Structure // 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. Note: The data.service should only be used if the data are used in a particular module itself. 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 update-post.component.html <!-- Wrapper component containing 2 post data component --> <!-- With Out @input() --> <app-post-from></app-post-from> <app-post-tags></app-post-tags> Note : 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 : update-post.component.ts 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; } ); } */ } Shared Data Service 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. ../services/data.service.ts 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. : ../services/data.service.ts 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 post-form.components.ts 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. post-from.component.html <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: post-tags.component.html <h5>TAGS: </h5> <ul> <li *ngFor="let tags of dataService.postData.tags"> {{tags.id}} : {{tags.name}}</li> </ul> Conclusion: 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. Find More Articles on Angular 2+. Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Angular, Angular 7, Angular CLI, injectable, shared Service