# 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)


