CODEWITHSUNDEEP
angular
Augusto Will
Augusto Will

Reputation: 572

Angular2 how to databind js object

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'>

Upvotes: 0

Views: 101

Answers (3)

Jecfish
Jecfish

Reputation: 4189

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

Upvotes: 0

tomcat
tomcat

Reputation: 43

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

Upvotes: 0

Aravind
Aravind

Reputation: 41533

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

Upvotes: 1

Related Questions