NGX-YOUI

NGX-YOUI is an Angular UI Library that can be highly customized with content and styles. You can easily integrate with other CSS frameworks and UI Library, such as Tailwind, Bootstrap, PrimeNG, Angular Material etc.

1. Customize the presentation content of components through ng-template or dynamic custom components.
2. Customize the rendering style of the component through CSSClass properties.

Document

https://ngx-youi.github.io/NGX-YOUI/

Demo

https://ngx-youi.github.io/NGX-YOUI/auth/user/list

NPM

https://www.npmjs.com/package/ngx-youi

Getting Start

How To Install

npm i ngx-youi --save

Import SVG Loaders

Append Below setting in "YOUR_PROJECT.architect.build.options.assets" of angular.json

architect": {
  ...,
  "build": {
    ...,
    "options": {
      "assets": {
        {
          "glob": "**/*",
          "input": "./node_modules/svg-loaders/svg-smil-loaders",
          "output": "/assets/svg-loaders/"
        }
      }
    }
  }
}

Import CSS

Import a CSS file for all components

/* style.css */

@import '~ngx-youi/style/index.css';

Import a CSS file for a single component

/* style.css */

/* import youi-common.css before import css of component */
@import "./youi-common.css";

@import '~ngx-youi/style/component/breadcrumb.css';

Import Module

Import a module file for all components

// app.module.ts

import { NgModule } from "@angular/core";
import { NgxYouiModule } from "ngx-youi"

@NgModule({
  imports: [..., NgxYouiModule]
})

export class AppModule {}

Import a module file for a single component

// app.module.ts

import { NgModule } from "@angular/core";
import { BreadcrumbModule } from 'ngx-youi';

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