How to use a function of component1 in component2 in Angular 6 without interaction of HTML?

Question

I have testTry() function in Component1 which accepts one parameter and prints the value.

export class Component1 implements OnInit {

 testTry(name:any){
 console.log("Name-->",name);}

 ngOnInit(){    }

}

I have component2 with a function sampleCall() in which i need to call a function of component1 by sending a parameter

export class Component2 implements OnInit {

 sampleCall(){
  let a = "Sravya";
  testTry(a);
}

 ngOnInit(){    }
}

How would I call a function from component1 to component2 without involving HTML?

move that function to service – Hardik Patel Mar 18 '19 at 06:38 — Hardik Patel, Mar 18 '19 at 06:38
is there any other option other than that? – Sravya Mar 18 '19 at 06:40 — Sravya, Mar 18 '19 at 06:40
you can use eventEmmiter – Hardik Patel Mar 18 '19 at 06:48 — Hardik Patel, Mar 18 '19 at 06:48

score 0 · Accepted Answer · edited Mar 18 '19 at 08:52

0

You can use @ViewChild,

We can use this to get control for Child Component inside Parent Component. When we used it, we will get the child Component as Object so that we are able to call the methods and variables of the the Child Component.

Component2.ts

 @ViewChild(Component1) component1: Component1;

 sampleCall() {
  let a = "Sravya";
  this.component1.testTry(a);
}

edited Mar 18 '19 at 08:52

halfer

19,824
17
99
186

answered Mar 18 '19 at 06:43

Ganesh

5,808
2
21
41

Could you please elaborate – Sravya Mar 18 '19 at 06:46
Its not a generic solution as it requires `Component1` to be inside `Component2` – Shashank Vivek Mar 18 '19 at 06:48
1

OP's question is without interaction of html then, I think using `@ViewChild` is better than Injecting it into another component. – Ganesh Mar 18 '19 at 07:14
@ganesh045 : i think he had parent child relationship then. Cool. +1 – Shashank Vivek Mar 24 '19 at 02:36

score 0 · Answer 2 · answered Mar 18 '19 at 06:46

You can do:

Create a service and move the method inside the service
Inject component1 into component2 (not recommended)

Try:

export class Component2 implements OnInit {

constructor(private comp1: Component1){}

sampleCall(){
  let a = "Sravya";
  this.comp1.testTry(a);
}

 ngOnInit(){    }
}

Raj · Answer 3 · 2019-03-18T07:04:06.213

Apart from the above solutions, which are logically correct, you can also use Inheritance (a less used feature of typescript).

Keep all the functions in a separate file like common-logic.ts and other components can simply access them using extends keyword.

export class Component2 extends CommonLogic {}

Component2

export class Component2 implements OnInit extends CommonLogic {

 sampleCall(){
  let a = "Sravya";
  testTry(a);
 }

CommonLogic

export class CommonLogic {

 testTry(name:any){
   console.log("Name-->",name);
 }

}

Note: Angular only allows inheritance up to one level.

score 0 · Answer 4 · answered Mar 18 '19 at 06:55

You can use EventEmmiter as below.

ChangeService.ts

import {EventEmitter} from 'angular2/core';
export class ChangeService {
  calltestTry: EventEmitter<string> = new EventEmitter();
  constructor() {}
  emitcalltestTryEvent(data) {
    this.calltestTry.emit(data);
  }
  getcalltestTryEmitter() {
    return this.calltestTry;
  }
}

component1.ts

@Component({
  selector: 'app-component1',
})
export class ComponentOne {
  item: number = 0;
  subscription: any;
  constructor(private changeService:ChangeService) {}
  ngOnInit() {
    this.subscription = this.changeService.getcalltestTryEmitter()
      .subscribe(item => this.testTry(item));
  }
  testTry(item: string) {
     console.log(item);
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

component2.ts

@Component({
  selector: 'app-component2',
})
export class ComponentTwo {
  item: number = 0;
  subscription: any;
  constructor(private changeService:ChangeService) {}
  ngOnInit() {
  }

  sampleCall(item: number) {
     let a = "Sravya";
     this.changeService.emitcalltestTryEvent(a);
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

score 0 · Answer 5 · answered Mar 18 '19 at 07:02

There are actually 4 ways of doing this.

Including the function in a service, so that you can inject it anywhere.
Making your function static, so that you can access it using the Class. (Pros and Cons are there)
Inject the component to the other component so that you can access it (Not recommended).
Pass your function as an input parameter to the other component.

score 0 · Answer 6 · answered Mar 18 '19 at 07:44

You can use ComponentFactoryResolver to get components and use their properties.

export class Component1 implements OnInit {

 testTry(name:any){
   console.log("Name-->",name);
 }

 ngOnInit(){    }

}

import {ViewChild, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
export class Component2 implements OnInit {

  @ViewChild('parent', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(
    private _cfr: ComponentFactoryResolver
  ) { }

  sampleCall(){
    const comp = this._cfr.resolveComponentFactory(Component1);
    const component1Ref = this.container.createComponent(comp);
    const component1 = component1Ref.instance;
    component1._ref = component1Ref;

    let a = "Sravya";
    component1.testTry(a);
 }

  ngOnInit(){    }
}

How to use a function of component1 in component2 in Angular 6 without interaction of HTML?

6 Answers6