Fork me on GitHub

Blaze to Angular 2 Migration

https://github.com/dotansimha/angular2-blaze-migration-tutorial
navigate_beforePrevious searchCode Diff Nextnavigate_next
mode_editImprove This Tutorial

Load Blaze Template

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

So now we get to the list page, but it's empty! we need to load the existing Blaze Template into our Component.

First, we need to use the Router parameter (in the URL) in order to get the ID of the list.

Let's do it:

9.1 Get the ID of the list from the router client/imports/components/list-show.component.ts 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {Component, OnInit} from "@angular/core";
import {ActivatedRoute, Params} from "@angular/router";
 
@Component({
    template: 'Hello ListShow!'
})
export class ListShowComponent implements OnInit {
    constructor(private currentRoute: ActivatedRoute) {
 
    }
 
    ngOnInit() {
        this.currentRoute.params.subscribe((params: Params) => {
            const listId = params['_id'];
        })
    }
}
Improve this code

And now we need to load the existing Blaze Template called App_body and with context.

9.2 Added blaze-template with it's context client/imports/components/list-show.component.ts 
2
3
4
5
6
7
8
9
10
11
12
 
14
15
16
17
18
19
20
21
22
23
24
import {ActivatedRoute, Params} from "@angular/router";
 
@Component({
    template: '<blaze-template *ngIf="templateContext" name="App_body" [context]="templateContext"></blaze-template>'
})
export class ListShowComponent implements OnInit {
    private templateContext: any;
 
    constructor(private currentRoute: ActivatedRoute) {
 
    }
...some lines skipped...
    ngOnInit() {
        this.currentRoute.params.subscribe((params: Params) => {
            const listId = params['_id'];
 
            this.templateContext = {
                main: "Lists_show_page",
                _id: listId
            };
        });
    }
}
Improve this code

We use App_body because the architecture of the To-do is to load this template and dynamically load a child template that comes from the main property of the Template context.

The context of the Template is it's this.data that Blaze developers already familiar with, and we use it to pass the child Blaze Template we want to load (Lists_show_page) and the _id of the choosen list.

Great, now we are missing only one step to make it work.

The Lists_show_page Template (imports/ui/pages/lists-show-page.js) loads the ID of the list from the FlowRouter, and now it can load it from the this.data object, so let's change it:

9.3 Changed the way of getting the list ID imports/ui/pages/lists-show-page.js 
11
12
13
14
15
16
17
import '../components/lists-show.js';
 
Template.Lists_show_page.onCreated(function listsShowPageOnCreated() {
  this.getListId = () => this.data._id;
 
  this.autorun(() => {
    this.subscribe('todos.inList', this.getListId());
Improve this code

We used an external Component, so we need to imports it's NgModule:

9.4 Imported the Blaze template component module into the app client/imports/app.module.ts 
4
5
6
7
8
9
10
 
22
23
24
25
26
27
28
29
import {routing} from "./app.routes";
import {ListShowComponent} from "./components/list-show.component";
import {ListRedirectorComponent} from "./components/list-redirector.component";
import {Angular2BlazeTemplateModule} from "angular2-blaze-template";
 
@NgModule({
    // Components, Pipes, Directive
...some lines skipped...
    // Modules
    imports: [
        BrowserModule,
        routing,
        Angular2BlazeTemplateModule
    ],
    // Main Component
    bootstrap: [MainComponent]
Improve this code

In this point - we have a fully working Angular 2 application that wraps the Blaze application!

In the next steps, we will start to migrate and rewrite our Blaze Templates.

navigate_beforePrevious searchCode Diff Nextnavigate_next
mode_editImprove This Tutorial