We've named our component class (which leverages NGB's collapse component) NgbCollapseComponent—but where does this code live? Well, we need to create a new directory and two new files within that directory just like we did when we created our playground component. Yes—we created three files for our playground component, but we'll be skipping the CSS file for NgbCollapseComponent. 

First, create a directory called ngb-collapse. Within that new directory, create a file named ngb-collapse.component.ts and add the following code in it:

import { Component } from '@angular/core';
 
@Component({
  selector: 'ngb-collapse',
  templateUrl: './ngb-collapse.component.html'
})
export class NgbCollapseComponent {
  public isCollapsed = true;
}

As you can see, we've not defined a styleUrls array, which is why we don't require a file for it (which we would have named something like ngb-collapse.component.css if we wanted this component to have styling). For the purposes of experimenting with the NBG collapse component, we only care about creating a component class file and its template file.

The other thing of interest to us in our component class file is the isCollapsed property. We can, of course, name it whatever we want, but the important thing is that it is declared and is initially set to true. We're going to use this property by binding its value to the ngbCollapse attribute within our template file. Doing so will cause a part of our component template to be either collapsed (hidden) or expanded (displayed). Note that I emphasized that our targeted content within our component will either be hidden or displayed, as opposed to being either added to or removed from the DOM. If our content is hidden (that is, non-visible), it is still in the DOM. This is because the NGB collapse widget does not function as a structural directive. It achieves its hide/show functionality via attribute binding.

Let's now take a look at the third file, the component template for our 
NgbCollapseComponent class.