Firebase - Retrieving a single object

Sorry for the long question. I have a list of events which I get like this:

export class HomePageComponent implements OnInit {

  events: FirebaseListObservable<EventModel[]>;

    private authService: AuthService,
    private router: Router,
    private db: AngularFireDatabase
  ) { = db.list('/events');

  ngOnInit() {


Events are displayed like this:

<md-card *ngFor="let event of events | async">
    <a [routerLink]="['event', event.slug]"><img class="event-img" src="" />{{ }}</a>

The event.component looks like this:

export class EventComponent implements OnInit {

  event: Object;
  name: String;

  constructor(db: AngularFireDatabase, route: Router) {

    const eventQuery = db.list('/events', {
      query: {
        orderByChild: 'slug',
        equalTo: 'event-name'
    }).subscribe(data => {
      this.event = data[0];


  ngOnInit() {


this.event is complete and the correct information is being queried. It looks like this:

Object {category: "category", description: "description", googleMap: "map", guests: Object, name: "Event name"…}
category: "category"
description: "description"
googleMap: "map"
guests: Object
name: "Event name"
slug: "event-name"
venue: "The venue"
$exists: function ()
$key: "-xxxxxxxx"
__proto__: Object

When I try to display the name {{}} I get an error

ERROR TypeError: Cannot read property 'name' of undefined
at Object.eval [as updateRenderer]

Additional question:

Since the event information already exists in HomePageComponent, can it be sent to EventComponent and used to display the event? Maybe this will avoid an additional database query.

1 answer

  • answered 2017-06-17 20:05 Sajeetharan

    Use safe operator ?

    <md-card *ngFor="let event of events | async">
        <a [routerLink]="['event', event?.slug]"><img class="event-img" src="" />{{ event?.name }}</a>