Angular 2, passing full object as parameter

Question

I studying angular 2 and I m having a problem.

In fact, actually, I pass each component property to the template like following :

import {Component, bootstrap, NgFor,NgModel} from 'angular2/angular2';
import {TodoItem} from '../item/todoItem';


@Component({
  selector: 'todo-list',
  providers: [],
  templateUrl: 'app/todo/list/todoList.html',
  directives: [NgFor,TodoItem,NgModel],
  pipes: [],
  styleUrls:['app/todo/list/todoList.css']
})
export class TodoList {

  list:Array<Object>;

  constructor(){
    this.list = [
      {title:"Text 1", state:false},
      {title:"Text 2", state:true}
    ];
  }
}



<todo-item [title]="item.title" [state]="item.state" *ng-for="#item of list"></todo-item>

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


@Component({
  selector: 'todo-item',
  providers: [],
  templateUrl: 'app/todo/item/todoItem.html',
  directives: [],
  pipes: [],
  styleUrls:['app/todo/item/todoItem.css']
})
export class TodoItem {

  @Input()
  title:String;

  @Input()
  state:Boolean;


}

I was wondering if I can pass the full object directly inside of the template with passing each property ?

<todo-item [fullObj]="item" *ng-for="#item of list"></todo-item>

Answer 1

Yes it is totally fine to pass the entire object as a property.

The syntax is the same, so just create a property for the entire object.

@Component({
  selector: 'my-component'
})
export class MyComponent{
  @Input() item;
}
<my-component [item]=item></my-component>

Here is an example: http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0