Welcome Guest! (App Version 3.1)

websitnero logo name

@Output

@Output for Components Communication

@Output decorator is used when there are 2 components and data is to be sent from the child component to the parent component. This method is more complex than the easier one -- @Input. First of all the data is to be sent via an Event Emitter. This data is then to be catched by the parent component. Finally, the data will be used in the typescipt of parent and shown on the view of the parent component.

Practical Examples of @Output

Please follow the mentioned steps:

  1. Create a compennt 'home' which we will use as parent
  2. Create a component 'hearts' that we will use as child

  1. You'll get the following folder structure - with 'home' and 'hearts' inside components folder and all inside 'src' folder.

  1. Now, we will create an 'Event Emitter' in the child (hearts Component) and via it we will send the updated value to the parent (Home Component) which will catch the event and value associated with it and then show in its view file (.html).

app.component.ts

<app-home></app-home>

home.component.html

<p>{{noOfHearts}}</p>

<app-hearts (heartsCountEmitter)="alpha($event)"></app-hearts>

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {

  noOfHearts: Number = 0;

  constructor() { }

  ngOnInit() {
  }

  alpha(ev){
    this.noOfHearts = ev;
  }

}

hearts.component.html

<button (click)="this.increaseCount()">Increase Heart Count</button>
<button (click)="this.decreaseCount()">Decrease Heart Count</button>
<button (click)="this.resetCount()">Reset Heart Count</button>

hearts.component.ts

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

@Component({
  selector: 'app-hearts',
  templateUrl: './hearts.component.html',
  styleUrls: ['./hearts.component.css']
})
export class HeartsComponent implements OnInit {

  heartsCount = 0;
  @Output() heartsCountEmitter = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  increaseCount() {
    this.heartsCount += 1;
    this.heartsCountEmitter.emit(this.heartsCount);
  }

  decreaseCount(){
    this.heartsCount -= 1;
    this.heartsCountEmitter.emit(this.heartsCount);
  }

  resetCount() {
    this.heartsCount = 0;
    this.heartsCountEmitter.emit(this.heartsCount);
  }

}
  1. You'll get the following result.

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.