angular-material-app documentation
  1. Components
  2. ToolbarComponent

File

src/app/component/date-picker/toolbar/toolbar.component.ts

Metadata

encapsulation ViewEncapsulation.None
selector stbui-calendar-toolbar
styleUrls ./toolbar.component.scss
templateUrl ./toolbar.component.html

Index

Methods
Inputs
Outputs

Constructor

constructor()
Defined in src/app/component/date-picker/toolbar/toolbar.component.ts:22

Inputs

displayDates
Defined in src/app/component/date-picker/toolbar/toolbar.component.ts:21

Outputs

monthChange
Type : EventEmitter<number>
Defined in src/app/component/date-picker/toolbar/toolbar.component.ts:22

Methods

OnNext
OnNext()
Defined in src/app/component/date-picker/toolbar/toolbar.component.ts:30
Returns : void
OnPrev
OnPrev()
Defined in src/app/component/date-picker/toolbar/toolbar.component.ts:26
Returns : void 
import {
  Component,
  Output,
  Input,
  EventEmitter,
  ViewEncapsulation
} from '@angular/core';

@Component({
  selector: 'stbui-calendar-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ToolbarComponent {
  @Input() displayDates;
  @Output() monthChange: EventEmitter<number> = new EventEmitter<number>();

  constructor() {}

  OnPrev() {
    this.monthChange.emit(-1);
  }

  OnNext() {
    this.monthChange.emit(1);
  }
}
Copy
<div class="stb-calendar-toolbar">
  <button mat-icon-button (click)="OnPrev()">
    <mat-icon>chevron_left</mat-icon>
  </button>
  <div class="stb-calendar-toolbar-title-wrapper">
    <div class="stb-calendar-toolbar-title" *ngFor="let displayDate of displayDates">
      {{ displayDate | datePicker:'formatMonth' }}
    </div>
  </div>
  <button mat-icon-button (click)="OnNext()">
    <mat-icon>chevron_right</mat-icon>
  </button>
</div>
Copy

./toolbar.component.scss 

.stb-calendar-toolbar {
  display: flex;
  justify-content: space-between;
  height: 48px;
  &-title-wrapper {
    position: relative;
    overflow: hidden;
    height: 100%;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    width: 100%;
  }
  &-title {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    line-height: 48px;
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""