How to use shared service in Angular4
Posted By : Rohit Goyal | 15-Dec-2017
INTRODUCTION:-
In Angular there is rootscope for whole application and all other scopes are descendant scopes of the root scope.Scope works a intermediator between model & view.
Scope is watching changes in model.But every controllers has its own scope.If you want a scope that you can use throughout whole application.Then you can
use rootscope.Angular 1 has a service named rootscope. But in angular 2/4 you have to create a shared service that works similarly as rootscope.Just follow below mention steps.
Step.1 - Create a shared service
import {OnInit} from '@angular/core';
import {Injectable} from '@angular/core';
@Injectable()
export class sharedService{
roleArray:any=[];
selectedWL:string;
assignRoles(){
var roleObj = {
'US_ADMIN':false,
'SUPER_ADMIN':false,
'VIEW_USER_ADMIN':false,
'VIEW_EXCHANEMGMT_ADMIN':false,
'VIEW_WITHDRAWDEPOSIT_REQ_ADMIN':false,
'VIEW_REPORTS_ADMIN':false,
'VIEW_WALLETMGMT_ADMIN':false,
'VIEW_EXNHNGWALLET_ADMIN':false,
'VIEW_SYSTEMMSG_ADMIN':false,
'VIEW_SUPPORT_ADMIN':false,
'EDIT_EXCHANEMGMT_ADMIN':false,
'EDIT_WITHDRAWDEPOSIT_REQ_ADMIN':false,
'EDIT_REPORTS_ADMIN':false,
'EDIT_WALLETMGMT_ADMIN':false,
'EDIT_EXNHNGWALLET_ADMIN':false,
'EDIT_SYSTEMMSG_ADMIN':false,
'EDIT_SUPPORT_ADMIN':false,
'EDIT_USER_ADMIN':false,
'SUPPORT_ASSIGN_TICKET':false,
'SUPPORT_RESOLVE_TICKET':false,
'EARNING':false
}
var currentUserData = JSON.parse(localStorage.getItem('currentUser'));
this.roleArray = currentUserData.role;
for(let i=0; i<this.roleArray.length; i++){
if(this.roleArray[i] == 'VIEW_REPORTS_ADMIN'){roleObj.VIEW_REPORTS_ADMIN = true}
else if(this.roleArray[i] == 'VIEW_WITHDRAWDEPOSIT_REQ_ADMIN'){roleObj.VIEW_WITHDRAWDEPOSIT_REQ_ADMIN = true}
else if(this.roleArray[i] == 'VIEW_SYSTEMMSG_ADMIN'){roleObj.VIEW_SYSTEMMSG_ADMIN = true}
else if(this.roleArray[i] == 'VIEW_EXCHANEMGMT_ADMIN'){roleObj.VIEW_EXCHANEMGMT_ADMIN = true}
else if(this.roleArray[i] == 'VIEW_USER_ADMIN'){roleObj.VIEW_USER_ADMIN = true}
else if(this.roleArray[i] == 'VIEW_WALLETMGMT_ADMIN'){roleObj.VIEW_WALLETMGMT_ADMIN = true}
else if(this.roleArray[i] == 'VIEW_EXNHNGWALLET_ADMIN'){roleObj.VIEW_EXNHNGWALLET_ADMIN = true}
else if(this.roleArray[i] == 'VIEW_SUPPORT_ADMIN'){roleObj.VIEW_SUPPORT_ADMIN = true}
else if(this.roleArray[i] == 'EDIT_REPORTS_ADMIN'){roleObj.EDIT_REPORTS_ADMIN = true}
else if(this.roleArray[i] == 'EDIT_WITHDRAWDEPOSIT_REQ_ADMIN'){roleObj.EDIT_WITHDRAWDEPOSIT_REQ_ADMIN = true}
else if(this.roleArray[i] == 'EDIT_SYSTEMMSG_ADMIN'){roleObj.EDIT_SYSTEMMSG_ADMIN = true}
else if(this.roleArray[i] == 'EDIT_EXCHANEMGMT_ADMIN'){roleObj.EDIT_EXCHANEMGMT_ADMIN = true}
else if(this.roleArray[i] == 'EDIT_USER_ADMIN'){roleObj.EDIT_USER_ADMIN = true}
else if(this.roleArray[i] == 'EDIT_WALLETMGMT_ADMIN'){roleObj.EDIT_WALLETMGMT_ADMIN = true}
else if(this.roleArray[i] == 'EDIT_EXNHNGWALLET_ADMIN'){roleObj.EDIT_EXNHNGWALLET_ADMIN = true}
else if(this.roleArray[i] == 'EDIT_SUPPORT_ADMIN'){roleObj.EDIT_SUPPORT_ADMIN = true}
else if(this.roleArray[i] == 'SUPPORT_ASSIGN_TICKET'){roleObj.SUPPORT_ASSIGN_TICKET = true}
else if(this.roleArray[i] == 'SUPPORT_RESOLVE_TICKET'){roleObj.SUPPORT_RESOLVE_TICKET = true}
else if(this.roleArray[i] == 'EARNING'){roleObj.EARNING = true}
else if(this.roleArray[i] == 'US_ADMIN'){roleObj.US_ADMIN = true}
else {roleObj.SUPER_ADMIN = true}
}
return roleObj;
}
}
In this we are creating a class sharedService. We are fetching all roles from the localstorage.Then what are the roles we find we have assigning it a true value inside roleObj. In the end we are returing the completed roleObj. So that every component can use this service and assignRoles().It return object will roleObj consisting of all roles.
Step.2 - Use service and fetch the data inside component
import { Component, OnInit } from '@angular/core';
import { Router} from '@angular/router';
import { sharedService } from '../services/shared.service';
import { SocketService } from '../services/socket.service';
@Component({
selector: 'app-dashboard',
template: require('./full-layout.component.html'),
styles: [require('./full-layout.component.css')],
})
export class FullLayoutComponent implements OnInit{
private data:any = {};
constructor(private router: Router, private socketService : SocketService, private sharedService:sharedService) { }
private roleObj:any= {}
ngOnInit(){
this.roleObj = this.sharedService.assignRoles();
}
}
Import Shared service inside the component.Now using the method inside the service you have to fetch roleObj.You can call the sharedService method inside the ngOnInit() function.In this function returning a roleObj, that you can take this inside a variable.Now you have the data inside in your component.That you can display inside your view.
In similar way, you can use use the sharedService inside any component & fetch the returing output and used inside your view.
That's it.
I found this solution as a good alternative of rootScope.You can use this inside your angular 2/4 application.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rohit Goyal
Rohit is an experienced Frontend Developer, having good experience in HTML5, CSS3, Bootstrap, Jquery, AngularJS, Angular4/5, Restful API Integration, ES6 . His hobbies are playing cards and cricket.