TypeScript angular2/core EventEmitter.emit Examples

Programming Language: TypeScript

Namespace/Package Name: angular2/core

Class/Type: EventEmitter

Method/Function: emit

Examples at hotexamples.com: 30

Angular2.core EventEmitter is a class that enables communication between components in Angular applications. It facilitates communication between parent and child components, and between sibling components via a shared service. The emit function in the EventEmitter class can be used to send messages from a component to its parent or sibling components.

Example 1: Child to Parent communication using EventEmitter emit

In this example, we have a child component that has an input field for the user to enter their name. When the user enters their name and clicks the submit button, the child component emits an event with the entered name as the payload. The parent component listens for the event and displays a greeting message for the user.

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    
    
  `,
})
export class ChildComponent {
  @Output() nameEntered = new EventEmitter();
  name: string;

  submitName() {
    this.nameEntered.emit(this.name);
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    
    {{ greeting }}
  `,
})
export class ParentComponent {
  greeting: string;
  
  greetUser(name: string) {
    this.greeting = `Hello, ${name}!`;
  }
}

Example 2: Shared Service communication using EventEmitter emit

In this example, we have two sibling components that share a service. When one component updates a value in the shared service, the other component listens for the change using an event emitter.

import { Injectable, EventEmitter } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  valueChanged = new EventEmitter();
  private _value: number;

  get value(): number {
    return this._value;
  }

  set value(val: number) {
    this._value = val;
    this.valueChanged.emit(val);
  }
}

import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-sibling1',
  template: `
    
  `,
})
export class Sibling1Component {
  value: number;

  constructor(private sharedService: SharedService) {}

  updateValue() {
    this.sharedService.value = this.value;
  }
}

import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-sibling2',
  template: `
    Value: {{ value }}
  `,
})
export class Sibling2Component {
  value: number;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.valueChanged.subscribe(val => {
      this.value = val;
    });
  }
}

In both examples, the EventEmitter class is part of the @angular/core library.

TypeScript EventEmitter.emit - 30 examples found. These are the top rated real world TypeScript examples of angular2/core.EventEmitter.emit extracted from open source projects. You can rate examples to help us improve the quality of examples.

Frequently Used Methods

Show Hide

emit(30)

next(30)

subscribe(6)

error(1)

map(1)

resolve(1)

unsubscribe(1)

Example #1

Show file

File: meal-list.component.ts Project: Marbulous28/meal_tracker2

 mealClicked(clickedMeal: Meal): void {
   console.log('child', clickedMeal);
   this.selectedMeal = clickedMeal;
   this.onMealSelect.emit(clickedMeal);
 }

Example #2

Show file

File: new-task.component.ts Project: SkyRousse/to-do-list-angular

 addTask(userDescription: HTMLInputElement){
   this.onSubmitNewTask.emit(userDescription.value);
   userDescription.value = "";
 }

Example #3

Show file

File: keg-list.component.ts Project: hellospiral/tap_room

 kegClicked(clickedKeg: Keg): void {
   console.log('child', clickedKeg);
   this.selectedKeg = clickedKeg;
   this.onKegSelect.emit(clickedKeg);
 }

Example #4

Show file

File: new-task.component.ts Project: Jordan-Meier/angular2-toDo

 addTask(userDescription: HTMLInputElement, userPriority: HTMLInputElement){
   var taskArray: string[] = [userDescription.value, userPriority.value];
   this.onSubmitNewTask.emit(taskArray);
   userDescription.value = "";
 }

Example #5

Show file

File: new-task.component.ts Project: mfitchen/angular2-app-to-do-list

 addTask(userDescription: HTMLInputElement, userPriority: HTMLSelectElement, userCategory: HTMLSelectElement){
   this.onSubmitNewTask.emit([userDescription.value, userPriority.value, userCategory.value]);
   userDescription.value = "";
 }

Example #6

Show file

File: app.ts Project: sainumtown/angularInvertorytest

 clicked(product: Product): void {
   this.currentProduct = product;
   this.onProductSelected.emit(product);
 }

Example #7

Show file

File: edit-meal-details.component.ts Project: pokojt/foodJournal

 submitEdit() {
   this.onSubmitMealEdit.emit(true);
 }

Example #8

Show file

File: new-keg.component.ts Project: PatrickCLipscomb/angular-tap-room

 addKeg(userBrand: HTMLInputElement, userPrice: HTMLInputElement, userAlcContent: HTMLInputElement){
   this.onSubmitNewKeg.emit([userBrand.value, userPrice.value, userAlcContent.value]);
   userBrand.value="";
   userPrice.value="";
   userAlcContent.value="";
 }

Example #9

Show file

File: new-keg.component.ts Project: NoahKittleson/kegerator-js

 addKeg(kegName : HTMLInputElement, kegType : HTMLInputElement, kegABV : HTMLInputElement) {
   var newKeg = new Keg (kegName.value, kegType.value, kegABV.value, 0);
   this.onSubmitNewKeg.emit(newKeg);
 }

Example #10

Show file

File: meal-filter.component.ts Project: spawner999/JS-CR2

 onChange(value: string){
   this.currentFilter.emit(value);
 }

Show more examples