Angular 2 and reywood:publish-composite



I am new to Meteor and my fist project is to build a simple booking app.
So far the app has just two simple collections one containing the bookings and one containing the guests (linke an address book). Each booking is referencing a particular guest from the guests collection.

Now I would like to display the bookings including the name of guest belonging to this booking.
After doing some research I decided to use the reywood:publish-composite package to do this kind of join. That works fine but I have no idea how to reference the guest name in my template using Angular 2 and I did not find any examples doing something similar.

I hope you can help me with this, I will attach my code… Thanks!


import { Meteor } from 'meteor/meteor';

import { Guests } from '../../../both/collections/guests.collection';
import { Bookings } from '../../../both/collections/bookings.collection';

Meteor.publishComposite('bookings', {
    find: () => {
        return Bookings.collection.find();
    children: [{
        find: (booking) => {
            //  console.log(booking)
            return Guests.collection.find({ _id: booking.guestId });


import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import { MeteorObservable } from 'meteor-rxjs';

import { Bookings } from '../../../../both/collections/bookings.collection';
import { Booking } from '../../../../both/models/booking.model';

import template from './bookings-list.component.html';
import style from './bookings-list.component.scss';

    selector: 'bookings-list',
    styles: [style]
export class BookingsListComponent implements OnInit, OnDestroy {
    bookings: Observable<Booking[]>;
    bookingsSub: Subscription;

    ngOnInit() {
        this.bookingsSub = MeteorObservable.subscribe('bookings').subscribe();
        this.bookings = Bookings.find({}).zone();

    removeBooking(booking: Booking): void {

    ngOnDestroy() {


<div class="row bookings-list">
    <ul class="list-group">
        <li *ngFor="let booking of bookings | async" class="list-group-item">
            <span class="date col-xs-3">Date: {{}}</span>
            <span class="guest col-xs-3">Guest: {{ ???? }}</span>
            <span class="">
              <button class="btn btn-danger btn-sm" (click)="removeBooking(booking)">X</button>

1 Like

Ok, i found a solution… It is working with a template like this

<div class="row bookings-list">
    <ul class="list-group">
        <li *ngFor="let booking of bookings | async" class="list-group-item">
            <span class="date col-xs-3">Datum: {{}}</span>
            <span *ngFor="let guest of guests | async" >
              <template [ngIf]="guest._id == booking.guestId">
                <span class="guest col-xs-3">Gast: {{}}</span>
            <span class="guest col-xs-4">Gast: {{booking.guestId}}</span>
            <span class="">
              <button class="btn btn-danger btn-sm" (click)="removeBooking(booking)">X</button>

But I wonder if this is really the way you do it?! Or is there a more elegant option?


Well you could use the collection-helpers package and use it as your domain model. This makes resolving references quite easy from the template:

Bookings helper:
guest: () { return Guests.findOne(this.guestId) }


I tried it with the package dburles:collection-helpers before…

But I didn’t work with angular and typescript for me.
All I have to do is install the package using “meteor add dburles:collection-helpers” right?

When I try to use a helper my application is crashing and the terminal displays the following message:

both/helpers/bookings.collection-helper.ts (7, 10): Property ‘helpers’ does not exist on type ‘Collection’.

I wonder if I have to include any typings for typescript and that is the problem, do you have any idea?


How did you install that Package in your Angular application? can you send me step by step action because i’m an beginning stage of meteor developing?