src/app/panel/panel.component.ts
The panel component
selector | app-panel |
styleUrls | panel.component.scss |
templateUrl | ./panel.component.html |
Inputs |
Outputs |
constructor()
|
Defined in src/app/panel/panel.component.ts:33
|
opened
|
The panel state.
Type:
Default value: |
Defined in src/app/panel/panel.component.ts:21
|
title
|
The panel title.
Type: |
Defined in src/app/panel/panel.component.ts:27
|
toggle
|
The panel toggle handler. $event type: EventEmitter<any>
|
Defined in src/app/panel/panel.component.ts:33
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
/**
* The panel component
*/
@Component({
selector: 'app-panel',
templateUrl: './panel.component.html',
styleUrls: ['./panel.component.scss']
})
/**
* @class PanelComponent
*/
export class PanelComponent {
/**
* The panel state.
* @typedef boolean
*/
@Input() opened: boolean = false;
/**
* The panel title.
* @typedef string
*/
@Input() title: string;
/**
* The panel toggle handler.
* @typedef EventEmitter<any>
*/
@Output() toggle: EventEmitter<any> = new EventEmitter<any>();
/**
* @constructor
*/
constructor() { }
}
<div class="panel panel-info" (click)="toggle.emit()">
<div class="panel-heading">
<h3>{{title}}</h3>
<span [ngStyle]="{'color':'#f7c51d'}" [hidden]="!opened">-</span>
<span [hidden]="opened">+</span>
</div>
<div class="panel-body" [ngClass]="{'active' : opened}">
<hr/>
<div class="panel-body__content">
<ng-content></ng-content>
</div>
</div>
</div>