Prerequisite: Angular, Typescript, ng-template, ng-container

When I first start an Angular 2+ project, the first thing I look up for is a component library. I test some and then I choose a winner. Everything is great, I can focus on my business logic now and just use some already built components, like table, toogles, tabs, wizards, with a lot of built in functionality.

Usually, I use a component multiple times in my project, some of them even hundreds of times. But, at some point, I realise that the component that I am using is no longer satisfying my needs and, in time, I find a new one that is exactly what I need.

And now, comes the question. What should I do? To add the new component in my project which means to style it to look as similar to the old one, and to have two components for the same functionality or to just replace the old one with the new one. Obviously, the choice is to replace the old one with the new one. But what happens if I already used the component hundreds of times? The amount of work to replace it would be enormous.

That’s why, right after I choose the best library component, the first thing that I do, is to create wrappers around the most used components in my application. In this way, changing the library component is really easy and I also have to work only in one place and everything will change accordingly. Also, creating a wrapper will give me a lot of flexibility. Let’s assume that I need to style all tab’s in my app, or to add a new icon on every tab header. This would be quite easy, as I would have to change in one place, and it would change in every place that I use the component.

We will pass through an example of creating our Tab Wrapper Component based on NGXBootstrap.

We first install the ngx-bootstrap library and import TabsModule (https://valor-software.com/ngx-bootstrap/#/tabs).

NgxBootstrap tab component looks like this:

<tabset>
  <tab>
   <ng-template tabHeading>
     Heading
   </ng-template>
   <p>first tab content</p>
  </tab>
  <tab>
    <ng-template tabHeading>
       Heading 2
    </ng-template>
    <p>second tab content</p>
  </tab>
  <tab>
    <ng-template tabHeading>
       Heading 3
    </ng-template>
    <p>third tab content</p>
  </tab>
</tabset>

#javascript #programming #angular