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>

Is the question about can I or should I. You can pass object property. — Chandermani
– Chandermani, Commented Oct 31, 2015 at 14:11

TGH · Accepted Answer · 2016-04-19 03:39:00Z

26

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

edited Apr 19, 2016 at 3:39

answered Oct 31, 2015 at 19:40

TGH

39.4k13 gold badges106 silver badges140 bronze badges

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

2 Comments

Tirinoarim Over a year ago

Are there any versions of Angular2 where this is known to be bugged (i.e. 2.1.0)? If in my parent I have... <rabbit-exchange [exchange]="exchange.name"></rabbit-exchange> and my child... <div class="small">{{exchange}}</div> then all works fine. If I swap to <rabbit-exchange [exchange]="exchange"></rabbit-exchange> and my child... <div class="small">{{exchange.name}}</div> I get an error... Cannot read property 'name' of undefined

Tirinoarim Over a year ago

Finally figured it out. In the child, use {{exchange?.name}}. Wasnt this handled for you in Angular1?

John Bernardsson · Accepted Answer · 2016-03-27 10:45:22Z

There is no problem on doing it. You can choose both syntaxes:

@Component({
    selector: 'my-component',
    inputs: ['item: item']
})
export class TodoItem {
    item: { title: string, state: boolean };
}

or

@Component({
    selector: 'my-component'
})
export class TodoItem {
    @Input() item: { title: string, state: boolean };
}

and the binding:

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

Something you need to have in mind though, is that when passing an object this way, you are passing a reference to the object. This means that any change you make to the object in the "child" Component, will be reflected in the "parent" Component object:

export class TodoItem implements OnInit {

    ngOnInit() {
        //This is modifying the object in "parent" Component,
        //as "this.item" holds a reference to the same "parent" object
        this.item.title = "Modified title";
    }

}

The exception to this is if you assign a different object. In that case it won't reflect in "parent" Component, as it is no longer the same object reference:

export class TodoItem implements OnInit {

    ngOnInit() {
        //This will not modify the object in "parent" Component,
        //as "this.item" is no longer holding the same object reference as the parent
        this.item = {
            title: 'My new title',
            state: false
        };
    }

}

Collectives™ on Stack Overflow

Angular 2, passing full object as parameter

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related