Dipi is a simple Angular library that contains a huge, useful pack of Directives and Pipes for Angular developers. This library provides for you a Directives and Pipes that you can use in your projects and save a lot of time for solving common issues very fast.
vyakymenko/dipi_Dipi is a simple Angular library that contains a huge, useful pack of Directives and Pipes for Angular developers. …_github.com
Why I created it?
I was working on several projects where I was required to use the same Directives and Pipes for different issues. So I decided that it will be good to create a simple library with a massive set of popular and useful Directives and Pipes that can be used by other developers in their Angular projects.
I think that together with the Angular community we can improve it and it will be your one of the useful and efficient tool.
Which Directives and Pipes it has so far?
Pipes
join — Concat items into a string with a delimiter that you want.
safe — Dom sanitizer pipe that allows you to disable Angular sanitization and put values that you want for url, style, src, html.
filter — Whenever you need to filter items list via a property(available, show, etc.) you can use a filter Pipe, that will do it for you.
searchFilter — Searching items the in the array are easier than you think, just put a searchFilter Pipe and your search model value.
Directives
debounce — It’s a very common issue when we want to add a delay and verify if our value finished changing before doing some action. To do this, you can use a debounce Directive that will help you with this issue.
lazyFor — Lazy rendering directive that you can use for rendering a small portion of data to avoid performance decrease with large arrays. You can read more detailed information about it here.
offsetHeight — If you need dynamically set height for your block with the offsetHeight appendix, you can use offsetHeight directive.
That’s all so far at the moment I wrote this story, but I continue researching on other useful Directives and Pipes that will be inside Dipi very soon, so this list is growing day-by-day.
What is in development?
Pipes
distinct — This Pipe will return a unique array of items, without duplicates.
formatter — With this Pipe, you can format your numbers to anything that you want, phones, zip-codes, etc.
timer — Create a timer from one date to another.
Website with well-described documentation is in development, and I hope that I’ll finish it very soon.
Contribute and share your Directives and Pipes
I will be so glad if you will share your Directives or Pipes that will be used by other Angular developers. You can also create an issue with information about which Directive or Pipe would you like to see.
Knowledge sharing is our strength in the development world!
I hope you enjoyed this article and I will be very happy if you could share it with your friends. For more information about this library, you can checkout the GitHub Repository. Thanks for reading!