OlgniteLib

Важно! Библиотеку на данный момент можно использовать только на Аngular 17

Содержание

• Технологии
• Установка
• Модальное окно

Технологии

• TypeScript
• Angular
• RxJs

Установка

Установить npm-пакет можно с помощью команды:

$ npm i olgnite-lib

Модальное окно

Для корректной работы для начала необходимо добавить provideAnimations()

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration(), provideAnimations()]
};

app.component.ts

import { AfterViewInit, ChangeDetectionStrategy, Component, inject, OnDestroy, ViewContainerRef } from '@angular/core';
import { MODAL_EVENT_DIRECTIVE, ModalBaseService, ModalContainerProvider, ModalContainerService, ModalDialogContainerComponent, ModalEventDirective, ModalService } from 'olgnite-lib';
import { Subject, takeUntil } from 'rxjs';
import { TestModalComponent } from '../test-modal/test-modal.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    ModalDialogContainerComponent,
  ],
  providers: [
    ModalContainerProvider,
    ModalContainerService,
    { provide: ModalBaseService, useClass: ModalService },
    { provide: MODAL_EVENT_DIRECTIVE, useClass: ModalEventDirective }
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements AfterViewInit, OnDestroy {

  protected readonly modalService: ModalBaseService = inject(ModalBaseService);
  protected readonly container: ViewContainerRef = inject(ViewContainerRef);
  protected readonly modalBaseService: ModalBaseService = inject(ModalBaseService);
  protected readonly destroy$: Subject<void> = new Subject<void>();

  public ngAfterViewInit(): void {
    this.modalService.initialize(this.container);
  }

  public ngOnDestroy(): void {
      this.destroy$.next();
      this.destroy$.complete();
  }

  public openModal(): void {
    this.modalBaseService.openModal<TestModalComponent>(TestModalComponent)
      .pipe(
        takeUntil(this.destroy$)
      )
      .subscribe();
  }
}

app.component.html

<button (click)="openModal()">Open Modal</button>

test-modal.component.ts

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { ModalBaseComponent, ModalDialogWrapperComponent } from "olgnite-lib";

@Component({
    standalone: true,
    templateUrl: './test-modal.component.html',
    imports: [
        ModalDialogWrapperComponent
    ],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestModalComponent implements IModalComponent {

    public options!: IModalOptions;
}

test-modal.component.html

<modal-dialog-wrapper [options]="options">
    <h1>123</h1>
    <h1>123</h1>
    <h1>123</h1>
</modal-dialog-wrapper>