Share data between angular components using service

Share data between angular components using service

Share data between angular components using service - This approach is ideal when you want to share data changes that occur on things like button clicks, form entires, and other user events...

Today I am going to show you the data sharing between angular components using services. As I have already shared demo on data sharing using input decorator and data sharing using output decorator. So if you want you can navigate to these sections to see the demo.

In the demo, I will take an example of cart system in any e-commerce site. In any e-commerce site there is a cart which user manipulates as per his preference to buy the items from the site. And if you see the value in cart show on every navigated page same, Means data is sharing there thought the multiple components.

Let's Get Started.

Step 1: Create Angular App and Cart Service

create an Angular app with Angular CLI. and create a service named CartService and put below code inside that file:

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

@Injectable()
export class CartService {

constructor() { }

public count = 0;
addToCart() {
this.count = this.count+1;
return this.count;
}

clearCart() {
return this.count = 0;
}

getCart(){
return this.count;
}
}

In the above service file, have created a public variable named count and 3 different methods to update the variable.

Step 2: Create component for product listing

open ts file of the product component and put below code

import { Component, OnDestroy,OnInit } from '@angular/core';

import { CartService } from '../cart.service';

@Component({
selector: 'app-home',
templateUrl: './product.component.html'
})
export class ProductComponent implements OnInit {
cart: any;
public fileUrl;
constructor(private cartService: CartService) {}

ngOnInit(){
this.getCart();

}
getCart(): void {
this.cart = this.cartService.getCart();
}

addToCart(): void {
this.cart = this.cartService.addToCart();
}

emptyCart(): void {
// clear message
this.cartService.clearCart();
}

}

In the above file, we have imported service and have methods to update the value in cart service.

now update product.component.html

<div class="text-center">
<a routerLink="">Product</a>&nbsp;|&nbsp;
<a routerLink="cart-detail">cart detail</a>
<p>Cart count</p><span *ngIf="cart && cart.text">{{cart.text}}</span>
<!-- main app container -->
<h2>This is produst listing page...</h2>
<p>Cart count:{{cart}}</p>
<button (click)="addToCart()" class="btn btn-primary">Add Product in cart</button>
<button (click)="emptyCart()" class="btn btn-secondary">Empty Cart</button>

</div>

In the above file we have shown the cart value and below we have two button to increase the cart value and make it empty.

Step 3: Create a Cart detail component

After creating a new component from the command line open the cart-detail.component.ts and put the below code:

import { Component, OnDestroy,OnInit } from '@angular/core';

import { CartService } from '../cart.service';

@Component({
selector: 'app-home',
templateUrl: './product.component.html'
})
export class ProductComponent implements OnInit {
cart: any;
public fileUrl;
constructor(private cartService: CartService) {}

ngOnInit(){
this.getCart();

}
getCart(): void {
this.cart = this.cartService.getCart();
}

addToCart(): void {
this.cart = this.cartService.addToCart();
}

emptyCart(): void {
this.cartService.clearCart();
}

}

Same like product ts file we have called service methods from cart detail component also. Now update HTML file of cart detail component.

<div class="text-center">
<a routerLink="">Product</a>&nbsp;|&nbsp;
<a routerLink="cart-detail">cart detail</a>
<p>Cart count</p><span *ngIf="cart && cart.text">{{cart.text}}</span>
<!-- main app container -->
<h2>This is produst listing page...</h2>
<p>Cart count:{{cart}}</p>
<button (click)="addToCart()" class="btn btn-primary">Add Product in cart</button>
<button (click)="emptyCart()" class="btn btn-secondary">Empty Cart</button>


</div>

Now our component and service part is done.

Step 4: Update routing file

Make sure you have below routings in route file:

const routes: Routes = [{
path: '', component: ProductComponent
},
{
path:'cart-detail',component:CartDetailComponent
}
];

Also update app.component.html file inside app folder and remove all other code except .

Step 5: Run the app

After completing all the needed task now run the app with NPM start and check the app over the browser. You would see like below:

Conclusion

In this demo, we learn about the data sharing between angular components using services. You can find other demos at Angular sample projects

That’s all for now. Thank you for reading and I hope this post will be very helpful for data sharing between angular components using service.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Use Cookies in Angular for Storing user’s Credentials

In this post, I will be explaining about using Cookies in Angular for Storing user’s Credentials

Angular Tutorial - Learn Angular from Scratch

Angular Tutorial - Learn Angular from Scratch: This course is for beginners who are curious on how to get started with Angular. In this course you will learn how to download, install and play around with Angular. We teach you the main components of Angular, so that you can get up and running with it asap. You will learn now to start building applications with Angular.

An Angular Roadmap — The Past, Present, and Future of Angular

✅Interested in being an Angular developer in 2019? ... blog post it's most likely that you've written some code in javaScript in the past.