Angular 2 - layout component

2
votes

I'm working in big project and faced with one issue. It has few pages without template (I mean some code which wraps main content, such as nav-bar and footer) and many other pages with layout. Unregistered user cannot access to layouted page. Firstly he should login on page without layout and then he will be able to see main content with layout.

The main concept is to navigate between pages with routes and wrap this pages with layout if they requires it. So when some component called, it wraps itself with layout calling some kind of "parent component"

RootComponent is very simple:

Component({  
    selector: 'my-app',
    template: `<router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES],

})

export class RootComponent { 

    constructor(){     
    }

}

All magic should become from routed component. Also I attached img with navigation and pages dependencies.

Can somebody write simple example of application?

enter image description here

1
angulartypescript
GOD, I found an answer. It calls Transclusion. Good guide can be read here: toddmotto.com/transclusion-in-angular-2-with-ng-content - dantey89

1 Answers

0
votes

This is exactly what the new ngModule was designed for. Using it you can create an AppModule that encompasses your main app and a LoginModule that encompasses the login components. See https://angular.io/docs/ts/latest/api/core/index/NgModule-decorator.html