5 way to create modal windows with Angular (Angular material, UIKit with toggle tag, UIKit with custom function, jQuery UI modal, Bootstrap modal).
There are a number Angular framework.
![](/AngularModal/Compare-1_1.png)
![](/AngularModal/Compare-2_1.png)
I have created admin panel for one of my project with Angular Material, than I decide change framework to UIKit, and this is a reason why this post wos born in my blog.
1.Angular material dialog.
So, firtly about Angular Material modal.
![](/AngularModal/MaterialModal-1_1.png)
Common workflow to add Materal to your project is (sorry for screen only, I have no enough time today):
- Create project
- Update Angular to latest version
- Add Angular Material and select meterial options - colors and CSS style.
- After this step Material module will included to Angular module list..
- Add first component.
- Than we need to configure AngularMatrial module.
- In this step project can started with simple test page.
- And even deployed.
- Next step is creating more realistic application. Firstly we need to install Material Fonts and Icons.
- And than need to create needed components and add route to it.
- Of course we can generate new component by extension, not only from command line.
- Also we can add Base form component and FormGroup.
- Of course, if we use Angular material we can working not with ordinary HTML tags, we nee to use Material tags.
- So, project is workable, and this is good time to add modal framework. Firstly we need to import Material Dialog module to project https://material.angular.io/components/dialog/overview
- And this is final step, goal of all previous description - creating modal form.
![](/AngularModal/MaterialModal-2_1.png)
![](/AngularModal/MaterialModal-8_1.png)
![](/AngularModal/MaterialModal-3_1.png)
![](/AngularModal/MaterialModal-4_1.png)
![](/AngularModal/MaterialModal-7_1.png)
![](/AngularModal/MaterialModal-5_1.png)
![](/AngularModal/MaterialModal-6_1.png)
![](/AngularModal/MaterialModal-11_1.png)
![](/AngularModal/MaterialModal-9_1.png)
![](/AngularModal/MaterialModal-30_1.png)
![](/AngularModal/MaterialModal-10_1.png)
![](/AngularModal/MaterialModal-12_1.png)
![](/AngularModal/MaterialModal-13_1.png)
![](/AngularModal/MaterialModal-14_1.png)
![](/AngularModal/MaterialModal-15_1.png)
![](/AngularModal/MaterialModal-16_1.png)
![](/AngularModal/MaterialModal-17_1.png)
![](/AngularModal/MaterialModal-18_1.png)
![](/AngularModal/MaterialModal-19_1.png)
![](/AngularModal/MaterialModal-20_1.png)
![](/AngularModal/MaterialModal-31_1.png)
![](/AngularModal/MaterialModal-27_1.png)
![](/AngularModal/MaterialModal-28_1.png)
![](/AngularModal/MaterialModal-29_1.png)
![](/AngularModal/MaterialModal-26_1.png)
![](/AngularModal/MaterialModal-22_1.png)
![](/AngularModal/MaterialModal-23_1.png)
2.Uikit modal.
In this charter I made simple notice about https://getuikit.com/docs/modal, and this will be our finally goal.
![](/AngularModal/UIkit-1_1.png)
Workflow is very similar to previous description wit Material, but of course we don't need Google Material, because we will use more advanced and clear framework - UIKit.
- So, first step is creating project and add UIkit to it.
- Next step is adding UIKit scripts, I have add it to Angular config.
- This is difference main page with Angular Material.
- Next step is adding UIKit CSS style
- Of course, SPA-page Navigation bar and whole project style will be different.
- No need special module to import functions from Angular Material, no need additional import google functions.
- Of course, no need more strange Google tags instead ordinary HTML tags.
- And whole Angular config will be different.
- Than we need to prepare Dialog component and this is simple solution with one tag uk-toggle
- There are second, more advanced solution with function and variable UIkit: any.
![](/AngularModal/UIkit-2_1.png)
![](/AngularModal/UIkit-3_1.png)
![](/AngularModal/UIkit-4_1.png)
![](/AngularModal/UIkit-5_1.png)
![](/AngularModal/UIkit-6_1.png)
![](/AngularModal/UIkit-9_1.png)
![](/AngularModal/UIkit-7_1.png)
3. jQuery UI modal.
We can use in Angular all functions from jQuery.
![](/AngularModal/jQuery-1_1.png)
![](/AngularModal/jQuery-2_1.png)
![](/AngularModal/jQuery-3_1.png)
![](/AngularModal/jQuery-4_1.png)
And than we can import jQuery UI https://jqueryui.com/dialog/, but if we use UIKit this looks as unneeded.
But even without jQueryUI, when we define $ we can use any useful jQuery functions, for example: .
![](/AngularModal/jQuery-5_1.png)
5. Bootstrap modal.
Unfortunately, I have no time to details description about https://getbootstrap.com/docs/4.0/components/modal/, but workflow is absolutely similar as above. Bootstrap use jQuery as engine and there is no need difference with previous charter.
- (2024) Google Cloud and Cloudflare
- (2023) CloudflareWorker and Supabase
- (2022) JS, Css
- (2022) Typescript, Webpack
- (2022) Angular, RxJs, Firebase, MongoDb
- (2022) Node, NestJs, Electron, Pwa, Telegram
- (2022) React, Redux, GraphQL, NextJs
- (2022) Angular/Typescript, JS books
![](http://forum.vb-net.com/GetTopicCount.png?id=5108a335-841f-463f-815c-cc3777c69683)
<SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |