Angular Service Parent and Child

Parent and Child

If you inject Service in parent, child component can use parent injection service.

This is an example.

Example

ParentService

parent.service.ts

import { Injectable } from '@angular/core';
 
@Injectable()
export class ParentService {
 
  getMessage() {
    return 'I am parent.';
  }
}

Parent

parent.component.ts

import { Component } from '@angular/core';
import { ParentService } from './parent.service';
 
@Component({
  selector: 'app-root',
  providers: [
    {provide: ParentService, useClass: ParentService}
  ],
  template: `
  <div>
    Parent : {{message}}
  </div>
  <div>
      <app-child-comp></app-child-comp>
      <app-child-comp></app-child-comp>
   </div>
  `
})
export class ParentComponent {
  message: string;
 
  constructor(private parentService: ParentService) {
    this.message = parentService.getMessage();
  }
}

Can use in constructor

Child

This component is imported by parent component

import { Component } from '@angular/core';
import { ParentService } from './parent.service';
 
@Component({
  selector: 'app-child-comp',
  template: `
    <div>Child : {{message}}</div>
  `
})
export class ChildComponent {
  message: string;
 
  constructor(private parentService: ParentService) {
    this.message = parentService.getMessage();
  }
}

Child also can use ParentService which is injected by Parent