{"id":29317,"date":"2018-10-24T00:00:00","date_gmt":"2018-10-23T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/componenti-avanzati-in-angular-come-creare-una-dashboard\/"},"modified":"2021-05-20T19:30:53","modified_gmt":"2021-05-20T17:30:53","slug":"angular-advanced-components-how-to-create-a-dashboard","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/angular-advanced-components-how-to-create-a-dashboard\/","title":{"rendered":"Angular Advanced Components: how to create a dashboard"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

In the last few days, I was in Rome by a customer, who is porting a vb6 application to Angular. During the code review, he asks me to add a dashboard with resizable widgets, that can be positioned on the page with the classical drag & drop approach.<\/p>\n\n\n\n

We did some search on google, and we choose to start from gridstack.js (http:\/\/gridstackjs.com\/<\/a>) which is a JavaScript library based on jQuery and jQuery-UI drag & drop feature. The employment of jQuery is almost anachronistic today, but it is still very used and some plugins are really interesting. This is then a good opportunity to analyze, at the same time, some advanced features of Angular components and how to integrate jQuery plugins.<\/p>\n\n\n\n

As a first step we create a new project with the angular-cli, enter in the project folder, install the gridstack dependency, generate two new components named dashboard and widget, and finally open Visual Studio Code on the folder:<\/p>\n\n\n\n