Ways to trigger child components function from parent component

Question

Ways to trigger child components function from parent component

I am working with a parent-child component setup. In the child component (child.component.ts), there is a method called "childFunction()". Now, I need to call this method from within a function in the parent component. Can you guide me on how to achieve this?

**Parent.html :** 

<div class="box">
    <input type="text" (input)="searchValue=$event.target.value" placeholder={{placeHolder}} />
    
<btn-icon [searchType]='searchType' [searchText]='searchValue'></btn-icon> // child component
</div>

**parent.component.ts :**

export class parentComponent implements OnInit {

parentFunction(){
// **Call** childFunction('inputValue');

}
 
**btn-icon  is Child :**
**btn-icon.component.ts:  (Child)**

export class btn-iconimplements OnInit {
  
  @Input() Type: string;
  @Input() Text: string;

childFunction(inputValue){
      //some logic
    }
}

angular typescript components parent-child

Answer 1

Answer №1

To retrieve the children, simply utilize ViewChild in your code.

export class ParentComponent implements OnInit {

@ViewChild(btn-icon) btnIcon //Make sure to use the class name of your child-component as the argument for ViewChild
  parentFunction(){
     this.btnIcon.childFunction('inputValue');
  }
}

Another method is using a template reference and passing it as an argument to a function:

<div class="box">
    <!--When handling an input event, pass the template reference "child" along with $event.target.value-->
    <input type="text" (input)="change(child,$event.target.value)" placeholder={{placeHolder}} />

    <!--The "#child" is a template reference-->
    <btn-icon #child [searchType]='searchType' [searchText]='searchValue'></btn-icon>
</div>

change(childComponent: BtnIcon, value){
    childComponent.childFunction(value)
}

Answer 2

To retrieve the children, simply utilize ViewChild in your code.

export class ParentComponent implements OnInit {

@ViewChild(btn-icon) btnIcon //Make sure to use the class name of your child-component as the argument for ViewChild
  parentFunction(){
     this.btnIcon.childFunction('inputValue');
  }
}

Another method is using a template reference and passing it as an argument to a function:

<div class="box">
    <!--When handling an input event, pass the template reference "child" along with $event.target.value-->
    <input type="text" (input)="change(child,$event.target.value)" placeholder={{placeHolder}} />

    <!--The "#child" is a template reference-->
    <btn-icon #child [searchType]='searchType' [searchText]='searchValue'></btn-icon>
</div>

change(childComponent: BtnIcon, value){
    childComponent.childFunction(value)
}

Answer 3

Answer №2

To easily include the Child Component, utilize the decorator @ViewChild():

@ViewChild(btn-icon)
private btnIcon: btn-icon;

Subsequently, you can interact with its attributes as usual:

this.btnIcon.childFunction();

Answer 4

To easily include the Child Component, utilize the decorator @ViewChild():

@ViewChild(btn-icon)
private btnIcon: btn-icon;

Subsequently, you can interact with its attributes as usual:

this.btnIcon.childFunction();

Answer 5

Answer №3

To access the child component, you can utilize @ViewChild in the parent component:

export class ParentComponent implements OnInit {
   @ViewChild(ChildComponent)    childComponent;
   
   parentFunction(){
     childComponent.childFunction();
   }

The childComponent property will only be populated with the child component after the ngAfterViewInit() lifecycle hook is called.

Note: I have used the class name ChildComponent in camelcase instead of "child-component" as shown in your example.

Answer 6

To access the child component, you can utilize @ViewChild in the parent component:

export class ParentComponent implements OnInit {
   @ViewChild(ChildComponent)    childComponent;
   
   parentFunction(){
     childComponent.childFunction();
   }

The childComponent property will only be populated with the child component after the ngAfterViewInit() lifecycle hook is called.

Note: I have used the class name ChildComponent in camelcase instead of "child-component" as shown in your example.

Answer 7

Answer №4

The callback pattern presents an alternative solution to this issue. To see a functional example, visit stackblitz: https://stackblitz.com/edit/angular-e6hakq

Child component

@Component({
  selector: 'app-child',
  template: `<div>
    <h3>Child var: {{num}}!</h3>
  </div>`,
})
export class ChildComponent implements OnDestroy {
  protected num: number = 0;
  private _param: ParamFn | null = null;

  get param() {
    return this._param;
  }

