@yoozsoft/yoozsoft-ng
Yoozsoft Ng
Angular UI components and widgets built with Bootstrap 5 CSS and ng-bootstrap.
@yoozsoft/yoozsoft-ng provides standalone Angular components with APIs designed for the Angular ecosystem.
The library is built with TypeScript and is designed to work with Angular, Bootstrap 5 CSS, and ng-bootstrap.
Table of Contents
Demo
Visit the Yoozsoft Website for general information, demos and documentation.
Compatibility
The library versions are aligned with the corresponding Angular versions.
| yoozsoft-ng | Angular | ng-bootstrap | Bootstrap CSS | Popper |
|---|---|---|---|---|
| 1.x.x-alpha.x | ^16.1.0 | 15.0.1 | 5.3.0 | 2.11.8 |
| 2.x.x | ^17.3.0 | 16.0.0 | 5.3.2 | 2.11.8 |
| 3.x.x | ^18.0.0 | 17.0.0 | 5.3.2 | 2.11.8 |
| 4.x.x | ^19.0.0 | 18.0.0 | 5.3.3 | 2.11.8 |
| 5.x.x | ^20.0.0 | 19.0.0 | 5.3.6 | 2.11.8 |
| 6.x.x | ^21.0.0 | 20.0.0 | 5.3.8 | 2.11.8 |
| 7.x.x | ^22.0.0 | 21.0.0 | 5.3.8 | 2.11.8 |
Dependencies
The library is designed to work with:
For the exact Angular peer dependency requirements, please refer to the package metadata.
Installation
Install the library from npm:
npm i @yoozsoft/yoozsoft-ng
Install the required UI dependencies:
npm install @ng-bootstrap/ng-bootstrap@21 bootstrap@5.3.8 @popperjs/core@2.11.8
Bootstrap CSS
Add Bootstrap CSS to your application.
For example, in angular.json:
{ "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss" ] }
Usage
The library is built using standalone Angular components.
Import the components and directives you need directly into your Angular components.
Example:
import { Component } from '@angular/core'; import { YsNavbarComponent } from '@yoozsoft/yoozsoft-ng';
@Component({ imports: [YsNavbarComponent], template: '<ys-navbar></ys-navbar>' }) export class AppComponent {}
Icons
The library primarily uses Font Awesome icon classes by default.
When using components that rely on Font Awesome icons, make sure the required Font Awesome styles are available in your application.
License
MIT