Reusable Collapsible Widget in Angular

In this blog post I am going to share a collapsible widget created in Angular. This can be very helpful when you have a long form. You can break the form down into sections and then apply the collapsible component.

The main idea is to create a separate component that can then be added in any template. All you have to do is specify a title and the body like this:

<app-collapsible title="<some title>" [bodyTemplate]="<body template>"></app-collapsible>

The body template can be defined using the ng-template directive. The directive that helps us is the NgTemplateOutlet directive from angular/common. I am not going to repeat what’s already on the angular.io website but basically it Inserts an embedded view from a prepared¬†TemplateRef.

Here is the stackblitz demo.

link to source code.

Leave a Reply

Your email address will not be published. Required fields are marked *