  @Input() set param(val: ParamFn) {
    this._param = val;
    this._param.registerFn(this.innerComponentFunction);
  }

  private innerComponentFunction = () => {
    this.num++;
  };

  ngOnDestroy() {
    if (this.param) {
      //avoid memory leak
      this.param.deregisterFn();
      this.param.deregisterFn = null;
      this.param.registerFn = null;
    }
  }
}


export type ParamFn =  {
  registerFn: (callback: () => void) => void,
  deregisterFn: () => void
}

Parent component

@Component({
  selector: 'app-parent',
  template: `<app-child 
    [param]="fnParam"></app-child>
    <button (click)="invokeChildFn()">Trigger Child Function</button>
    `,
})
export class ParentComponent {
  private childFn: Function | null = null;

  registerDeactivateChildFunction = (func: () => void) => {
    this.childFn = func;
  };

  deregisterFunction = () => {
    this.childFn = null;
    console.log('deregisterFunction parent');
  };

  protected fnParam: ParamFn = {
    registerFn: this.registerDeactivateChildFunction.bind(this),
    deregisterFn: this.deregisterFunction.bind(this),
  };

  protected invokeChildFn() {
    if (this.childFn) {
      this.childFn();
    }
  }

Answer 8

The callback pattern presents an alternative solution to this issue. To see a functional example, visit stackblitz: https://stackblitz.com/edit/angular-e6hakq

Child component

@Component({
  selector: 'app-child',
  template: `<div>
    <h3>Child var: {{num}}!</h3>
  </div>`,
})
export class ChildComponent implements OnDestroy {
  protected num: number = 0;
  private _param: ParamFn | null = null;

  get param() {
    return this._param;
  }

  @Input() set param(val: ParamFn) {
    this._param = val;
    this._param.registerFn(this.innerComponentFunction);
  }

  private innerComponentFunction = () => {
    this.num++;
  };

  ngOnDestroy() {
    if (this.param) {
      //avoid memory leak
      this.param.deregisterFn();
      this.param.deregisterFn = null;
      this.param.registerFn = null;
    }
  }
}


export type ParamFn =  {
  registerFn: (callback: () => void) => void,
  deregisterFn: () => void
}

Parent component

@Component({
  selector: 'app-parent',
  template: `<app-child 
    [param]="fnParam"></app-child>
    <button (click)="invokeChildFn()">Trigger Child Function</button>
    `,
})
export class ParentComponent {
  private childFn: Function | null = null;

  registerDeactivateChildFunction = (func: () => void) => {
    this.childFn = func;
  };

  deregisterFunction = () => {
    this.childFn = null;
    console.log('deregisterFunction parent');
  };

  protected fnParam: ParamFn = {
    registerFn: this.registerDeactivateChildFunction.bind(this),
    deregisterFn: this.deregisterFunction.bind(this),
  };

  protected invokeChildFn() {
    if (this.childFn) {
      this.childFn();
    }
  }

Ways to trigger child components function from parent component

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible for a function within a nodejs module to be defined but display as undefined upon access?

Unusual behavior of Typescript with Storybook's addon-docs

Error in Angular FormArray: Unable to access the 'push' property because it is undefined

What is the best way to retrieve the input value from a moment object?

Troubleshooting a TypeScript Problem with React Context

Tips for effortlessly incorporating a new chip while maintaining a neat arrangement and ensuring button alignment

Experiencing issues while trying to render a component with dynamic content in Next.js

Is there a method to incorporate lists of varying types in a single v-for loop without causing any issues with type validations?

The type argument '(id: any, title: any, body: any, image: any) => Element' does not match the parameter type

Finding parameters in Angular 4

Looking for a way to dynamically append a child element within another child

Slim API receives a request from Ionic 5

The error "Property 'user' does not exist on type 'Session'." occurred while attempting to pass session data using express-session and accessing req.session.user

Tips on how to properly format a DateTime String

Sequelize.js: Using the Model.build method will create a new empty object

Guide to setting up a trigger/alert to activate every 5 minutes using Angular

What does the error message "JSON.parse: unexpected character at line 1 column 1 of the

Converting and Casting Enums in TypeScript

The parameter 'host: string | undefined; user: string | undefined' does not match the expected type 'string | ConnectionConfig' and cannot be assigned

Unlock the power of asynchronous dependencies on a global scale with Inversify