Skip to main content

Nested Component - Passing Data to a Parent Component

In my previous article Nested Component - Passing Data to a Child Component, I explained how to pass data from a parent component to a child component. 
In this article I will describe how you do the other way, passing data from a child to a parent component.

As you know, there is a decorator called @Input for passing data to the child, and of course there is another decorator to passing the data to the parent. This decorator is called @Output. Very obvious.

So we have to import this decorator to your parent component

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

Now we can use this decorator. The property type of the decorator must be an event. The data to pass becomes the event payload.

So we have to import the EventEmitter, too, because in Angular an event is defined with an EventEmitter object.

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

Next step is to create a new instance of this EventEmitter.

@Output() counterEventEmitter<any> = new EventEmitter<any>()

In my example we want to pass a counter back to the shopping basket. The user can drag and drop an item to a shopping basket and then he/she can tell us how many items he/she wants to order.



We want to pass this counter back to the parent component everytime the user is changing it. We adding a click event to the numeric box and call a onClick() Method.

<kendo-numerictextbox style="border-style: groove" name="count" [(ngModel)]="count" (click)='onClick(id)'></kendo-numerictextbox>

We are giving the id from this product to the method so we know in the parent component to with product this counter belongs. We will create an object that we will pass to the parent. The whole method will look like this

onClick(id){
  
 var oany =
   {productid: idcount: this.count}
 
   this.counter.emit(o)
 
}


Now the Object o  is assigned to the variable counter which has the @Output decorator. The last thing we must do is to passing this Object to the parent component. 
 The container component receives that event with the specified payload. We doing this by using data binding in the html that calls a method using $event

<app-count (counter)='basket($event)'></app-count>

In the last step we can use this object in the method basket, f.e. assigned it to a variable or doing other stuff.

  basket(event) {

  this.count = event
    }

That's it.

Comments

Popular posts from this blog

Create a simple Messageboard with Firebase and Angular4

You want that your users can leave messages in your Angular Application. In this Article I explain how you can implement this with Angular 4 and Firebase. First we have to import the Moduls for Firebase in our app.module.ts and our component. app.module.ts import  {  AngularFireModule  }  from   'angularfire2' ; import  {  AngularFireDatabaseModule ,  AngularFireDatabase ,  FirebaseListObservable  }  from   'angularfire2/database' ; @ NgModule ({    declarations:  [      AppComponent   ],    imports:  [      BrowserModule ,      FormsModule ,      HttpModule ,      AngularFireModule . initializeApp ( firebaseConfig ),      AngularFireDatabaseModule , We also have to configure the AngularFireModule. export   const   fireba...

Angular 2: Multiple instances in the same Application

Requirement:  Use multiple Root-Components in the same Application  This Root-Components use the same Implementations and Services Display the Root-Components on the same Single-Page Solution: App-Module preparation: import { BrowserModule, DOCUMENT } from '@angular/platform-browser'; import { NgModule, Inject, Component } from '@angular/core'; export class AppModule { private browser_document; ngDoBootstrap(appRef){ if(this.browser_document.getElementsByTagName('app-root1').length > 0){appRef.bootstrap(AppComponent1);} if(this.browser_document.getElementsByTagName('app-root2').length > 0){appRef.bootstrap(AppComponent2);} } constructor(@Inject(DOCUMENT) private document: any){ this.browser_document = document; } } Service preparation: Angular 2 has two options to provide a service. 1. Single instance For a multiple implementation of more Root-Components we need the second opt...

Social Login with Angular 4 and FireBase

There is a way to let users use there social logins to get access to Firebase. But how do you implement this login to your Angular 4 project. In this article I will tell you how to set up your Firebase database and how do you implement social login to your angular project. Set up Firebase First we have to get our database ready. In your Firebase Console you will find Authentication in the left navigation bar. At the tab Sign-In Method you can enable different sign in methods. In our example we will enable Google and Facebook, as it's the most commend social login methods these days. The Google Login will be configured automatically. When you enable Facebook Login you need an App ID and an App Secret. You will get these when you register yourself as a developer at Facebook. You can read how you can do that at the Facebook Site . I will not explain you that in detail because it's very easy. If we done, it's time to set up our Angular4 code. Install Ang...