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