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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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]);
            }
        });
    }
}

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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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: [

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
1
2
3
4
5
6
7
8
9
10
import {ModuleWithProviders} from [email protected]/core';
import {Routes, RouterModule} from [email protected]/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}
];
 

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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();
  }
}

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!