Angular 2 Components

The accordion component

The first component that we are going to build will be an accordion component. The accordion is composed from two components: the accordion wrapper and an accordion tab. Let's start implementing the accordion tab first.

Inside the components directory, create a new directory called accordion. Inside it, create the accordion-tab.ts file, and paste the following code:

[accordion-tab.ts] import { Component } from '@angular/core'; @Component({ selector: 'accordion-tab', styles: [` .accordion-tab { width: 500px; border: 1px solid black; border-collapse: collapse; } .accordion-heading { padding: 5px; background-color: lightblue; cursor: pointer; } `], template: ` <div class="accordion-tab"> <div class="accordion-heading">Accordion ...