@bespunky/angular-zen/README.md

The Angular tools you always wished were there.

![npm (scoped)](https://img.shields.io/npm/v/@bespunky/angular-zen?style=flat-square&label=version)
![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@bespunky/angular-zen?style=flat-square)
![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/bespunky/angular-zen/@angular/core?style=flat-square)
[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg?style=flat-square)](https://github.com/BeSpunky/angular-zen/blob/master/code_of_conduct.md)
![GitHub](https://img.shields.io/github/license/bespunky/angular-zen?style=flat-square)
![npm](https://img.shields.io/npm/dt/@bespunky/angular-zen?style=flat-square)

<p align="center">
    <img src="https://bs-angular-zen.web.app/docs/zen/.attachments/logo.svg" width="200"/>
</p>

<p align="center" style="font-size: x-large">@bespunky/angular-zen</p>
<p align="center" style="font-size: medium">The Angular tools you always wished were there.</p>

<p align="center" style="font-size: medium; margin: 20px auto">
    ✨ <a href="https://bs-angular-zen.web.app/docs/zen/additional-documentation/getting-started.html">Getting Started</a> |
    🙌 <a href="https://bs-angular-zen.web.app/">Official Site & Live Demos</a> |
    🎁 <a href="https://bs-angular-zen.web.app/docs/zen/additional-documentation/modules-overview.html">What's in the library?</a>
</p>

<h2 align="center">🧘‍♂️ Zen...</h2>

<p align="center">
    The <code>@bespunky/angular-zen</code> library provides a set of well meditated general purpose tools for common Angular related tasks<br/>
    to help you keep focused on the task at hand and stay in control of your workflow.<br/>  
    These tools are all <b>🌳 tree-shakable</b>.
</p>

<p align="center">
    You may use the library as you'd like, with any app, under the MIT license.
</p>

## 📢 What's new
<h3 align="center">Checkout the new <code>useNavigationX()</code> function!</h3>
<center>
    ✨ <a href="https://bs-angular-zen.web.app/docs/zen/additional-documentation/routerxmodule/navigationx.html">Strong-typed and auto generated navigation system for Angular (PREVIEW)</a>
</center>

<p align="center">
    <img src="https://bs-angular-zen.web.app/docs/zen/.attachments/navigation-x-usage.png"/>
</p>

<br/>
<center>
    ⚒️ <a href="https://bs-angular-zen.web.app/docs/zen/additional-documentation/routerxmodule/utils.html">Other util functions (PREVIEW)</a>
</center>
<br/>

## ✨ The Highlights

[✨ Strong-typed and auto generated navigation system for Angular (PREVIEW)](https://bs-angular-zen.web.app/docs/zen/additional-documentation/routerxmodule/navigationx.html)

[⚒️ Standalone routing utils (PREVIEW)](https://bs-angular-zen.web.app/docs/zen/additional-documentation/routerxmodule/utils.html)

[👁️ `*observe` directives](https://bs-angular-zen.web.app/docs/zen/additional-documentation/coremodule/observemodule.html) - Super easy RxJS integration.

[👁️ `*onObserver` directives](https://bs-angular-zen.web.app/docs/zen/additional-documentation/coremodule/onobservermodule.html) - Conditional template rendering according to observable states.

[💥`Destroyable`](https://bs-angular-zen.web.app/docs/zen/additional-documentation/coremodule/destroyable-(abstract).html) - No more manual `unsubscribe()` calls.

[🔀 `RouteAware`](https://bs-angular-zen.web.app/docs/zen/additional-documentation/routerxmodule/routeaware-\(abstract\).html) - React to `Router` events and handle routing with less code.

[🚌 `RouterOutletComponentBus`](https://bs-angular-zen.web.app/docs/zen/additional-documentation/routerxmodule/routeroutletcomponentbus.html) - Access outlet activated components instantaneously.

[🔗 `UrlReflectionService`](https://bs-angular-zen.web.app/docs/zen/additional-documentation/routerxmodule/urlreflectionservice.html) - Break and analyze urls and their parts.

[🔲 `WindowRef`](https://bs-angular-zen.web.app/docs/zen/additional-documentation/coremodule/windowref.html) - The safe way to access the `window` object.

[📄 `DocumentRef`](https://bs-angular-zen.web.app/docs/zen/additional-documentation/coremodule/documentref.html) - The safe way to access the `document` object.

[😎 `HeadService`](https://bs-angular-zen.web.app/docs/zen/additional-documentation/coremodule/headservice.html) - Cleanly access and manipulate the head element.

[⏳ `LazyLoaderService`](https://bs-angular-zen.web.app/docs/zen/additional-documentation/asyncmodule/lazyloaderservice.html) - Programmatically load scripts and styles.

[🌎 `Universal Platform Directives`](https://bs-angular-zen.web.app/docs/zen/additional-documentation/universalModule/platform-directives.html) - Prevent element rendering in Universal with directives.

[⚙ `LanguageIntegrationService`](https://bs-angular-zen.web.app/docs/zen/additional-documentation/languageintegrationmodule.html) - Hook your library with your user's language services.

[🗣 `LocalizedRouteAware`](https://bs-angular-zen.web.app/docs/zen/additional-documentation/languageintegrationmodule/localizedrouteaware-\(abstract\).html) - Create route aware services and components with language integration.

## Versions
Starting from v14, zen versions will stick to Angular's major versions.

> Version 5.0.0 was regenerated based on Angular 13.

> Previous versions of the library were based on a workspace generated using Angular 7 which has been gradually updated and tested up to Angular 11.
> 
> Compatibility with older versions is possible but not guaranteed.

[Full change log](https://bs-angular-zen.web.app/docs/zen/changelog.html)

## Supporting The Project
If you like this project, find it useful and want to donate, you're welcome to buy me a coffee 😊.  
If you can't, no worries. A simple 'hello' or 'thank you' always warms my heart. 💗

<a href="https://www.buymeacoffee.com/bespunky"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=bespunky&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>

## Issues & Requests
Feedback, bugs reports and pull requests are welcome.
Please follow the [contribution guidelines]().

## Other Packages by [`@bespunky`](https://www.npmjs.com/~bespunky)

📦 [`@bespunky/angular-google-maps`](https://bs-angular-g-maps.web.app)

🚧 (soon) `@bespunky/angular-zen-ux` will help you with simple UX tasks.

🚧 (soon) `@bespunky/angular-zen-seo` will help you with metadata and SEO related tasks.

## References
[Source Code](https://github.com/bespunky/angular-zen)

[NPM Package](https://www.npmjs.com/package/@bespunky/angular-zen)

<br/>