Компоненты для библиотек

Angular компонент

Этот пример рассчитан на Angular 15+ (standalone-компоненты).

Для демонстрации давайте создадим простой Angular компонент для Vanilla Calendar Pro. Создайте файл с именем vanilla-calendar.component.ts и скопируйте в него следующий код:

import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
import { Calendar, Options } from 'vanilla-calendar-pro';
 
import 'vanilla-calendar-pro/styles/index.css';
 
@Component({
  selector: 'vanilla-calendar',
  standalone: true,
  template: `<div #calendarRef></div>`,
})
export class VanillaCalendarComponent implements AfterViewInit {
  @Input() config?: Options;
  @ViewChild('calendarRef') calendarRef!: ElementRef<HTMLDivElement>;
 
  ngAfterViewInit() {
    const calendar = new Calendar(this.calendarRef.nativeElement, this.config);
    calendar.init();
  }
}

Затем импортируйте созданный компонент VanillaCalendarComponent в компонент, где вы планируете отображать календарь.

// ...
import { VanillaCalendarComponent } from './vanilla-calendar.component';
// ...

Добавьте его в массив imports standalone-компонента и используйте в шаблоне.

@Component({
  // ...
  imports: [VanillaCalendarComponent],
  template: `
    <!-- -->
    <vanilla-calendar />
    <!-- -->
  `,
})

Компоненту VanillaCalendarComponent можно передать любые атрибуты HTML, поддерживаемые тегом <div> (Angular автоматически передаёт их на хост-элемент), а также параметр config для настройки календаря.

template: `
  <!-- -->
  <vanilla-calendar [config]="{ type: 'multiple' }" class="thisIsMyClass" />
  <!-- -->
`,