Fork me on GitHub

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

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

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());

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]

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.