Angular: How to use template reference variable for calling child method?

Question

I am trying to call a method from a parent component to child component using template reference variable.. I tried it like below,

navigation.component.html

<button type="button" class="btn btn-primary relative waves-light" (click)="CartTable.loadCart()" mdbWavesEffect>My Cart</button>

<app-cart-table-modal #CartTable></app-cart-table-modal>

cart-table-modal.component.ts

import { Component } from '@angular/core';


@Component({
  selector: 'app-cart-table-modal',
  templateUrl: './cart-table-modal.component.html',
  styleUrls: ['./cart-table-modal.component.scss']
})
export class CartTableModalComponent implements OnInit {

  constructor() {   }

loadCart(){
 console.log('load cart called');
}
}

But I am getting an error as

ERROR TypeError: jit_nodeValue_5(...).loadCart is not a function

Please let me know, how to fix this error.. Thanks in advance..

Can't reproduce: stackblitz.com/edit/…. Post a complete minimal example (as I just did) reproducing the problem. — JB Nizet
– JB Nizet, Commented Jun 19, 2018 at 19:13
Possible duplicate of Call child component method from parent class - Angular — Shift 'n Tab
– Shift 'n Tab, Commented Jun 19, 2018 at 19:25

Shift 'n Tab · Accepted Answer · 2020-01-15 13:04:49Z

4

You can call public method from a child component via @ViewChild() decorator.

child.component.ts

export class ChildComponent implements OnInit {

  constructor() {   }

  method1(){
    console.log('logged me!');
  }

}

parent.component.html

<div>
    <button (click)="onLogged()">Logged Me!</button>
    <child-comp #childComp></child-comp>
</div>

parent.component.ts

export class ParentComponent implements OnInit {

  @ViewChild(ChildComponent) child_component: ChildComponent;

  constructor() {   }

  onLogged(){
    this.child_component.method1();
  }

}

Read more about Component interaction in angular.io.

edited Jan 15, 2020 at 13:04

answered Jun 19, 2018 at 19:23

Shift 'n Tab

9,51414 gold badges80 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: How to use template reference variable for calling child method?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related