Angular ngx-kit  

Приветсвую всех участников и гостей сообщества Angular-RU. На данной странице вы найдете информацию об ngx-kit на русском языке.

Если вы активно работаете с Angular, то наверняка сталкивались с тем, что сторонний компонент не поддерживает какой-то функционал, работает неправильно или выглядит не совсем так, как того требует заказчик-дизайнер-бизнес.

Ngx-kit - это не классическая либа компонентов, а набор генераторов. Что дает возможность быстро добавить компоненты в проект, получив полный доступ к кастомизации.

@ngx-kit/core

Ядро - самостоятельный пакет, который содержит сервисы для упрощения кода сгенерированных компонентов.

@ngx-kit/collection

Коллекция — это набор генераторов кода, который существенно ускоряет работу с ядром. За несколько секунд вы можете добавить любой компонент и потом быстро его модифицировать под свои нужды. Ознакомиться со списком существующих модулей можно на сайте.

Особенности

• Поддержка AOT
• Поддержка серверного рендеринга
• Поддержка OnPush стратегии обнаружения изменений
• Генерация кода с помощью Angular CLI

Минимальные требования

• Angular ^6.0.0
• Angular-cli ^6.0.0

Руководство:

На демке показана быстрая установка пакетов, генерация кода дейт-пикера и его кастомизация:

Использование

Установка пакетов

ng add @ngx-kit/core

Генерация кода с помощью Angular CLI

Пример генерации модуля для кнопки:

ng g @ngx-kit/collection:ui-button my-button

В данном примере я использвал итоговое имя my-button, но оно может быть любым на ваше усмотрение. Что позволяет один и тот же шаблон генерировать несколько раз в рамках одного проекта и модифицировать его под разные нужды.

Подключение сгенерированного модуля

@NgModule({
  ...
  imports: [
    ...
    MyButtonModule,

Использование компонента

<button myButton color="primary">Let's do it!</button>

Модификация кода

Только сложная (и стабильная) логика хранится в [Core-пакете] (https://ngx-kit.com/core), поэтому вы можете любым образом изменять сгенерированные шаблоны и стили.

License

MIT