Migrate the main Blaze Template

Note: If you skipped ahead to this section, click here to download a zip of the tutorial at this point.

So let's create a new Component, named ListRedirectorComponent - this Component will find a default list, and redirect to it - we will use it as a default route (/) later.

8.1 Added ListRedirector component client/imports/components/list-redirector.component.ts

import {Component} from "@angular/core";

import {Router} from "@angular/router";

import {Meteor} from "meteor/meteor";

import {Lists} from "../../../imports/api/lists/lists";

@Component({

    template: 'Loading...'

})

export class ListRedirectorComponent {

    constructor(private router: Router) {

        Meteor.autorun(() => {

            if (Lists.findOne()) {

                router.navigate(['/lists', Lists.findOne()._id]);

});

Improve this code

We are looking for a one record of a todo list, and when we have it - we will redirect to the /lists route when we have it.

In this point, we still does not have a Meteor subscription and our Lists collection will be empty - don't worry - we will fix it soon.

We also used Tracker.autorun to run that code when we get the actual data from the collection.

And let's add the new Component into the NgModule:

8.2 Added list redirector for the module client/imports/app.module.ts

import {MainComponent} from "./main.component";

import {routing} from "./app.routes";

import {ListShowComponent} from "./components/list-show.component";

import {ListRedirectorComponent} from "./components/list-redirector.component";

@NgModule({

    // Components, Pipes, Directive

    declarations: [

        MainComponent,

        ListShowComponent,

        ListRedirectorComponent

],

    // Entry Components

    entryComponents: [

Improve this code

And now let's add it as default route to our routes file:

8.3 Added list redirector route as default route client/imports/app.routes.ts

import {ModuleWithProviders} from '@angular/core';

import {Routes, RouterModule} from '@angular/router';

import {ListShowComponent} from "./components/list-show.component";

import {ListRedirectorComponent} from "./components/list-redirector.component";

const appRoutes: Routes = [

    {path: '', component: ListRedirectorComponent},

    {path: 'lists/:_id', component: ListShowComponent}

];

Improve this code

Now, in order to get data in the collection, let's add a Meteor Subscription to the data:

8.4 Added data subscription on the main component client/imports/main.component.ts

import '/imports/startup/client';

import {Component, OnInit} from "@angular/core";

import {MeteorObservable} from "meteor-rxjs";

@Component({

  selector: 'app',

  template: '<router-outlet></router-outlet>'

})

export class MainComponent implements OnInit {

  constructor() {

  ngOnInit() {

    MeteorObservable.subscribe("lists.public").subscribe();

    MeteorObservable.subscribe("lists.private").subscribe();

Improve this code

We used MeteorObservable which is an implementation of Meteor that uses RxJS, so we subscribe the data from Meteor subscription, and the return value of it is an RxJS Observable object.

Then we use subscribe() again in order to run the actual logic and register to the data subscription.

The RxJS Observable in this case, called when the Meteor Subscription is in "ready" state!

So now our default Component redirects to one of the lists page when it's loaded - let's continue!

Blaze to Angular 2 Migration

https://github.com/dotansimha/angular2-blaze-migration-tutorial

Migrate the main Blaze Template