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,

<!-- Wrapper component containing 2 post data component -->
<!-- With Out @input() -->
<app-post-from></app-post-from>
<app-post-tags></app-post-tags>

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.

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>