SERVICES:

1.Sharing data:::

#service1service
@Injectable({
providedIn: 'root'
})
export class Service1Service {
//data
emp:object={no:100,name:"sowmi"}

// method
readData():object
{
return this.emp
}
}

#first component.ts

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

import { Service1Service } from '../service1.service';

@Component({
selector: 'app-contactus',
templateUrl: './contactus.component.html',
styleUrls: ['./contactus.component.css']
})
export class ContactusComponent implements OnInit {
empData:object={};
constructor(public obj:Service1Service)
{}
ngOnInit() {
this.empData=this.obj.readData();
}
}

#first component.html::

<h4>Emp data</h4>

<ul>
<li>{{empData.no}}</li>
<li>{{empData.name}}</li>
</ul>
2.Exchange data

#contactus.component.ts(component 1)

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

import { Service1Service } from '../service1.service';

@Component({
selector: 'app-contactus',
templateUrl: './contactus.component.html',
styleUrls: ['./contactus.component.css']
})
export class ContactusComponent implements OnInit {
a:any=10;
constructor(public s:Service1Service)
{}
ngOnInit() {
}
sendData()
{
this.s.b=this.a;
}
}

#contactus.component.html

<button (click)="sendData()">click</button>

##services.ts

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

@Injectable({

providedIn: 'root'
})
export class Service1Service {
//data

b:any;
// method
method(){
return this.b;
}
}
#technologies.component.ts()

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

import { Service1Service } from '../service1.service';

@Component({
selector: 'app-technologies',
templateUrl: './technologies.component.html',
styleUrls: ['./technologies.component.css']
})
export class TechnologiesComponent implements OnInit {
c:any;
constructor(private s:Service1Service) { }

receiveData(){
}
ngOnInit() {
this.c=this.s.method();
}

#technologies.components.html

<a class="nav-link" routerLink="angular">angular</a>

<a class="nav-link" routerLink="nodejs">nodejs</a>
<div>
<router-outlet></router-outlet>
</div>
<p>{{c}}</p>

output: