Angular 2, how to render a child component

[Warren Strange]

I am probably not groking how this is supposed to work. Let's consider 

I have a todo-list component that maintains a list of todo-items. I can iterate over that list like so:

<ul >
<li *ng-for="#todo of todoService.items">
My todo item is {{todo.textvalue}}  isDone {{todo.isDone}}
</li>
</ul>

Now what if "todo-item" is itself a component.

I want to render the component value of todo, Something like:

<ul >
<li *ng-for="#todo of todoService.items">
  <todo-item  #todo></todo-item>
</li>
</ul>

What I can't get to work is to reference the "todo" component value. It basically just instantiates a brand new todo-item and does not use the todo-item from my parent's todo-item list (hope that makes sense).

I have tried a bunch of different combinations but no luck. Am I doing it wrong? 

[Sander Elias]

Hi Warren,

The # is kind of an ‘export/assignTo’
did you try:

  <todo-item [todo]="todo">...

Regards
Sander

​

[Warren Strange]

That  does not seem to work

Isn't that syntax saying "set the property todo on the component todo-item to the value todo"? 

Which is not really what I want. 

I want the iteration variable "todo" rendered as its *component* value (i.e. as described by it's @View annotation).

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/mczJbncve28/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

I don't have an working ng2 at hand right now.

If you get the literal text "todo" then this makes sense to me:

<todo-item [todo]="{{todo}}">...

Is there an plunk with an working alpha27 already available?

Regards

Sander

[Warren Strange]

I am using Dart, so no plunker. Code sample is : https://github.com/wstrange/angular2_todo_dart/blob/component-test2/lib/todo_list.html 

The thing is - that syntax does not make sense to me.  

[foo]="bar" 

Is for setting a *property* called foo, right?   

There must be an example somewhere of iteration over a list of *components* and then rendering those components in the list (not instantiating new components...)

Or am I fundamentally missing the point of angular2?

I guess I can create yet another view component (lets call it todo-item-view), and then inject my "todo-item" into that view:

<todo-item-view [todo-item]="todo"> ... 

But that seems like extra boilerplate code for no good reason. 

--