• Overview
• Features
• Libraries
• Installation
• Quick Start
• Angular Compatibility
• Documentation
• Demo Application
• Development
• Contributing
• License
• Support

This monorepo contains a collection of 9 reusable Angular libraries designed for building modern CMS applications. Each library is:

• ✅ Standalone - Can be used independently
• ✅ TypeScript - Fully typed with TypeScript
• ✅ Angular 20 & 21 - Compatible with Angular 20.1.0+ and 21.0.0+
• ✅ Well Documented - Comprehensive documentation for each library
• ✅ Production Ready - Tested and optimized for production use
• ✅ Multi-language - Built-in internationalization support

• 🚀 Modern Angular - Built with Angular 20/21 best practices
• 📦 Modular Architecture - Use only what you need
• 🎨 Customizable - Flexible styling and theming options
• 🌐 i18n Ready - Multi-language support (English, Persian, French, Russian)
• ♿ Accessible - ARIA support and keyboard navigation
• 📱 Responsive - Mobile-friendly components
• 🔒 Type Safe - Full TypeScript support
• ⚡ Performance - Optimized for speed and efficiency

Complete API service layer and data models for CMS operations

📖 Full Documentation • 📦 npm

Key Features:

• Complete API service layer for CMS operations
• Comprehensive data models and DTOs
• Support for multiple modules: News, Blog, Catalog, Estate, Member, etc.
• Built-in authentication and authorization services
• RESTful API integration with RxJS

Installation:

npm install ntk-cms-api

Advanced file management system with tree-based navigation

📖 Full Documentation • 📦 npm

Key Features:

• Tree-based file navigation
• Drag & drop file operations
• File preview and management
• Upload functionality with progress tracking
• Multi-language support
• Customizable UI components

Installation:

npm install ntk-cms-filemanager

Simple and efficient file upload component

📖 Full Documentation • 📦 npm

Key Features:

• Simple and efficient file upload functionality
• Progress tracking
• File validation
• Customizable upload interface
• Drag & drop support

Installation:

npm install ntk-cms-fileuploader

Visual cron expression builder with time picker

📖 Full Documentation • 📦 npm

Key Features:

• Visual cron job expression builder
• Time picker component
• Multi-language support
• Customizable cron options
• Real-time validation

Installation:

npm install ngx-ntk-cron-editor

Advanced file picker with preview and drag & drop

📖 Full Documentation • 📦 npm

Key Features:

• Real-time progress bar
• File preview functionality
• Drag & drop support
• Custom templates
• Multi-language support
• Image cropping capabilities

Installation:

npm install ngx-ntk-file-picker

Icon selection component with multiple icon libraries

📖 Full Documentation • 📦 npm

Key Features:

• FontAwesome 4, 5, 6 support
• Material Icons support
• PrimeIcons support
• Search and filter functionality
• Custom icon packs
• Modal-based selection

Installation:

npm install ngx-ntk-icon-picker
npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons primeicons

Material Design color picker component

📖 Full Documentation • 📦 npm

Key Features:

• Angular Material integration
• Multiple color formats (HEX, RGB, HSL)
• Color palette presets
• Canvas-based color selection
• Numeric input support

Installation:

npm install ngx-ntk-mat-color-picker
npm install @angular/material @angular/forms @angular/cdk

Visual query builder for complex database queries

📖 Full Documentation • 📦 npm

Key Features:

• Drag & drop query construction
• Multiple operator support
• Conditional logic building
• Export/import query definitions
• Multi-language interface

Installation:

npm install ngx-ntk-query-builder
npm install @ngx-translate/core @ngx-translate/http-loader

Smart modal and loader system

📖 Full Documentation • 📦 npm

Key Features:

• Dynamic modal management
• Smart loading indicators
• Auto-start functionality
• Customizable themes
• Stack-based modal system

Installation:

npm install ngx-ntk-smart-module

• Node.js (LTS version recommended)
• Angular CLI (^20.0.0 or ^21.0.0)
• Angular (^20.1.0 or ^21.0.0)

npm install

# Core API
npm install ntk-cms-api

# File Management
npm install ntk-cms-filemanager
npm install ntk-cms-fileuploader

# UI Components
npm install ngx-ntk-cron-editor
npm install ngx-ntk-file-picker
npm install ngx-ntk-icon-picker
npm install ngx-ntk-mat-color-picker
npm install ngx-ntk-query-builder
npm install ngx-ntk-smart-module

If you're using Angular 20 and encounter peer dependency conflicts:

npm install ngx-ntk-icon-picker --legacy-peer-deps

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { IconPickerModule } from "ngx-ntk-icon-picker";
import { FilePickerModule } from "ngx-ntk-file-picker";
import { NtkCmsApiModule } from "ntk-cms-api";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [CommonModule, IconPickerModule, FilePickerModule, NtkCmsApiModule],
  template: `...`,
})
export class AppComponent {}

