@public-ui/angular-v18

KoliBri Angular Adapter (v18)

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:

1. Remove the KoliBriModule import from your NgModule
2. Import the specific components you need directly
3. Add them to your component's imports array
4. 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

References

• Architecture Concept
• Project Documentation