Development is easy and fun with the proper development tools, less manual work and some fancy things we love.
This article is about creating our own widget and integrate it into a website that helps us in the development or looks cool or does both.
The idea here is unlike components, widgets will be rendered automatically, floats on the UI and can be movable and resizable like the desktop or the mobile widgets.
Here is the sample template of the widget that I have created to create widgets.
Let's see an example of such a widget- a Todo widget
I have cloned a sample dashboard from a codepen pen and imported the widget file in it. You can see a floating todo widget floating at top right that shows a list of todo tasks. This widget uses local storage so even on reload, you can see your previously added todo list.
Here is the git repo for that todo widget. You also will find a sample template where you can put your html, css and JS code and try your idea.
We can create any kind of widget that we want. Here are some other examples
or a music player
What else you want as a widget? please comment
Angular has the functionality of creating a single file web-element which can be used in any site developed in any framework or even in simple HTML after exporting the angular component and importing it in any project.
These widgets also have an advantage over plugins that they have more access to plugins. My next article will be creating this type of widgets using angular.