<input type="text" [iconPicker]="selectedIcon" [ipIconPack]="['fa6']" [ipPosition]="'bottom'" [ipWidth]="'500px'" [ipPlaceHolder]="'Choose an icon'" (iconPickerSelect)="onIconSelect($event)" />

<file-picker [config]="filePickerConfig" (onUpload)="onFileUpload($event)"> </file-picker>

<ngx-ntk-cron-editor [(cronExpression)]="cronExpression" [options]="cronOptions"> </ngx-ntk-cron-editor>

<ngx-mat-color-picker [(color)]="selectedColor" [format]="'hex'"> </ngx-mat-color-picker>

All libraries support both Angular 20 and Angular 21:

Each library has comprehensive documentation:

• ntk-cms-api - API services and models
• ntk-cms-filemanager - File management system
• ntk-cms-fileuploader - File upload component
• ngx-ntk-cron-editor - Cron expression editor
• ngx-ntk-file-picker - Advanced file picker
• ngx-ntk-icon-picker - Icon selection component
• ngx-ntk-mat-color-picker - Material color picker
• ngx-ntk-query-builder - Visual query builder
• ngx-ntk-smart-module - Modal and loader system

This project includes a comprehensive demo application showcasing all libraries.

# Install dependencies
npm install

# Start development server
npm start

# Navigate to http://localhost:4200

• API Test (/apiTest) - API service demonstrations
• File Manager Test (/filemanagerTest) - File management system
• File Uploader Test (/fileuploaderTest) - File upload functionality
• Cron Editor Test (/cronEditTest) - Cron expression builder
• Color Picker Test (/ColorPicker) - Color selection component
• Icon Picker Test (/IconPicker) - Icon selection interface
• Smart Loader Test (/smartLoaderTest) - Loading system
• Smart Modal Test (/smartModalTest) - Modal management
• Query Builder Test (/test) - Query construction tool

# Build all libraries
ng build ntk-cms-api
ng build ntk-cms-filemanager
ng build ntk-cms-fileuploader
ng build ngx-ntk-cron-editor
ng build ngx-ntk-file-picker
ng build ngx-ntk-icon-picker
ng build ngx-ntk-mat-color-picker
ng build ngx-ntk-query-builder
ng build ngx-ntk-smart-module

# Development build
npm run build

# Production build
ng build --configuration production

# Run unit tests
npm test

# Run e2e tests
npm run e2e

# Run linting
npm run lint

npm-ntk-cms-angular/
├── projects/
│   ├── ntk-cms-api/              # Core API services and models
│   ├── ntk-cms-filemanager/      # File management system
│   ├── ntk-cms-fileuploader/     # File upload component
│   ├── ngx-ntk-cron-editor/      # Cron expression editor
│   ├── ngx-ntk-file-picker/      # Advanced file picker
│   ├── ngx-ntk-icon-picker/      # Icon selection component
│   ├── ngx-ntk-mat-color-picker/ # Material color picker
│   ├── ngx-ntk-query-builder/    # Visual query builder
│   └── ngx-ntk-smart-module/     # Modal and loader system
├── src/
│   └── app/
│       └── pages/                # Demo pages for each library
├── dist/                         # Built libraries
└── e2e/                         # End-to-end tests

All libraries support multiple languages:

• English (en)
• Persian/Farsi (fa)
• French (fr)
• Russian (ru)

Translation files are included in each library's assets folder.

// environment.ts
export const environment = {
  production: false,
  apiUrl: "https://api.example.com",
  fileManagerUrl: "https://files.example.com",
  uploadUrl: "https://upload.example.com",
};

import { NtkCmsApiService } from 'ntk-cms-api';

constructor(private apiService: NtkCmsApiService) {
  this.apiService.setApiUrl('https://api.example.com');
  this.apiService.setToken('your-auth-token');
}

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Follow Angular Style Guide
• Write unit tests for new features
• Update documentation for API changes
• Ensure all tests pass before submitting PR
• Use conventional commit messages

This project is licensed under the ISC License - see the LICENSE file for details.

Alireza Karavi

• 🌐 Website: ntk.ir
• 📧 Contact: GitHub Issues
• 💼 GitHub: @akaravi

For support and questions:

• 📝 Create an issue on GitHub
• 📚 Check documentation - Each library has detailed README
• 💬 Contact - ntk.ir

• 9 Libraries - Complete CMS solution
• Angular 20 & 21 - Latest Angular versions
• TypeScript - Fully typed
• Multi-language - 4 languages supported
• Production Ready - Tested and optimized