Nested Component - Passing Data to a Child Component

If you want to pass data to a nested component you have to use the @Import decorator. You can find this decorator at @angular/core

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

Now I show you how you can use this decorator.

In my example I want to pass a counter from a Shopping List to a Shopping Basket Component

In the end, the shopping basket should look like this:

The Shopping Basket shows the number of items in an array (Shopping List). Everytime we put an item in the basket we count the items in the array

this.counter = this.selectedProducts.length

Now we have to pass the counter to the ShoppingBasketComponent by using property binding

<app-shopping-basket [count]="counter"></app-shopping-basket>

After this we can use the input decorator at the child component

export class ShoppingBasketComponent implements OnInit {

@Input() count: any

constructor() { }

ngOnInit() {

}

And we can use it in the HTML

<h2>{{count}}</h2>

Summary:

Passing data from a parent to a child component is very easy. You only use property binding at the parent component and the input decorator at the child component.

Comments

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...

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...

Download a file with Angular2+ and FileSaver.js

Why should your Angular code download a file? Of course your webserver can deliver files and you can just add a simple link to your website but what if the file is delivered by a webservice and the webservice requests authentication (i.e. OAuth) to protect the file from unauthorized access? In this case you might have the requirement to download the file in your code and then tell the browser to save it to the hard disk. How to do that? First of all you need to add filesaver.js to your project. npm install file-saver --save ..and add the typings npm install @types/file-saver --save-dev More information about filesaver you can find on the filesaver github pages . To download the file via http you need to implement a service. The following imports are required: import { Injectable } from '@angular/core' ; import { Http , Response , RequestOptions , ResponseContentType } from ...

Talk About Code

Search This Blog