TypeScript angular2/core EventEmitter Examples

Programming Language: TypeScript

Namespace/Package Name: angular2/core

Class/Type: EventEmitter

Examples at hotexamples.com: 30

The typescript angular2.core EventEmitter is a package library that allows developers to create and emit events in their Angular 2 application. Events are important in Angular 2 as they allow components to communicate with each other and trigger changes in the application.

Example #1:

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

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

  onClick() {
    this.clicked.emit('button clicked!');
  }
}

@Component({
  selector: 'app-parent',
  template: `
    
    {{ message }}
  `,
})
export class ParentComponent {
  message: string;

  handleClick(message) {
    this.message = message;
  }
}

In this example, we have a child component with a button that, when clicked, emits an event with a message. The parent component listens for this event and updates a message in its template.

Example #2:

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

@Injectable()
export class NotificationService {
  messageAdded = new EventEmitter();

  add(message: string) {
    this.messageAdded.emit(message);
  }
}

In this example, we have a service that provides a way for components to add messages to a notification system. The service has an EventEmitter that emits a messageAdded event when a new message is added. Components can listen for this event to receive notifications. Package Library: @angular/core

TypeScript EventEmitter - 30 examples found. These are the top rated real world TypeScript examples of angular2/core.EventEmitter 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: new-task.component.ts Project: mgoren/hello-angular

 addTask(newDescription){
   this.onSubmitNewTask.emit(newDescription.value);
   newDescription.value="";
 }

Example #2

Show file

File: edit-entry-details.component.ts Project: dmdiehr/CalorieCounter

 deleteEntry(entry: Entry){
   this.onSubmitDeleteEntry.emit(entry);
 }

Example #3

Show file

File: paging.component.ts Project: danthomas/ng2

 onPageSizeChanged(pageSize : number){
     this.pageDetails.pageSize = +pageSize;
     this.changed.emit(null);
 }

Example #4

Show file

File: PersistenceService.ts Project: allash/angular2-seed-example-mashup

 // This method can be called by subscribers to force a push.  Useful when a
 // component is initialized.
 pushStateToSubscribers() {
     let persistenceState = this.getState();
     console.log('PersistenceService publishing state change:', persistenceState);
     this.persistenceStateChanged.next(persistenceState);
 }

Example #5

Show file

File: new-keg.component.ts Project: jos-h20/tap_room_angular2

 addKeg(userName: HTMLInputElement, userBrand: HTMLInputElement, userPrice: HTMLInputElement, userPintsLeft: HTMLInputElement) {
   var newKeg: Keg = new Keg(userName.value, userBrand.value, userPrice.value, userPintsLeft.valueAsNumber, 0);
   this.onSubmitNewKeg.emit(newKeg);
 }

Example #6

Show file

File: new-task.component.ts Project: polina13/JS-To-Do-Angular

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

Example #7

Show file

File: alert.service.ts Project: txf7337/angular2-alert

 closeAlert() {
     this.closeAlertEventEmitter.emit();
 }

Example #8

Show file

File: food-details.component.ts Project: milleraundra/calorie_tracker

 closeDetailsField() {
   this.closeDetails.emit(1);
 }

Example #9

Show file

File: strain-view.component.ts Project: waitbutmetho/Budtendr

 onSelect(strain) {
   this.emitter.emit(strain);
 }

Example #10

Show file

File: new-task.component.ts Project: Hreacon/js-week2-angular-todolist

 newTask(newDescription: HTMLInputElement): void {
   this.onSubmitNewTask.emit(newDescription.value);
   newDescription.value = "";
 }

Show more examples