Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating a Container Component in Angular 2 [Code Snippet]

DZone's Guide to

Creating a Container Component in Angular 2 [Code Snippet]

Juergen Gutsch needed a shared reusable component which turned out to be easier than expected. Check out these two code snippets that might just help you too.

· Web Dev Zone ·
Free Resource

Start coding something amazing with our library of open source Cloud code patterns. Content provided by IBM.

Creating such components was easier than expected. I anyway spent almost a whole day to find that solution, I played around with view and template providers, tried to access the template and to manipulate the template. I also tried to create an own structural directive.

But you just need to use the directive in the container component.

<nav>
  <div class="navigation pull-left">
    <ul>
      <!-- the menu items --->
    </ul>
  </div>
  <div class="pull-right">
    <ng-content></ng-content>
  </div>
</nav

That's all. You don't need to write any TypeScript code to get this working. Using this component is now pretty intuitive:

<div class="nav-bar">
  <app-navigation>
    <button (click)="printDraft($event)">print draft</button>
    <button (click)="openPreview($event)">Show preview</button>
  </app-navigation>
</div>

The contents of the - the buttons - will now be placed to the placeholder.

After spending almost a whole day to get this working my first question was: Is it really that easy? Yes, it is. That's all.

Maybe you knew about it. But I wasn't able to find any hint in the docs, on StackOverflow or in any Blog about it. Maybe this requirement isn't used needed often. At least I stumbled upon a documentation where ng-content as used and I decided to write about it. Hope it will help someone else.

Code something amazing with the IBM library of open source blockchain patterns. Content provided by IBM.

Topics:
typescript ,angular 2 ,web dev ,code snippet

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}