-3

I have two components in the same page. I have few methods and properties same for both components. How to use that by using a service. Below is a sample code...

@Component({
selector: 'app',
template: '<h1>AppComponent1</h1>'
})
export class AppComponent1 { }

@Component({
selector: 'appTwo',
template: '<h1>AppComponent2</h1>'
})
export class AppComponent2 { }

I have the below methods common for both:

onSearch(){
 console.log('search');
}

onBtnClick(){
//do something
}

How to use a service to share between these two components which are on the same page.

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
user3340300
  • 67
  • 1
  • 3
  • 11
  • do you mean you use two custom components in the same page? or you mean you defined 2 components in the same ts file? It doesnt matter either way. You need to _inject_ your service in any component you want to use it in – Suraj Rao May 28 '18 at 05:35
  • It doesnt matter even if they are in same page, they are 2 different component and you should inject your service in both, also you can create a parent class and extend this 2 class from parent and inject service in parent. – Fateme Fazli May 28 '18 at 05:37
  • @fatemefazli can u give any example link where can i know more about parent and extend class from parent.. – user3340300 May 28 '18 at 05:59
  • @SurajRao.. i tried to inject service but its not working..can you give me an example based on my sample code.. – user3340300 May 28 '18 at 06:01
  • @user3340300 typescript [docs](https://www.typescriptlang.org/docs/handbook/classes.html) will help you. – Fateme Fazli May 28 '18 at 06:02

2 Answers2

1

You can use two-way service. Useful even when your components are in different module.

Service

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

@Injectable()
export class AppShareService {
  private readonly subjectSource$ = new Subject<object>();

  public get newData(): Observable<object> {
    return this.subjectSource$.asObservable();
  }

  public publish(data: any) {
    this.subjectSource$.next(data);
  }
}

and you can publish event-like messages like this:

export class AppComponent {
  constructor(public appShareService: AppShareService ) {
    appShareService.publish({data: 'some data'});
  }
}

and you can subscribe to these events:

export class HomeComponent implements OnDestroy {
  mySubscription: Subscription;

  constructor(public appShareService: AppShareService ) {
    this.mySubscription = appShareService.newData.subscribe((data) => {
      console.log(data); // {data: 'some data'}
    });
  }

ngOnDestroy(): void {
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
 }
}

Good practice is to unsubscribe from Observable always. and ngOnDestroy is good place for that.

DiPix
  • 5,755
  • 15
  • 61
  • 108
0
//first make @Injectable service and all your comman functionality like below

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


@Injectable()
export class Appshare {
  share:'test'
    constructor( ) { 
     console.log('search');
    }
    onSearch(){
    console.log('search');
    }

    onBtnClick(){
    console.log('btnclick');
    }

}

//than declare it in your component section use direct in your both component

import { Component } from '@angular/core';
import{Appshare} from "./appshare.service";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(public appshare:Appshare){
      this.appshare.onSearch();
      this.appshare.onBtnClick();
  }

}


@Component({
selector: 'appTwo',
template: '<h1>AppComponent2</h1>'
})
export class AppComponent2 {
  constructor(public appshare:Appshare){
      this.appshare.onSearch();
      this.appshare.onBtnClick();
  }
 }
mittal bhatt
  • 955
  • 6
  • 13