Angular 2 pass data parent to child component

Question

I have two components its called app.component and child.component. I want to pass the data from parent to child. My code is below. Where am i making mistake?

app.component.ts

import { ChildComponent } from './child.component'; import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], entryComponents:[ChildComponent] }) export class AppComponent { title = 'app works!'; }

child.component.ts

 import { AppComponent } from './app.component'; import { Component, Input } from '@angular/core'; @Component({ selector: 'child', templateUrl: './child.component.html' }) export class ChildComponent { @Input() input :string; }

app.component.html

<h1> {{title}} </h1> <child [input]="parent to child"> </child>

child.component.html

<div>{{input}}</div>

app.module.ts

import { ChildComponent } from './child.component'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, ChildComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

eko · Accepted Answer · 2017-04-04 18:53:20Z

If you write [input]="parent to child" to the template then it means that you are refering to the parent components this.parent to child which doesn't exists.

You can do something like this:

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], entryComponents:[ChildComponent] }) export class AppComponent { title = 'app works!'; parentInput = 'parent to child'; }

then in the template:

<h1> {{title}} </h1> <child [input]="parentInput"> </child>

Source: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child

Vivek Doshi · Accepted Answer · 2017-04-04 18:48:26Z

Just change this line and you are good to go

<child input="parent to child"> </child>

Or if you want to do

<child [input]="parent to child"> </child>

@echonax has alredy given the answer.

Collectives™ on Stack Overflow

Angular 2 pass data parent to child component

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related