Last Updated on: (senast uppdaterad på:)
This can be done through parent-child component relation. The child component will emit a value using EventEmitter. When adding the child component to a parent component’s template, the child component will have a binding mentioned which maps the emitting to a function in the parent component.
In the child component:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; //... rest of Component //inside the Component: @Output() pricechange: EventEmitter<number> = new EventEmitter<number>(); //where we want to emit a change: this.pricechange.emit(Number(getIngPrice));
In the parent component’s html template:
<!-- say we have a component with its name. It will have pricechange which is emitted by the child component in brackets, mapped to our function in the parent component--> <app-logic30-ingredients (pricechange)="changePrice($event)"></app-logic30-ingredients>
The parent component will have the function that receives the emit:
//a function in the component: changePrice(priceEvent) { //alert("changePrice . got " + priceEvent); this.thePrice = this.thePrice + priceEvent; }
Full example at https://ultimatecourses.com/blog/component-events-event-emitter-output-angular-2