Angular2 Data binding with data from service

Question

I have this component

@Component({
    templateUrl: './app/component/template/actualstate.template.html',
    styleUrls: ['./app/component/style/actualstate.style.css'],
    pipes: [MomentPipe, CapitalizePipe]
})
export class ActualStateComponent implements OnInit {
    public room: Room;

    constructor(private roomService: RoomService) {

        roomService.roomSelected$.subscribe(room => this.onRoomSelected(room));
    }

    onRoomSelected(room: Room) {
        this.room = room;
        console.log("room", room);
    }
}

and this other component

@Component({
    templateUrl: './src/admin/template/admin.template.html',
    styleUrls: ['./src/admin/style/admin.style.css'],
    providers: [UserService]
})
export class AdminComponent{

    constructor ( private roomService: RoomService) {
    }

    onClick () {

            this.roomService.selectRoom("","");
            this.router.navigate(['ActualState']);
        }
    }
}

, this service :

@Injectable() 
export class RoomService {

    private route_room = "public/mock/room.json";
    public roomSelected$: EventEmitter<Room>;

    constructor (private http: Http) {
        this.roomSelected$ = new EventEmitter();
    }



    public selectRoom (subdomain: string, id: string) {
           // pick the right room
           let room = ...
           this.roomSelected$.emit(room);

    }

    private handleError (error: Response) {
        return Observable.throw(error.json().error || 'Server error');
    }
}

And this template :

<div class="actual-state" *ngIf="room">
<h3>Salle {{ room.name }}
</h3>
</div>

The purpose is : Admin component (user click on some button) -> Listener OnClick calls a method on service roomService -> roomService emit an event (that is public) -> appComponent listen to this event (.subscribe)

I have no clue why this is not working. The <h3> is never showing .. even though the console.log(room) display something in the console...

How does this data binding working ? Because it just looks like data are not two-way bound ...

EDIT : i understood the problem, it was related to the routing i made. in fact i did'nt understand the fact that component of a route is destroyed when you change the route

Günter Zöchbauer · Accepted Answer · 2016-02-22 15:02:52Z

2

I guess you need to subscribe

return this.http.get(this.route_room)
                    .map(res => res.json())
                    .do(data => {
                        this.roomSelected$.emit(data);
                    })
                    .subscribe(value => {})
                    .catch(this.handleError);

answered Feb 22, 2016 at 15:02

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

8 Comments

julio Over a year ago

@julestruong It is actually more complicated than that, i edit my code

Günter Zöchbauer Over a year ago

I saw your edit but can't see why it is now more complicated. Have you tried my suggestion? Do you get any error?

julio Over a year ago

Where should i subscribe then ? I'm not waiting for a http request to be executed, i'm waiting for some user events , in this case a click

Günter Zöchbauer Over a year ago

What's the this.http.get(...) code then about in your question when it's not related to your problem?

julio Over a year ago

Forget the http.get code , i've copied pasted the wrong code

|

Collectives™ on Stack Overflow

Angular2 Data binding with data from service

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related