In my previous post New .component(…) method in Angular 1.5 I shared a snippet to create a simple CollapsablePanel component using the new
.component() method available in Angular 1.5.
Now I’m simply showing you how to write the same component in Angular 2 and TypeScript.
.component method available in Angular 1.5.x simplify the creation of custom components (also knows as directives in the Angular world). If this were not enough to decide to use it, Angular 2 will use a similar syntax to create components so I really suggest you to take a look to this topic ;).
In the following snippet I create a simple collapsable panel ( powered by Bootstrap 4 alpha: Card ): the body of the panel is hidden or shown when user clicks the header bar.
In the second part of the tutorial, the xyzPanel directive just created will become a child of a new xyzAccordion directive.
Why? So far every panel was independent. But what should we do in order to manage a group of panels? And more concretely, how can we automatically close all the panels when a new one is opened?
One possible solution is:
wrap all the panels into a new directive that will expose a set of common methods, as show below.