How to call the method from child component to parent component in Angular

user_7334301 0
Viewed 104

I have one method in Child component like below:

showAcknowledgement() {
    this.noticeService.getNotice(ConstUrls.NoticeManagement.GetUserNotice).subscribe((data: any) => {
      data.data.filter((res: any) => {
      if (data.isSuccessful === true) {
        this.noticeText = res.noticeText;
        this.noticeAttachment = res.noticeAttachement;
        this.noticeCode = res.noticeCode;
      } else if (data.isSuccessful === false) {
        this.message = [{ field: "", message: data.message[0].message }];
        this.objError = this.message;
        this.showError = true;
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }
    })
    });
  }

I need to call this method in parent component inside ngOnInit() because while page loading I need to call that method. I tried like below but its not working

Parent HTML:

<app-acknowledge-notice-modal #child></app-acknowledge-notice-modal>

Parent TS:

@ViewChild(AcknowledgeNoticeModalComponent, {static : true}) child : AcknowledgeNoticeModalComponent;


ngOnInit() {
    this.child.showAcknowledgement();
}
angular typescript
2 Answers

With @Output() inside child component (https://angular.io/guide/inputs-outputs)

It's not direct method call but pretty common thing. So, in your case it could be something like this:

Parent HTML:

<app-acknowledge-notice-modal (someEvent)=someMethod()></app-acknowledge-notice-modal>

Child TS:

@Output() someEvent = new EventEmitter<string>();

someEvent in parent's HTML and child's TS must match while someMethod() is a method inside parent's TS

user_38848520

Can you try like this?

Using Type Selector:

Child Component

@Component({
  selector: 'app-acknowledge-notice-modal',
  template: <div>...</div>
})

class AcknowledgeNoticeModalComponent{
showAcknowledgement() {
this.noticeService.getNotice(ConstUrls.NoticeManagement.GetUserNotice).subscribe((data: any) => {
      data.data.filter((res: any) => {
      if (data.isSuccessful === true) {
        this.noticeText = res.noticeText;
        this.noticeAttachment = res.noticeAttachement;
        this.noticeCode = res.noticeCode;
      } else if (data.isSuccessful === false) {
        this.message = [{ field: "", message: data.message[0].message }];
        this.objError = this.message;
        this.showError = true;
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }
     })
    });
   }
 }

Parent Component

@Component({
  selector: parent-component,
  template: <app-acknowledge-notice-modal></app-acknowledge-notice-modal>,
  directives: [AcknowledgeNoticeModalComponent]
})

class ParentComponent{

  @ViewChild(AcknowledgeNoticeModalComponent) child: AcknowledgeNoticeModalComponent;

  ngAfterViewInit() {        
    this.child.showAcknowledgement();
  }
}

Using String Selector:

Child Component

@Component({
  selector: 'app-acknowledge-notice-modal',
  template: <div>...</div>
})

class AcknowledgeNoticeModalComponent{
showAcknowledgement() {
this.noticeService.getNotice(ConstUrls.NoticeManagement.GetUserNotice).subscribe((data: any) => {
      data.data.filter((res: any) => {
      if (data.isSuccessful === true) {
        this.noticeText = res.noticeText;
        this.noticeAttachment = res.noticeAttachement;
        this.noticeCode = res.noticeCode;
      } else if (data.isSuccessful === false) {
        this.message = [{ field: "", message: data.message[0].message }];
        this.objError = this.message;
        this.showError = true;
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }
     })
    });
   }
 }

Parent Component

@Component({
  selector: parent-component,
  template: <app-acknowledge-notice-modal #child></app-acknowledge-notice-modal>,
  directives: [AcknowledgeNoticeModalComponent]
})

class ParentComponent{

  @ViewChild('child') child: AcknowledgeNoticeModalComponent;

  ngAfterViewInit() {        
    this.child.showAcknowledgement();
  }
}
user_134406690
Related