calling child component method in angular 6

Question

I am trying to call the child component menthod from the parent ts file but i am unable to do call. getting error Cannot read property 'doSomething' of undefined.

 export class AddComponent implements OnInit, OnDestroy {
    public doSomething()
    {
       alert("Called");
    }
 }

Parent code :

@ViewChild(AddComponent) child:AddComponent;
 ngAfterViewInit() {
 this.child.doSomething();
}

parent html file

<span class="glyphicon glyphicon-plus addBack" title="Add new booking" (click)=" openActionModal(GridActions, $event, null, 'add')"
      style="float: right;margin-right: 10px;margin-top: 18px;"></span>

<ng-template #GridActions>
    <div class="modal-header">

      <button type="button" class="close pull-right" aria-label="Close" (click)="openConfirmationModal(EditConfirmation)">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <app-add #child *ngIf="showModalAdd"> </app-add>
    </div>

  </ng-template>

check my stackblitz https://stackblitz.com/edit/angular-fxtbhu — TheParam, Jan 30 '19 at 08:52
Possible duplicate of [Call a method of the child component](https://stackoverflow.com/questions/31013461/call-a-method-of-the-child-component) — Harun Yilmaz, Jan 30 '19 at 08:53
did you import added selector in your Parent component template file? — TheParam, Jan 30 '19 at 08:58

score 0 · Answer 1 · answered Jan 30 '19 at 09:03

You can do this by using @ViewChild

@Component({
 selector: 'child-cmp',
 template: '<p>child</p>'
})
class ChildCmp {
   doSomething() {}
 }

@Component({
  selector: 'some-cmp',
  template: '<child-cmp></child-cmp>',
 directives: [ChildCmp]
})
class SomeCmp {
 @ViewChild(ChildCmp) child:ChildCmp;
 ngAfterViewInit() {
    // child is set
    this.child.doSomething();
  }
}

Using string selector

@Component({
 selector: 'child-cmp',
 template: '<p>child</p>'
 })
class ChildCmp {
   doSomething() {}
}
@Component({
    selector: 'some-cmp',
    template: '<child-cmp #child></child-cmp>',
    directives: [ChildCmp]
})
class SomeCmp {
    @ViewChild('child') child:ChildCmp;
    ngAfterViewInit() {
    // child is set
    this.child.doSomething();
  }
}

Hope this will help

score 0 · Answer 2 · answered Jan 30 '19 at 09:12

0

I believe you forgot to add child component selector in your parent template file.

parent.component.html

<add-component></add-component>

parent.component.ts

@ViewChild(AddComponent) child:AddComponent;
   ngAfterViewInit() {
   this.child.doSomething();
}

add.component.ts

export class AddComponent implements OnInit, OnDestroy {
    public doSomething()
    {
       alert("Called");
    }
 }

Hope this will solve your problem!

answered Jan 30 '19 at 09:12

TheParam

10,113
4
40
51

I am calling the child view in the bootstrap modal popup i added it but it is not working. – Vishal Jan 30 '19 at 09:19
declare reference variable in template modal tag and @ViewChild('referencevarname') child:AddComponent; add here – TheParam Jan 30 '19 at 09:24
I have declared it but still it is not working please check I have added the html file code in the question – Vishal Jan 30 '19 at 09:49

score -1 · Answer 3 · answered Jan 30 '19 at 08:54

-1

Did you make the reference in the HTML/template? You need to make Template Reference to call the ViewChild-

Let, your AddComponent's selector is add-component. So call this like below in HTML/template-

<add-component #child></add-component>

answered Jan 30 '19 at 08:54

Shofol

693
1
11
26

OP is calling like `@ViewChild(AddComponent) ` so no need to define a template variable such as `#child`. It is needed when calling like `@ViewChild('child', {read: AddComponent})` – Harun Yilmaz Jan 30 '19 at 08:57

calling child component method in angular 6

3 Answers3