Search code examples
angularangular6eventemitterangular-event-emitter

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


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?


Solution

  • 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);
    }