Angular 2 and reywood:publish-composite

angular
1

Hey!

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!

Server:

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 });
        }
    }]
});

Client:

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

@Component({
    selector: 'bookings-list',
    template,
    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 {
        Bookings.remove(booking._id);
    }

    ngOnDestroy() {
        this.bookingsSub.unsubscribe();
    }
}

Template:

<bookings-form></bookings-form>
<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: {{booking.date}}</span>
            <span class="guest col-xs-3">Guest: {{ ???? }}</span>
            <span class="">
              <button class="btn btn-danger btn-sm" (click)="removeBooking(booking)">X</button>
            </span>
        </li>
    </ul>
</div>
1 Like
2

Ok, i found a solutionā€¦ It is working with a template like this

<bookings-form></bookings-form>
<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: {{booking.date}}</span>
            <span *ngFor="let guest of guests | async" >
              <template [ngIf]="guest._id == booking.guestId">
                <span class="guest col-xs-3">Gast: {{guest.name}}</span>
              </template>
            </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>
            </span>
        </li>
    </ul>
</div>

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

3

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

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

4

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?

5

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?