Angular wrapper component

Angular wrapper component

Let’s talk about what is an Angular wrapper component. Sometimes we need to include our pages in another component that wrap them with some other functionalities (maybe a right nav or other side panels).

The simplest way I know to create a wrapper component is using a special angular directive tag <ng-content> to do content projection.

<div class="wrapper">
  <h1>Wrapper title</h1>

With a few styles to make sure the wrapper has been applied correctly.

.wrapper {
  border: 5px solid #236965;
h1 {
  background: #236965 url("") no-repeat;
  margin: 0;
  padding: 0 0 0 50px;
  background-size: 45px;
  line-height: 50px;
  color: white;
  font-family: Lato;

To use it you can simply include the html context in your component tag:

    <h1>Hello wrapped component!</h1>

Pay attenction to not use services in this wrapper or you’ll have this type of error when trying to change routing on page:

ObjectUnsubscribedError: object unsubscribed

Here a working widget:

Try it at home!

Be the first one to like this.
Please wait...

Leave a Reply

Thanks for choosing to leave a comment.
Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published.
Please do NOT use keywords in the name field. Let's have a personal and meaningful conversation.