https://github.com/abdunnahid/nghacks

Custom UI components built with Angular & Angular Material
https://github.com/abdunnahid/nghacks

angular angular-library angular-material component-library components custom-components javascript material ng nghacks npm typescript ui ui-components

Last synced: 9 days ago
JSON representation

Custom UI components built with Angular & Angular Material

• Host: GitHub
• URL: https://github.com/abdunnahid/nghacks
• Owner: abdunnahid
• License: mit
• Created: 2020-08-11T09:55:49.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-07T08:09:55.000Z (about 3 years ago)
• Last Synced: 2026-01-02T08:45:51.949Z (4 months ago)
• Topics: angular, angular-library, angular-material, component-library, components, custom-components, javascript, material, ng, nghacks, npm, typescript, ui, ui-components
• Language: TypeScript
• Homepage: https://ng-hack.web.app
• Size: 6.37 MB
• Stars: 18
• Watchers: 1
• Forks: 9
• Open Issues: 41
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# NgHacks

## Custom UI components built with Angular & Angular Material

![GitHub commit activity](https://img.shields.io/github/commit-activity/m/abdunnahid/nghacks)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/abdunnahid/nghacks/CI%20-%20Main%20App?label=web%20preview%20build)

![GitHub](https://img.shields.io/github/license/abdunnahid/nghacks)

### Live Preview

Browse: [ng-hack.web.app](https://ng-hack.web.app/)

[![Website](https://img.shields.io/website?url=https%3A%2F%2Fng-hack.web.app%2F)](https://ng-hack.web.app/)

[![W3C Validation](https://img.shields.io/w3c-validation/html?preset=HTML%2C%20SVG%201.1%2C%20MathML%203.0&targetUrl=https%3A%2F%2Fng-hack.web.app%2F)](https://ng-hack.web.app/)

## Components

### [ngmat-table-query-reflector](https://github.com/abdunnahid/nghacks/tree/master/main/projects/ngmat-table-query-reflector)

Stores and retrieves mat table states (sorting, pagination) with url query params.

[Live Preview](https://ng-hack.web.app/mat-table-query-reflector)

You can read that on my [blog](https://dev.to/abdunnahid/managing-angular-material-table-states-with-query-params-a-comprehensive-guide-1o8j)

[![npm (scoped)](https://img.shields.io/npm/v/@nghacks/ngmat-table-query-reflector?color=%23c53635)](https://www.npmjs.com/package/@nghacks/ngmat-table-query-reflector)

[![npm](https://img.shields.io/npm/dw/@nghacks/ngmat-table-query-reflector)](https://www.npmjs.com/package/@nghacks/ngmat-table-query-reflector)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/abdunnahid/nghacks/npm-publish%20'ngmat-table-query-reflector'?label=build%20%27ngmat-table-query-reflector%27)

---

### [dynamic-browser-title](https://github.com/abdunnahid/nghacks/tree/master/main/projects/dynamic-browser-title)

Updates browser title dynamically & automatically on route change.

[Live Preview](https://ng-hack.web.app/dynamic-browser-title)

[![npm (scoped)](https://img.shields.io/npm/v/@nghacks/dynamic-browser-title?color=%23c53635)](https://www.npmjs.com/package/@nghacks/dynamic-browser-title)

[![npm](https://img.shields.io/npm/dw/@nghacks/dynamic-browser-title)](https://www.npmjs.com/package/@nghacks/dynamic-browser-title)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/abdunnahid/nghacks/npm-publish%20'dynamic-browser-title'?label=build%20%27dynamic-browser-title%27)

---

### [uploader](https://github.com/abdunnahid/nghacks/tree/master/main/projects/uploader)

Picks image or file

[Live Preview](https://ng-hack.web.app/uploader)

[![npm (scoped)](https://img.shields.io/npm/v/@nghacks/uploader?color=%23c53635)](https://www.npmjs.com/package/@nghacks/uploader)

[![npm](https://img.shields.io/npm/dw/@nghacks/uploader)](https://www.npmjs.com/package/@nghacks/uploader)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/abdunnahid/nghacks/npm-publish%20'uploader'?label=build%20%27uploader%27)

---

### [info-dialog](https://github.com/abdunnahid/nghacks/tree/master/main/projects/info-dialog)

Shows detail information on a dialog/modal

[Live Preview](https://ng-hack.web.app/info-dialog)

[![npm (scoped)](https://img.shields.io/npm/v/@nghacks/info-dialog?color=%23c53635)](https://www.npmjs.com/package/@nghacks/info-dialog)

[![npm](https://img.shields.io/npm/dw/@nghacks/info-dialog)](https://www.npmjs.com/package/@nghacks/info-dialog)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/abdunnahid/nghacks/npm-publish%20'info-dialog'?label=build%20%27info-dialog%27)

---

### [image-viewer](https://github.com/abdunnahid/nghacks/tree/master/main/projects/image-viewer)

Shows full size image in a overlay maintaining the aspect ratio.

[Live Preview](https://ng-hack.web.app/image-viewer)

[![npm (scoped)](https://img.shields.io/npm/v/@nghacks/image-viewer?color=%23c53635)](https://www.npmjs.com/package/@nghacks/image-viewer)

[![npm](https://img.shields.io/npm/dw/@nghacks/image-viewer)](https://www.npmjs.com/package/@nghacks/image-viewer)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/abdunnahid/nghacks/npm-publish%20'image-viewer'?label=build%20%27image-viewer%27)

---

### [quantity-input](https://github.com/abdunnahid/nghacks/tree/master/main/projects/quantity-input)

Quantity input for shopping cart.

[Live Preview](https://ng-hack.web.app/quantity-input)

[![npm (scoped)](https://img.shields.io/npm/v/@nghacks/quantity-input?color=%23c53635)](https://www.npmjs.com/package/@nghacks/quantity-input)

[![npm](https://img.shields.io/npm/dw/@nghacks/quantity-input)](https://www.npmjs.com/package/@nghacks/quantity-input)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/abdunnahid/nghacks/npm-publish%20'quantity-input'?label=build%20%27quantity-input%27)

---

### [rating-input](https://github.com/abdunnahid/nghacks/tree/master/main/projects/rating-input)

Rating input for products/services.

[Live Preview](https://ng-hack.web.app/rating-input)

[![npm (scoped)](https://img.shields.io/npm/v/@nghacks/rating-input?color=%23c53635)](https://www.npmjs.com/package/@nghacks/rating-input)

[![npm](https://img.shields.io/npm/dw/@nghacks/rating-input)](https://www.npmjs.com/package/@nghacks/rating-input)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/abdunnahid/nghacks/npm-publish%20'rating-input'?label=build%20%27rating-input%27)

---

### [banner-carousel](https://github.com/abdunnahid/nghacks/tree/master/main/projects/banner-carousel)

Image carousel for web page banner.

[Live Preview](https://ng-hack.web.app/banner-carousel)

[![npm (scoped)](https://img.shields.io/npm/v/@nghacks/banner-carousel?color=%23c53635)](https://www.npmjs.com/package/@nghacks/banner-carousel)

[![npm](https://img.shields.io/npm/dw/@nghacks/banner-carousel)](https://www.npmjs.com/package/@nghacks/banner-carousel)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/abdunnahid/nghacks/npm-publish%20'banner-carousel'?label=build%20%27banner-carousel%27)

---

### [overflow-carousel](https://github.com/abdunnahid/nghacks/tree/master/main/projects/overflow-carousel)

Show overflowing content as carousel.

[Live Preview](https://ng-hack.web.app/overflow-carousel)

[![npm (scoped)](https://img.shields.io/npm/v/@nghacks/overflow-carousel?color=%23c53635)](https://www.npmjs.com/package/@nghacks/overflow-carousel)

[![npm](https://img.shields.io/npm/dw/@nghacks/overflow-carousel)](https://www.npmjs.com/package/@nghacks/overflow-carousel)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/abdunnahid/nghacks/npm-publish%20'overflow-carousel'?label=build%20%27overflow-carousel%27)