Angular Service Parent and Child

Posted by On 10月 14, 2018 0 Comment

Parent and Child

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

This is an 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();
  }
}

Child

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 component does not have “ParentService” injection. But Child Component can use!!

TOPICS