0

I am trying to use templates with Angular2 and it is not working as expected. Here is what I have tried so far. Does anyone have any ideas or maybe another way that I could approach it?

First of all, I am using MEAN stack that express generates an index.html, nodejs creates the templates and angular is the app.

index.html

{includes header.tpl}
<scripts> ... </scripts>
<my-app> Loading AppComponent content here ...</my-app>
{includes footer.tpl}

Inside my header.tpl I have some directives that I would like angular app interpret them

header.tpl

<html> 
   <header> ... </header>
   <body>
       <div *ngIf='user.status === "new" '> ADDED THIS </div>
   ...

app.component.ts

import { Component, Inject } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: `<h1>Hello</h1> <div *ngIf='user.status === "new"'> ADDED THIS 2 </div>`,
})

export class AppComponent {

     public user:any = {};

     constructor(@Inject(ActivatedRoute) public activatedRoute: ActivatedRoute) {
          this.checkParams();
     }

    private checkParams() {
        this.activatedRoute.queryParams.subscribe((params: Params) => {
            if (!!params['status'] && params['status'] === 'new') {
                this.user.status = 'new';
                console.log('I am new');
            } else {
                console.log('I am NOT new');
                this.user.status = 'old';
            }
            console.log('user', this.user);
        });
    }
}

When I access my application by

domain.com?status=new

only shows 'ADDED THIS 2', but I also want to show 'ADDED THIS'. As you can see, 'ADDED THIS 2' is running inside <my-app> and 'ADDED THIS' outside.

So any idea? Thank you.

Doug E Fresh
  • 820
  • 8
  • 22
Kelyane
  • 467
  • 2
  • 7
  • 19

1 Answers1

0

It's pretty simple this won't work. The code of your header isn't inside the my-app tags, so Angular won't pick up on it of course.

Everything that you want to be rendered by Angular needs to be inside the root tags of you app or in a component of the app.

Maarten Tibau
  • 63
  • 7
  • Hi @Maarten Tibau, this option was already tested and didn't work too. – Kelyane May 22 '17 at 13:40
  • Yea, but inside of the `my-app` tags I would also think it won't work, because Angular doesn't use a template engine or anything. Maybe you would be able to solve it with some Webpack plugin, maybe something like this? [html-tpl-loader](https://www.npmjs.com/package/html-tpl-loader) – Maarten Tibau May 22 '17 at 13:53