File

src/app/panel/panel.component.ts

Description

The panel component

Metadata

selector app-panel
styleUrls panel.component.scss
templateUrl ./panel.component.html

Index

Inputs
Outputs

Constructor

constructor()

Inputs

opened

The panel state.

Type: boolean

Default value: false

title

The panel title.

Type: string

Outputs

toggle

The panel toggle handler.

$event type: EventEmitter<any>
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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""