angular-challenges/README.md

<p align='center'>
  <img src='./logo/angular-challenge.png' height="150px"/>
</p>

<p align='center' style='font-weight:bold'>Collection of Angular challenges</p>

<br>

## Intro

This project has been created with two purposes:

- The first purpose is to assist you in becoming better at Angular and its ecosystem. 💪
- The second purpose is to share best practices and different implementations of the same problem to gain diverse perspectives. 📖

**Sharing knowledge can benefit everyone.**

Furthermore, if you are struggling with a concept, please open an issue. I will attempt to create a challenge based on that idea.

If you would like to propose a challenge, this project is open source, so feel free to share your ideas. They are more than welcome.

> **Learning by reading is good but learning by doing is better.**

## Challenges

> Click the following badges to join your next challenge.
>
> <img src="https://img.shields.io/badge/Easy--green" alt="Easy challenge"/>
> <img src="https://img.shields.io/badge/Intermediate--orange" alt="Easy challenge"/>
> <img src="https://img.shields.io/badge/Advanced--red" alt="Easy challenge"/>

</br>
<img src="https://img.shields.io/badge/Angular--gray?logo=angular" alt="Angular"/>

<a href="./apps/projection/README.md"><img src="https://img.shields.io/badge/1-Projection-red" alt="Projection"/></a>
<a href="./apps/ngfor-enhancement/README.md"><img src="https://img.shields.io/badge/3-Directive enhancement-orange" alt="Directive enhancement"/></a>
<a href="./apps/context-outlet-type/README.md"><img src="https://img.shields.io/badge/4-ContextOutlet Typed-red" alt="Directive enhancement"/></a>
<a href="./apps/crud/README.md"><img src="https://img.shields.io/badge/5-CRUD-green" alt="crud application"/></a>
<a href="./apps/permissions/README.md"><img src="https://img.shields.io/badge/6-permissions-orange" alt="permissions"/></a>
<a href="./apps/pipe-easy/README.md"><img src="https://img.shields.io/badge/8-simple pure pipe-green" alt="pipe easy"/></a>
<a href="./apps/pipe-intermediate/README.md"><img src="https://img.shields.io/badge/9-wrapFn pipe-orange" alt="wrapFn pipe"/></a>
<a href="./apps/pipe-hard/README.md"><img src="https://img.shields.io/badge/10-utilities pipe-red" alt="utilities pipe"/></a>
<a href="./apps/scroll-cd/README.md"><img src="https://img.shields.io/badge/12-change detection -- scroll-orange" alt="change detection with scroll event"/></a>
<a href="./apps/styling/README.md"><img src="https://img.shields.io/badge/13-styling-orange" alt="styling"/></a>
<a href="./apps/di/README.md"><img src="https://img.shields.io/badge/16-di-red" alt="di"/></a>
<a href="./apps/anchor-scrolling/README.md"><img src="https://img.shields.io/badge/21-anchor--scrolling-green" alt="anchor-scrolling"/></a>
<a href="./apps/router-input/README.md"><img src="https://img.shields.io/badge/22-router--input-green" alt="router-input"/></a>
<a href="./apps/interop-rxjs-signal/README.md"><img src="https://img.shields.io/badge/30-interop rxjs signal-red" alt="interop signal rxjs"/></a>
<a href="./apps/module-to-standalone/README.md"><img src="https://img.shields.io/badge/31-module to standalone-green" alt="module to standalone"/></a>

</br>
<img src="https://img.shields.io/badge/Typescript--gray?logo=typescript" alt="Typescript"/>

<a href="./apps/overload/README.md"><img src="https://img.shields.io/badge/15-overload function-orange" alt="Overload function"/></a>

</br>
<img src="https://img.shields.io/badge/RxJs--gray?logo=reactivex" alt="RxJs"/>

<a href="./apps/rxjs-pipe-bug/README.md"><img src="https://img.shields.io/badge/11-BUG: chaining operators-orange" alt="Bug rxjs chaining operators"/></a>
<a href="./apps/rxjs-race-condition/README.md"><img src="https://img.shields.io/badge/14-race condition-green" alt="Rxjs race condition"/></a>

<!-- <a href="./apps/declarative-to-reactive/README.md"><img src="https://img.shields.io/badge/13-declarative to reactive-green" alt="Declarative to reactive programming"/></a> -->

</br>
<img src="https://img.shields.io/badge/NgRx--gray?logo=reactivex" alt="NgRx"/>

<a href="./apps/ngrx-1/README.md"><img src="https://img.shields.io/badge/2-Effect vs Selector-orange" alt="Effect vs Selector"/></a>
<a href="./apps/ngrx-notification/README.md"><img src="https://img.shields.io/badge/7-Power of Effects-red" alt="power of Effects"/></a>

</br>
<img src="https://img.shields.io/badge/Testing--gray?logo=cypress" alt="testing"/>

<a href="./apps/testing-router-outlet/README.md"><img src="https://img.shields.io/badge/17-Router Testing-orange" alt="router outlet Testing"/></a>
<a href="./apps/testing-nested/README.md"><img src="https://img.shields.io/badge/18-Nested Comp Testing-orange" alt="nested component Testing"/></a>
<a href="./apps/testing-input-output/README.md"><img src="https://img.shields.io/badge/19-Input Output Testing-orange" alt="input output Testing"/></a>
<a href="./apps/testing-modal/README.md"><img src="https://img.shields.io/badge/20-Modal Testing-orange" alt="modal Testing"/></a>
<a href="./apps/testing-harness/README.md"><img src="https://img.shields.io/badge/23-Harness Testing-green" alt="harness Testing"/></a>
<a href="./apps/create-harness/README.md"><img src="https://img.shields.io/badge/24-Create Harness-orange" alt="Create harness"/></a>
<a href="./apps/testing-checkbox/README.md"><img src="https://img.shields.io/badge/28-Checkbox Testing-green" alt="Test a simple checkbox"/></a>
<a href="./apps/testing-todos-list/README.md"><img src="https://img.shields.io/badge/29-Real application Testing-red" alt="Test a real application"/></a>

</br>
<img src="https://img.shields.io/badge/Nx--gray?logo=nx" alt="nx"/>

<a href="./libs/custom-plugin/src/generators/custom-library/README.md"><img src="https://img.shields.io/badge/25-Extends Nx Library generator-red" alt="extends lib generator"/></a>
<a href="./libs/custom-plugin/src/generators/feature-component/README.md"><img src="https://img.shields.io/badge/26-Component generator-orange" alt="Custom component generator"/></a>
<a href="./tools/eslint-rules/rules/forbidden-enum.README.md"><img src="https://img.shields.io/badge/27-Forbid enum Rule-green" alt="Forbid enum rules"/></a>

## Contributors ✨

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tbody>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://medium.com/@thomas.laforge"><img src="https://avatars.githubusercontent.com/u/30832608?s…00&u=6f0ad9676792f29fd7fe6e113df06213d384a813&v=4" width="100px;" alt="Thomas Laforge"/><br /><sub><b>Thomas Laforge</b></sub></a><br />30 🧩</a></td>
    </tr>
  </tbody>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

Contributions of any kind are welcome.

## License

MIT