CODEWITHSUNDEEP
angulartypescriptoutputparent-childeventemitter
Sourav Tomar
Sourav Tomar

Reputation: 23

Not able to share/trigger parent component's click event in child component

I am new to angular, Here is my problem :-

I have a parent component in which i am calling a child component using , which has a click event attached. now i want to tringger the click event function in child component but getting an error.

Here is my code:- parent.html:-

<button (click)="openPopup('second popup')">open2</button>
<app-popup>
    <!-- Modal content -->
    <button (click)="savePopup('second popup')">save</button>
    <p>Some text in the Modal..</p>
</app-popup>

parent.ts:-

openPopup(content:string) {
   this.content = content;
   this.popupModalService.openPopup(this.elRef);
}

app-popup.html:-

<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
    <span class="close" (click)="closePopup()">&times;</span>
    <ng-content></ng-content>
</div>

app-popup.ts

@Output() click: EventEmitter<string> = new EventEmitter<string>();
savePopup(data:string) {
   alert('clicked para' + data);
}

I want to define save popup function in app-popup.ts on click, getting error : TimelineComponent.html:38 ERROR TypeError: _co.savePopup is not a function

Upvotes: 1

Views: 767

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22213

Try like this:

parent.html

<button (click)="openPopup('second popup')">open2</button>
<app-popup #popupRef>
    <button (click)="popupRefChild.savePopup('second popup')">save</button>
    <p>Some text in the Modal..</p>
</app-popup>

parent.ts

import { PopupComponent } from "../popup/popup.component";


@ViewChild("popupRef", { static: false }) popupRefChild: PopupComponent;

Working Demo

Upvotes: 1

Related Questions