I have a parent component called program-page and it has a child component called program-item now I have a button on the program-item and what I want that button to do is to call a function on the parent component.. Im not sure how I would do something like this..
program-page.component.html
<app-program-header></app-program-header>
<app-week-display></app-week-display>
<app-program-item [item]="programItem"></app-program-item>
program-page.component.ts
someFunction()
program-item.component.html
<button>click me</button> // button I want to be able to call event on parent component
Im aware I could use an event emitter but Ive never used one before and not sure how I would implement it in this case, I havent seen any examples where clicking a button on a child component calls a function on the parent
any help would be appreciated!
Angular has Input and Output, which can be used to provide data to a child component and send events to a parent component respectively.
You can do something like this.
program-page.component.html
<app-program-header></app-program-header>
<app-week-display></app-week-display>
<app-program-item [item]="programItem" (someEvent)="someFunction($event)"></app-program-item>
program-item.component.ts
import { EventEmitter } from '@angular/core';
....
@Output() someEvent = new EventEmitter();
program-item.component.html
<button (click)="someEvent.emit('data')">click me</button>
Primitive usage of Input and Output Stackblitz example