KoliBri Angular Adapter (v18)

contributors

This package provides an Angular adapter for KoliBri components, making them easily usable in Angular applications.

Installation

npm install @public-ui/angular-v18
pnpm add @public-ui/angular-v18

Usage

With NgModule (Traditional)

import { NgModule } from '@angular/core';
import { KoliBriModule } from '@public-ui/angular-v18';

@NgModule({
    imports: [KoliBriModule],
    // ...
})
export class AppModule {}

With Standalone Components (New)

import { Component } from '@angular/core';
import { KolButton } from '@public-ui/angular-v18';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [KolButton],
    template: ` <kol-button _label="Click me!"></kol-button> `,
})
export class AppComponent {}

Available Components

All KoliBri components are available as standalone components. Here's how to use them:

import { KolButton, KolInputText, KolHeading } from '@public-ui/angular-v18';

@Component({
  // ...
  imports: [KolButton, KolInputText, KolHeading],
})

Migration from NgModule to Standalone

If you're migrating from the NgModule approach to standalone components:

Remove the KoliBriModule import from your NgModule
Import the specific components you need directly
Add them to your component's imports array
Make sure your component is marked as standalone: true

Example migration:

// Before (NgModule)
import { KoliBriModule } from '@public-ui/angular-v18';

@NgModule({
    imports: [KoliBriModule],
})
export class AppModule {}

// After (Standalone)
import { KolButton } from '@public-ui/angular-v18';

@Component({
    standalone: true,
    imports: [KolButton],
})
export class AppComponent {}

Browser Support

This package supports all modern browsers that are supported by Angular 18.

Customize tokens with your own theme as described in the default theme README.

License

EUPL-1.2

JSPM

@public-ui/angular-v18

Package Exports

Readme