Angular2 : passing property to nested component

Question

I am developing a simple test app in Angular 2 and having problems passing a property to a nested component. See source code below. The template from the nested component renders, but the property passed to the nested component does not render. The rendered output is:

This is a .

Whereas, I would expect the following:

This is a test.

No errors are generated in the browser console. I have also tried utilizing properties: 'inputtext' in the nested component since the name remains the same in the view, but this generates a Can't bind to ... error in the console. As for the Angular2 version, I'm using the latest (Alpha-34).

Any suggestions?

index.html

<html>
  <head>
    <title>Angular 2 Test App</title>
    <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
    <script src="https://jspm.io/[email protected]"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"></script>
  </head>
  <body>
    <h1>Welcome to my Angular 2 Test App</h1>
    <app></app>
    <script>System.import('app');</script>
  </body>
</html>

app.ts

import {Component, View, bootstrap} from 'angular2/angular2';

//nested component
@Component({
  selector: 'input-component',
  properties: ['inputtext:inputtext']
})
@View({ template: '<h1>This is a {{inputtext}}.</h1>'})
class inputComponent{}

// root app
@Component({ selector: 'app' })
@View({ 
  directives: [inputComponent], 
  template: '<input-component [inputtext]="test"></input-component>' 
})
class rootApp{}

bootstrap(rootApp);

Arnaud Boeglin · Accepted Answer · 2015-08-29 10:37:15Z

3

It is because you don't bind a variable on your property, you just pass it a literal value. In that case you need to drop the squared brackets and give it like this : inputtext="test". If you use the squared brackets angular2 will expect a variable and will try to map to it, which will give you undefined.

Also note that when you define a property if the variable in your controller has the same name as the property you expose you can use the short form :

properties: ['inputtext']

answered Aug 29, 2015 at 10:37

Arnaud Boeglin

7736 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GaryB96 Over a year ago

still no real documentation on properties. this was a real help!

BrettAHale · Accepted Answer · 2015-08-28 20:40:48Z

2

template: '<input-component [inputtext]="\'test\'"></input-component>'

test in your code is an undefined variable. Wrap it with quotes and it should work.

answered Aug 28, 2015 at 20:40

BrettAHale

8101 gold badge6 silver badges14 bronze badges

1 Comment

Kokodoko Over a year ago

This results in the error: 'Can't bind to 'inputtext' since it isn't a known property of 'input-component'

Collectives™ on Stack Overflow

Angular2 : passing property to nested component

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related