Clash Royale CLAN TAG#URR8PPP

Angular:- value defined in one component use it in another component using services

I created service to share data between two components, I read documentation and checked few articles but couldn't understand it properly and stuck.

I created the stackblitz to learn as a sample for data sharing. Here's the link
stackblitz

So below is my code
footer.component.ts

//trying to set value here
test()
let height:any;
this.footerHeightService.setFooterHeight(height)
height = document.getElementById("footer").offsetTop;



footer-height.service.ts

import Injectable from '@angular/core';


@Injectable()
export class FooterHeightService


footerOffset:any;
constructor()

setFooterHeight(height)
this.footerOffset = height;


getFooterHeight(height)
return this.footerOffset;





app.component.ts

//trying to get value here
constructor(private footerHeightService:FooterHeightService)

test()
let height:any;
this.footerHeightService.getFooterHeight(height);
console.log("this.footerHeightService.getFooterHeight(height);", height);



ngOnInit():void
this.test();



input

output

input

output

1 Answer
1

First You need to create a service

import Injectable from '@angular/core';

@Injectable()
export class SharedService

constructor()
dataShared: any

setFooterData(data)
this.dataShared = data

getFooterData()
return this.dataShared





And in your component footer, you will send the data to the service by calling its method set

constructor(
...
private sharedService: SharedServiceService
)

componentMethod()
this.sharedService.setFooterData(data)



And in the component app, you will get the data by calling the get method

constructor(
...
private sharedService: SharedServiceService
)

componentMethod()
this.sharedService.getFooterData()



live code

test

height

height = document.getElementById("footer").offsetTop; this.footerHeightService.setFooterHeight(height)

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.