Question

57

Pass Event from child component to parent component Angular 5

rated 0 times [ 63] [ 6] / answers: 1 / hits: 49792 / 6 Years ago, wed, february 21, 2018, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lailab

Add To Favorites

Follow

Total Points: 706

Total Questions: 102

Total Answers: 95

Location: Falkland Islands

Member since Mon, Jul 13, 2020

4 Years ago

answered 6 Years ago lara · Accepted Answer

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