Having trouble calling a function from one component in another by passing the reference of one to the other. I keep getting a "Cannot read property" error. Below is the code snippet
Alert Component
import { Component, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.css']
})
export class AlertComponent implements OnInit {
AlertMessage:string;
constructor() {
}
showSuccessAlert(){
this.AlertMessage = "Data saved successfully.";
}
ngOnInit() {
}
}
Alert component html
<p>{{AlertMessage}}</p>
Attempting to call showSuccessAlert function from another component
Component
import { Component, OnInit, Input, HostListener } from '@angular/core';
import { QueueService } from 'src/services/queue.service';
import { ActivatedRoute } from "@angular/router";
import { NgForm } from '@angular/forms';
import { Queue } from 'src/models/queue';
import { error } from 'util';
import { AlertComponent } from '../alert/alert.component';
@Component({
selector: 'queue-edit',
templateUrl: './queue.edit.component.html'
})
export class QueueEditComponent implements OnInit{
@Input() alert:AlertComponent;
queue = new Queue();
constructor(private api: QueueService, private route: ActivatedRoute){
this.route.params.subscribe(params => this.params = params);
}
title = "Edit Support Queue";
ngOnInit() {
}
@HostListener('saveQueue')
saveQueue(queue){
this.alert.showSuccessAlert();
}
}
html
<app-alert></app-alert>
ERROR
ERROR TypeError: Cannot read property 'showSuccessAlert' of undefined
at QueueEditComponent.push../src/app/queue/queue.edit.component.ts.QueueEditComponent.saveQueue (queue.edit.component.ts:44)
at Object.eval [as handleEvent] (QueueEditComponent.html:25)
at handleEvent (core.js:19545)
at callWithDebugContext (core.js:20639)
at Object.debugHandleEvent [as handleEvent] (core.js:20342)
at dispatchEvent (core.js:16994)
at core.js:17441
at HTMLButtonElement.<anonymous> (platform-browser.js:993)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:14051)