TheLazy.Dev
Portfolio GitHub

Blog

angular |css |typescript |component

NGX-YOUI - Angular UI Library

ngxyoui

NGX-YOUI

Posted on April 8, 2022

NGX-YOUI - Angular UI Library

Hello everyone.
I want to share a self-developed Angular UI Library in order to learn the development of Angular UI Components: NGX-YOUI.

What is 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, such as Tailwind or Bootstrap.

Thank you for reading this article. If you see any suggestions that can be improved or better, you are welcome to make them.

Github

https://github.com/NGX-YOUI/NGX-YOUI

Document

This document project integrates Tailwind CSS and NGX-YOUI.
You can check the source code for more details.

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

Feature

  • Customize the presentation content of components through ng-template or dynamic custom components.

For example: You can customize the contents of a datatable section field:

<!-- component.html -->

<youi-datatable
  [tableData]="columnTemplateTable.tableData"
  [columns]="columnTemplateTable.columns"
>
  <ng-template youi-datatable-template="header-status" let-column>
    {{ column.label }} (status)
  </ng-template>

  <ng-template
    youi-datatable-template="body-status"
    let-cellData
    let-rowData="rowData"
  >
    {{ getOptionText("status", cellData) }} ({{ cellData }})
  </ng-template>

  <ng-template
    youi-datatable-template="body-action"
    let-cellData
    let-rowData="rowData"
  >
    <div class="action-column">
      <button class="btn btn-cyan">
        <i class="material-icons-outlined">visibility</i
        ><span>Browse</span>
      </button>
      <button class="btn btn-green">
        <i class="material-icons-outlined">edit</i><span>Edit</span>
      </button>
    </div>
 </ng-template>
</youi-datatable>
Enter fullscreen mode Exit fullscreen mode 
// component.ts

import { ITable } from 'ngx-youi';

export class YourComponentClass {
  columnTemplateTable: ITable<any> = {
    columns: [
      { name: 'username', label: 'USER NAME' },
      { name: 'name', label: 'NAME' },
      { name: 'status', label: 'STATUS' },
      { name: 'action', label: 'ACTION' }
    ],

    tableData: [
      {
        username: 'admin',
        name: 'Alan',
        status: 0
      },
      {
        username: 'user',
        name: 'Steven',
        status: 1
      },
      {
        username: 'guest',
        name: 'Mike',
        status: 2
      }
    ]
  }
  getOptionText (name: string, value: any) {
    const options: {[key: string]: any[]} = {
      status: [
        { label: 'All', value: '' },
        { label: 'InActive', value: 0 },
        { label: 'Active', value: 1 },
        { label: 'Disabled', value: 2 },
      ]
    }

    return options[name].find((option: { value: any }) => option.value === value).label
  }
}
Enter fullscreen mode Exit fullscreen mode
  • Customize the rendering style of the component through CSSClass properties.

For example: You can customize the style of breadcrumb items, separator patterns:

<!-- component.html -->

<youi-breadcrumb
  class="custom-breadcrumb"
  itemCSSClass="custom-breadcrumb-item"
  itemActiveCSSClass="custom-breadcrumb--active"
  iconCSSClass="custom-breadcrumb-icon"
  speratorCSSClass="custom-breadcrumb-sperator"
>
  <youi-breadcrumb-item icon="home"> One </youi-breadcrumb-item>
  <youi-breadcrumb-item icon="maps_home_work"> Two </youi-breadcrumb-item>
  <youi-breadcrumb-item icon="format_list_numbered"> Three </youi-breadcrumb-item>
</youi-breadcrumb>
Enter fullscreen mode Exit fullscreen mode 
/* style.css */

::ng-deep .custom-breadcrumb {
  padding: 0.75rem;
  background-color: rgb(254 202 202);
  border-radius: 0.375rem;

  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

::ng-deep .custom-breadcrumb-item {
  color: rgb(75 85 99);
}

::ng-deep .custom-breadcrumb-icon {
  font-size: 1.5rem;
  line-height: 2rem;
}

::ng-deep .custom-breadcrumb-sperator {
  color: rgb(220 38 38);
}

::ng-deep .custom-breadcrumb--active { 
  color: rgb(59 130 246);
}
Enter fullscreen mode Exit fullscreen mode

Getting Start

How To Install 

npm i ngx-youi --save
Enter fullscreen mode Exit fullscreen mode

Import CSS

Import a CSS file for all components

/* style.css */

@import '~ngx-youi/style/index.css';
Enter fullscreen mode Exit fullscreen mode

Import a CSS file for a single component

/* style.css */

@import '~ngx-youi/style/component/breadcrumb.css';
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

Road Map

  1. Example Playground on the stackblitz.
  2. Writing component api in the document.
  3. Default dark mode style in every components.
💖 💪 🙅 🚩
ngxyoui
NGX-YOUI

Posted on April 8, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

NGX-YOUI - Angular UI Library
angular NGX-YOUI - Angular UI Library

April 8, 2022