Angular 2 way for creating wrapper component

Question

In my angular 2 redux app for root component I use next template:

<div class="app">
  <custom-header></custom-header>
  <router-outlet></router-outlet>
  <custom-footer></custom-footer>
</div>

So, I have the same header and footer on every route. And I would like to create something like this for every app component: some container which will add some common styles for every page (for example: panel with custom title and page custom html). In React for this I could create next components:

const CustomWrapper = ({ title, sidebar, children }) => (
  <div>
    <h2>{title}</h2>
    { sidebar &&
      <div className="sidebar">{sidebar}</div>
    }
    <div style={{some condtitional styles}}>{children}</div>
  </div>
);

and then

const SidebarPage = () => (
  <CustomWrapper
    title="Title from state or"
    sidebar={<div>JSX template for sidebar</div>}
  >
    <div>JSX template for page content</div>
  </CustomWrapper >
)

and use SidebarPage for some route. So, CustomWrapper can be used for every page for same styling and has custom parts according to props and some conditions.

What is angular 2 way for this case?

chrispy · Accepted Answer · 2017-01-18 20:31:59Z

1

You can create Header and Footer components that take in @Inputs from the main component, or you can update them with services depending on the route you take.

@Component{}
export class Header implements OnInit {

    constructor(private myService: RouteChangedService){}

    ngOnInit(){
        this.myService.routeUpdated().subscribe(data => { this.updateView(data) } )
    }
}

In this manner you can have a constant header and footer like you had above:

<header></header>
<router-outlet></router-outlet>
<footer></footer>

And call routeUpdated on component instantiation to inform them of the new route and to update their views and logic accordingly. You may also be able to leverage the router to call these services based on route name, but I haven't done that myself.

answered Jan 18, 2017 at 20:31

chrispy

3,6321 gold badge14 silver badges19 bronze badges

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

6 Comments

qwe asd Over a year ago

I meant a little other functionality: this I already have and need wrapper only for content in <router-outlet></router-outlet> for setting common conditional styles.

chrispy Over a year ago

Hmm, in that case you could wrap the router-outlet in a div (or maybe apply the class directly?), then use ngClass with state variables from the parent component to drive the styles applied to the wrapper.

qwe asd Over a year ago

And how about conditional html? Can I use something like props.children from react in angular 2 (<custom-html>some othre html which rendered in a specified place</custom-html>)?

chrispy Over a year ago

A couple ways: *ngIf to conditionally display elements, or bind to <div [innerHtml]="your string">, where your string can change conditionally.

qwe asd Over a year ago

Thanks a lot, but I guess it's not best practise for angular 2. In react it looks more natural.

|

Collectives™ on Stack Overflow

Angular 2 way for creating wrapper component

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related