🍒 Desugar Meteor, Angular 2, RxJS 5, and ngrx

angular
1

This Google Slides Desugar Meteor, Angular 2, RxJS 5, and ngrx helps you have a deep understanding of Meteor, Angular 2, and ngrx and good practice.

Have fun learning! And feel free to comment.

3350×1884 231 KB

3354×1884 204 KB

2 Likes
2

Nice overview! Do you have a simple angular2-meteor example project featuring ngrx store and effects?

3

Not yet, but I will provide a simple demo soon when I get free time! : )

1 Like
4

UPDATED: New Observable based Meteor API release! No need to wrap manually.
Check 🎤 New Observable based Meteor API (beta) release!

5

Thanks @Hongbo_Miao. Looks really promising (no pun intended ;))

So I was wondering how you would use this to do a dynamic query that is reactive. So having reactive updates for a query that is not the entire published collection ( xyz.find({}) ) but rather a more specific query for which you don’t know the exact parameters up front?

6

So take this for example,

  loadMessages(chatId: string, messageLimit: number): Observable<Message[]> {
    return Observable.create(observer => {
      this.subscribe('messages.messages', chatId, messageLimit, () => {
        this.autorun(() => {
          const messages = Messages.find({ chatId }, { sort: { timestamp: 1 }}).fetch();
          observer.next(messages);
        });
      });
    });
  }

I call loadMessages again when need, and give a different chatId or messageLimit.

Note new released Observable based Meteor API (beta) will be different. No need to do those wrapping things by ourselves. Make sure you have a look.

1 Like
7

Hi @Hongbo_Miao Do you have any example of service using https://github.com/Urigo/meteor-rxjs

8

What is meant by “Desugar”? I do not understand and duckduckgo reveals no answers.

9

sorry, I don’t have myself now… It should be very similar. U can try, if u get stuck, you can post the problem here

10

say the tech like magic, “desugar” just means let us know how it really works. Hope I use the correct word, lol

11 
@Injectable()
export class NotificationDataService extends MeteorComponent implements OnInit {
    notifications: Observable < Notification[] > ;
    data: Notification[];
    notificationSub: Subscription;

    constructor(private ngZone: NgZone) {
        super();
    }
    ngOnInit() {
    }

    subscribeNotifications(userId: string): Observable < Notification[] >
        let notificationsOptions = {
            sort: { updatedAt: -1 }
        };

        this.notificationSub = MeteorObservable
            .subscribe('notifications', notificationsOptions, userId)
            .subscribe(() => {
                this.notifications = Notifications.find({ notificationToId: userId },
                        notificationsOptions)
                    .debounce(() => Observable.interval(50))
                    .zone();
                this.notifications.subscribe(data => {
                        this.data = data.sort(function(a, b) {
                            if (a.updatedAt > b.updatedAt) {
                                return -1;
                            } else if (a.updatedAt < b.updatedAt) {
                                return 1;
                            }
                            return 0;
                        });
                    }, (error) => {

                    });

                console.log("in service this.notifications object" + this.notifications);
            }); 
    }
    // ngOnDestroy() {
    //     this.notificationSub.unsubscribe();
    // }
    getData(): Notification[] {
        return this.data;
    }
    getSubscription(){
        return this.notifications;
    }
}

Step 1: Call subscribeNotifications with current userid
Step 2: Call getSubscription() or getData() - both are null.

Is this the right way to use services? Where to subscribe for the Subscription i.e in service or in component? Why i am not getting any results?

Sorry for lot of questions.

Update: i was accessing the service in component like this:

this.autorunSub = MeteorObservable.autorun().subscribe(() => {
                this.ngZone.run(() => {
                    this.notifications = this.notificationDataService.subscribeNotifications(userId);
                    if(this.notifications){
                        this.notifications.subscribe(data => {
                            this.data = data.sort(function(a, b) {
                                if (a.updatedAt > b.updatedAt) {
                                    return -1;
                                } else if (a.updatedAt < b.updatedAt) {
                                    return 1;
                                }
                                return 0;
                            });
                        }, (error) => {

                        });
                    } else
                    console.log("notification not ready");                       
                });
            });
12

Hi @Urigo is there a demo somewhere to show how to use new meteor-rxjs with Angular 2 Service? thanks!

1 Like
13

not sure… do you think it could fit into Socially?
Where?

14

Hi @Urigo/@Hongbo_Miao,

If you have an example that will be sufficient.

15

Hmm, basically all server related codes and app states can be moved to Service. But will be some work.

For a small demo, @dotansimha definitely can create a demo faster than me, since he contributes on meteor-rxjs a lot.