0

Updated

Answer

I've just found out what happened. I have to load the script pollyfills after systemjs. Well, this is an known issue of the router:

Concat/Load Order

'node_modules/systemjs/dist/system.src.js',
'node_modules/angular2/bundles/angular2-polyfills.js'

Problem

I am trying to use my own component library in my app. After I put the component under a page inside a router component, the component's title decorated with @Input doesn't show up:

I need it renders the title properties inside the page.

PS:

  • I see this one but it doesn't fit in my case.

  • @Input: link

Dependencies

{
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
}

Component

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'test',
    template: `
            OK MAN PLZ WORK
            {{title}}
    `
})
export class Test {
    @Input() title: string;
}

Container

import {Component} from 'angular2/core';

import {Test} from './test'

@Component({
    selector: 'container',
    directives: [Test],
    template: `
    <test title="test"></test>
    `
})
export class Container {

}

Boot

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

import {Container} from './container;

@Component({
    selector: 'app',
    directives: [ROUTER_DIRECTIVES],
    template: `
        <router-outlet></router-outlet>
    `
})
@RouteConfig([
    { path: '/', component: Container, name: 'Container'}
])
class AppComponent {}
bootstrap(AppComponent, ROUTER_PROVIDERS);
Community
  • 1
  • 1
Quy Tang
  • 3,929
  • 1
  • 31
  • 45

2 Answers2

1

In your code, title is an attribute:

<test title="test"></test>

You should use property binding:

<test [title]="test"></test>
Sasxa
  • 40,334
  • 16
  • 88
  • 102
  • Without `[..]` or `{{...}}` Angular ignores the attribute and it's a simple static DOM attribute handled by the browser only. – Günter Zöchbauer Feb 24 '16 at 12:15
  • well you are wrong, that's one way of data binding only. let take a look at [this](https://angular.io/docs/ts/latest/api/core/Input-var.html). – Quy Tang Feb 24 '16 at 12:21
  • @PeterTang your question doesn't tell what the expected behavior is so all we can do is guessing. – Günter Zöchbauer Feb 24 '16 at 12:25
  • Oh, I will edit it more clearly, thank @GünterZöchbauer – Quy Tang Feb 24 '16 at 12:27
  • @PeterTang Try if it's working with this suggestion, so we can rule out other causes. If it works, we can talk about alternative syntax' if you need it (; – Sasxa Feb 24 '16 at 12:32
  • `title="test"` is a shorthand syntax for `[title]=" 'test' "` if `title` is an input property. I don't particularly like this shortcut, because it really looks like we are assigning an HTML attribute (especially if the input property name is a common HTML attribute name like `title`!). But it does property binding. The only place I've seen this shorthand syntax mentioned is in a Savkin blog post: http://victorsavkin.com/post/119943127151/angular-2-template-syntax See the "Passing Constants" section. – Mark Rajcok Feb 24 '16 at 16:57
  • Okay, I see that it is mentioned in passing in the [Template Syntax](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding) dev guide: "If we forget the brackets, Angular treats the string as a constant and initializes the target property with that string. It does not evaluate the string!" (I found it by searching for the word `constant`.) – Mark Rajcok Feb 24 '16 at 17:01
  • Hi, I updated the question with the answer! Hope it will help anyone :). I spent all night to figure out what happen :'( – Quy Tang Feb 25 '16 at 03:10
1

This works for me. I received the test value in the title input. See this plunkr: https://plnkr.co/edit/dZSMbVnvoNRXSbiNFbQX?p=preview.

What is the expected behavior, you want that {{title}} displays "test"?

Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • yes, that's what i want. The page shows `loading...`, the console reports XHR error :( – Quy Tang Feb 24 '16 at 12:35
  • Failed to load resource: the server responded with a status of 404 (OK) angular2-polyfills.js:138 Error: XHR error (404 OK) loading https://run.plnkr.co/L3tGUqDykU61O2Cf/app/main.ts(…) – Quy Tang Feb 24 '16 at 12:39
  • I think that it's because of your base ref ;-) – Thierry Templier Feb 24 '16 at 12:40
  • You should update `` right after your ``. The id isn't the right one if you forked my plunkr... – Thierry Templier Feb 24 '16 at 12:42
  • well, I used the same `base` tag, and I didn't fork it. Is it the same with the url part plnkr.com/edit/`id` ? – Quy Tang Feb 24 '16 at 12:49
  • No, I don't think so. I get the id in the Source tab in the develop tools. Something under `run.plunkr.co`. Get the id from there and use it into in the base tag. – Thierry Templier Feb 24 '16 at 12:50
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104416/discussion-between-peter-tang-and-thierry-templier). – Quy Tang Feb 24 '16 at 13:02