igniteui-angular-sovn/src/lib/calendar/month-picker/month-picker.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<div
    *ngIf="isDefaultView"
    [@animateView]="activeView"
    (@animateView.done)="viewRendered($event)"
    class="igx-calendar__body"
    (swiperight)="previousYear()"
    (swipeleft)="nextYear()">

    <div role="rowheader" class="igx-calendar-picker">
        <div
            tabindex="0"
            class="igx-calendar-picker__prev"
            (click)="previousYear()"
            (keydown)="changeYearKB($event, false)"
            [ngStyle]="{'min-width.%': 25, 'left': 0}"
            role="button"
            [attr.aria-label]="'Previous Year ' + getPreviousYear()"
            data-action="prev">
            <igx-icon>keyboard_arrow_left</igx-icon>
        </div>
        <div [style.width.%]="100">
            <span
                tabindex="0"
                aria-live="polite"
                #yearsBtn
                (keydown)="activeViewDecadeKB($event)"
                (click)="activeViewDecade()"
                class="igx-calendar-picker__date">
                {{ formattedYear(viewDate) }}
            </span>
        </div>
        <div
            tabindex="0"
            class="igx-calendar-picker__next"
            (click)="nextYear()"
            (keydown)="changeYearKB($event)"
            [ngStyle]="{'min-width.%': 25,'right': 0}"
            role="button"
            [attr.aria-label]="'Next Year ' + getNextYear()"
            data-action="next">

            <igx-icon>keyboard_arrow_right</igx-icon>
        </div>
    </div>

    <igx-months-view [@animateChange]="yearAction" #months
                     (@animateChange.done)="animationDone($event)"
                     (@animateView.done)="viewRendered($event)"
                     [date]="viewDate"
                     [locale]="locale"
                     [formatView]="formatViews.month"
                     [monthFormat]="formatOptions.month"
                     (selected)="selectMonth($event)">
    </igx-months-view>
</div>
<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade (@animateView.done)="viewRendered($event)"
                [date]="viewDate"
                [locale]="locale"
                [formatView]="formatViews.year"
                [yearFormat]="formatOptions.year"
                (selected)="selectYear($event)">
</igx-years-view>