The first directive we will overview is the accordion directive. Accordion allows you to create a different panel of content that can be displayed independently by clicking its respective header.
We will use the form we made back in Chapter 9, Advanced Forms in Angular, which allows the user to add movies in the Marvel Cinematic Universe, to experiment with accordion. The goal here is to have one panel for the form and another panel for the enumeration of the movies.
Let's start by studying the minimal HTML needed to have a Bootstrap accordion, which is shown as follows:
<ngb-accordion> <ngb-panel> <template ngbPanelTitle> <span>Mastering angular X Bootstrap</span> </template> <template ngbPanelContent> Some deep insights </template> ...
