Angular2 how to databind js object

Question

I have an object that will be dynamically changed when the server pushes new data, my object is like that:

rooms: [
{name: 'room1', users:
    [
        {id: 1, name: 'user1'},
        {id: 2, name: 'user2'}
    ],
name: 'room2', users:
    [
        {id: 3, name: 'user3'},
        {id: 4, name: 'user4'}
    ]
}]

and i need to generate this

<rooms>
    <room>
        <user>User1</user>
        <user>User2</user>
    </room>

    <room>
        <user>User3</user>
        <user>User4</user>
    </room>
</rooms>

I cant understand how a top component can pass the objets to the sub components with users and batabind on changed elements (rooms and users from websocket) externally in @component and class, i'm trying to do something like that:

<rooms>
    <room *ngFor='room in rooms'>
        <user *ngFor='users in users'>

You should just ass your array of rooms as input to your <rooms> component. That component would pass each room as input to the <room> component. And that component would pass each user of the room to the <user> component. Without any code, it's hard to understand what you don't understand. Note that your rooms array is wrong: it has a single object instead of two, with all its attributes repeated. — JB Nizet
– JB Nizet, Commented Jan 8, 2017 at 7:59
How can I change that object dinamically by an external event? I mean... The other class with the websocket or http pooling receives a new connected user and update the object with databinding to DOM? Thank you. — Augusto Will
– Augusto Will, Commented Jan 8, 2017 at 21:55

Aravind · Accepted Answer · 2017-01-08 09:31:17Z

1

Use the below code.

Your json has to be modified as

rooms:any[]= [
    {name: 'room1', users:
        [   {id: 1, name: 'user1'},
            {id: 2, name: 'user2'}
        ]},
    {name: 'room2', users:
        [   {id: 3, name: 'user3'},
            {id: 4, name: 'user4'}
        ]
    }];

HTML will look like

 <div>
      <h2>Hello {{name}}</h2>
      <div *ngFor="let room of rooms">
          {{room.name}}
          <div  *ngFor="let user of room.users">
                ID : {{user.id}} <br/>
                Name: {{user.name}}
          </div>

      </div>
    </div>

Live Demo

answered Jan 8, 2017 at 9:31

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

Comments

tomcat · Accepted Answer · 2017-01-08 11:02:36Z

0

Maybe you can try @ViewChild to get the data and @Input() to pass it.

edited Jan 8, 2017 at 11:02

answered Jan 8, 2017 at 10:57

tomcat

438 bronze badges

Comments

Jecfish · Accepted Answer · 2017-01-08 13:07:20Z

0

In your case, you should have at least 3 components. A rooms, room, user.

In your rooms component, your template may look like this:

<h1>rooms</h1>
<div *ngFor="let room of rooms">
    <room [data]="room"></room>
</div>

Then in your room component, your template may look like this:

<div>
   <h1>Room: {{ room.name }}</h1>
   <div *ngFor="let user of room.users">
       <user [data]="user"></user>
   </div>
</div>

In this example, your room component is expecting an @Input, like this:

export class RoomComponent {
    @Input('data')
    room: any;
}

Lastly, your user component may look like this

<div>
   {{ user.name }}
</div>

With class like this:

export class UserComponent {
    @Input('data')
    user: any;
}

Probably you can take a look at this tutorial: https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components

answered Jan 8, 2017 at 13:07

Jecfish

4,2211 gold badge22 silver badges16 bronze badges

1 Comment

Augusto Will Over a year ago

I need to add or remove user when they connect and disconnect, can I do that with another class with connection that push or splice the clients then databind to this controls

Collectives™ on Stack Overflow

Angular2 how to databind js object

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related