Dialog Component — Angular 5
TL;DR
This article has two purpose:
- How to create your own Dialog Component;
- How to inject a component into your Application in runtime;You can clone it from my github on the repo called ng-dialog-article.
On this sequence of articles, I will get deep into on "How to create your own Dialog Component using Angular 5".
During my work, I have run into a situation that I needed to create a dialog component to reuse across the whole application. Yes, there are plenty of projects that would help doing that, my favourite ones are the Angular Material and Ng-Bootstrap.
Both are a great projects, however it's pretty heavy to add them onto my project. So, based on what I've learned reading the ng-bootstrap code, I got inspired to develop the Dialog Component itself, with no need to inject another dependency in the project.
The mainly challenge I have faced on this development was to make the component available for all modules, mainly the lazy loaded ones. And also, inject a component into the application without the need to add any tag on the base of the application, or even worse, on each page that I would require to display a Dialog Message.
So I decided to share what I've learned with you guys. I tried to get each step detailed so you can following step-by-step creating each file and understanding on the code comments some description for that line.
I hope you enjoy it and also it helps you guys to go further on developing other solutions based on what we learn on this article!
Feel free to drop me a line for any bug fix, suggestion or any comment with regards to this publication.
