Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Flag New Form field Highlight Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation
Icons
Interface and examples language
English
Version
20.2.0
Schematics

As part of the Koobiq design system, a set of schematics is provided — CLI tools designed to automate library installation, perform migrations, and update components in Angular projects.

Available Schematics
ng-add

Installs the @koobiq/components library and adds all necessary dependencies.

When to use: When adding the library to a project for the first time.

ng add @koobiq/components
new-icons-pack

Updates icon prefixes and names required to migrate from version 7.2.x and below to version 8.0.2 and above.

When to use: After upgrading the @koobiq/icons library to version 8.0.2 or later.

ng generate @koobiq/components:new-icons-pack
css-selectors

Updates deprecated CSS selectors (typography and color naming) according to the new design system conventions.

When to use: After upgrading the @koobiq/components library to version 18.6.0 or later.

ng generate @koobiq/components:css-selectors
deprecated-icons

Removes or replaces icons marked as deprecated.

ng generate @koobiq/components:deprecated-icons
empty-state-size-attr

Updates size attribute names and values for the Empty state component in both HTML and TypeScript templates.

When to use: After upgrading the @koobiq/components library to version 18.22.0 or later.

ng generate @koobiq/components:empty-state-size-attr
loader-overlay-size-attr

Updates size attribute names and values for the Overlay component in both HTML and TypeScript templates.

When to use: After upgrading the @koobiq/components library to version 18.22.0 or later.

ng generate @koobiq/components:loader-overlay-size-attr
icons-replacement

Replaces icon names with new ones.

When to use: after updating the @koobiq/icons library version to 11.0.0 and higher.

How to run a schematic
  • Make sure Angular CLI is installed:
ng version
  • Run the desired schematic using the ng generate command:
ng generate @koobiq/components:<schematic-name>
  • Some schematics support additional options. See the schema.json file inside the corresponding schematic folder.
Suggestions for improvement
If you found a mistake or want to improve the article, create an issue on GitHub.