Skip to main content

Nested Component - Passing Data to a Child Component

Von


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.




Labels:

Comments

Post a Comment

Popular posts from this blog

Create a simple Messageboard with Firebase and Angular4

Von
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...
Post a Comment
Read more

Generate documentation for Angular projects with Compodoc

Von
Sometimes the structure of Angular projects can become confusing. After adding tons of components and modules it might be difficult to keep track of what is what. Compodoc can help you out by generating a much better to read documentation for your project. It can give you a visual and easy to browse overview of all the code in your application and lots of useful features. How to install: Compodoc is available by npm. First install it globally: npm install -g @compodoc/compodoc Then install it in your project: npm install --save-dev @compodoc/compodoc In a next step you have to add a command to your package.json. In the 'scripts' area add the following line: "compodoc" :  "./node_modules/.bin/compodoc -p src/tsconfig.app.json" Hint: in the original documentation at the moment it refers to tsconfig.json which is wrong and would give you an error message. Finally generate the documentation and open it in the browser: npm run compodoc co...
Post a Comment
Read more

Typescript: json2ts is a nice helper

Von
Writing interfaces can be annoying. You can save a lot of time when you have to define Typescript interfaces for data that you are loading from a webservice.  Instead of typing all the interfaces yourself you can just use a nice service in the web: json2ts Just paste in your json code and it generates the corresponding interfaces in Typescripts. Example JSON: [   {      "city": "Berlin",     "country": "Germany",     "currencies": [{"code":"EUR"}]   },   {      "city": "Paris",     "country": "France",     "currencies": [{"code":"EUR"}]   } ] Generated code: declare module namespace {     export interface Currency {         code: string;     }     export interface RootObject {         city: string;         country: string;         currencies: Currency...
Post a Comment
Read more