Output variable from one component and receive by other component

Last Updated on

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

Lämna ett svar