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>
  <ng-content></ng-content>
</div>

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

.wrapper {
  border: 5px solid #236965;
}
h1 {
  background: #236965 url("https://tools.obyte.it/img/idrobyte/logo_sfera.svg") 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:

  <app-wrapper>
    <h1>Hello wrapped component!</h1>
  </app-wrapper>

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!