angular4-collapsible/collapsible-header.component.ts

Angular 2 / 4 Materialize CSS collapsible components

import { Component, HostListener } from '@angular/core';

import { CollapsibleEventService } from './collapsible-event.service';

@Component({
    selector: 'collapsible-header',
    template: `<ng-content></ng-content>`,
    styles: [`
        :host {
            display: block;
            cursor: pointer;
            min-height: 3rem;
            line-height: 3rem;
            padding: 0 1rem;
            background-color: #fff;
            border-bottom: 1px solid #ddd;
        }
    `]
})
export class CollapsibleHeaderComponent {

    constructor(private eventService: CollapsibleEventService) { }

    @HostListener('click')
    click() {
        // console.debug('CollapsibleHeader::click()');
        this.eventService.toggleCollapsibleItem();
    }

}