using Angular2 typescript component inside another navigated component

Question

I have two Angular2 components, a "Main" and "Another". From "Main", i'm navigating to "Another" which in its template has references to other components such as following template example:

<div>
    Some other templates and HTML...
    <person>Loading person...</person>
</div>

The issue is that the person component has to be bootstrapped if used in that way, however bootstrapping it will cause the selector match error. This makes sense as the HTML template hasn't rendered yet.

How is it possible to achieve this?

Update

Here is a sample code:

Main

import {Component, provide} from 'angular2/core';
import {RouteConfig, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router';

import {Another} from './Another';

@RouteConfig([
    { path: '/Another', name: 'Another', component: Another}
])
@Component({
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS],
    selector: 'Main',
    template:
    '<div>
        <button type="button" (click)="navigate()">Navigate</button>
        <router-outlet></router-outlet>
    </div>'
})
export class Main {
    constructor(private _router: Router) { }

    navigate() {
        this._router.navigate(['Another']);
    }
}

Another

import {Component} from 'angular2/core';

@Component({
    selector: 'Another',
    template:
    '<div>
        <h1>i'm another!</h1>

        <!-- how do I use this here? -->
        <person>Loading person...</person>
    </div>'
})
export class Another {

}

Person

import {Component} from 'angular2/core';

@Component({
    selector: 'person',
    template:
    '<div
        <h1>i'm person!</h1>
    </div>'
})
export class Person {

}

Again, if I bootstrap person at root component i'll get 'selector didn't match element' error.

Update 2

Adding directives: [Person] to "Another" component will result in following error: "Expected to not be in Angular Zone, but it is!", but the template for 'person' does render.

Same problem here but when I dynamically render another component into my root component. Have you find a solution ? — Christophe Gigax
– Christophe Gigax, Commented May 2, 2016 at 7:14

Vadim Sentiaev · Accepted Answer · 2016-04-20 19:46:23Z

0

If I properly understand what you want to do, try this.

import {Component} from 'angular2/core';
import {Person} from 'path-to-person-component';

@Component({
    selector: 'Another',
    template:
    '<div>
        <h1>i'm another!</h1>

        <!-- how do I use this here? -->
        <person>Loading person...</person>
    </div>',
    directives: [Person]
})
export class Another {

}

answered Apr 20, 2016 at 19:46

Vadim Sentiaev

7614 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3794166 Over a year ago

It does render now, but also throws this error "Expected to not be in Angular Zone, but it is!"

Christophe Gigax Over a year ago

Same problem here, have you find any solution ?

Vadim Sentiaev Over a year ago

@ChristopheGigax Person component is inside About component in plunker I've provided

Christophe Gigax Over a year ago

Thanks ! All is about the NgModule, right ? it centralize all declarations, so it can manage properly components

Collectives™ on Stack Overflow

using Angular2 typescript component inside another navigated component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related