{"id":29245,"date":"2018-10-24T00:00:00","date_gmt":"2018-10-23T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=29245"},"modified":"2021-01-13T09:40:50","modified_gmt":"2021-01-13T08:40:50","slug":"componenti-avanzati-in-angular-come-creare-una-dashboard","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/","title":{"rendered":"Componenti avanzati in Angular: come creare una dashboard"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"552\" data-attachment-id=\"29246\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/0b2fdd00-192a-4095-b0bc-627097e78f0e\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&amp;ssl=1\" data-orig-size=\"1024,552\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"0b2fdd00-192a-4095-b0bc-627097e78f0e\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?resize=1024%2C552&#038;ssl=1\" alt=\"\" class=\"wp-image-29246\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e-980x528.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e-480x259.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nei giorni scorsi, sono stato a Roma da&nbsp;un cliente che sta facendo il porting di un&#8217;applicazione vb6 ad Angular. Durante la code review, mi ha chiesto di aggiungere una dashboard con widgets ridimensionabili, che&nbsp; possano essere posizionate sulla pagina con il classico approccio drag&amp;drop.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dopo qualche ricerca su Google, abbiamo scelto di partire da gridstack.js (<a href=\"http:\/\/gridstackjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/gridstackjs.com\/<\/a>), che \u00e8 una libreria JavaScript basata su jQuery e la feature di drag &amp; drop di jQuery-UI. L&#8217;utilizzo di&nbsp;&nbsp;jQuery \u00e8 oggi quasi anacronistico, ma \u00e8 ancora molto utilizzato e&nbsp;alcuni plugin sono davvero interessanti. Questa \u00e8 quindi una buona occasione per analizzare insieme alcune feature avanzate dei componenti di Angular e come integrare i plugin jQuery.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Come primo passo, creiamo un nuovo progetto con&nbsp;l&#8217;Angular-CLI, entriamo nella cartella del progetto, installiamo le dipendenze di&nbsp;gridstack, generiamo due nuovi componenti chiamati dashboard e widget, e infine apriamo Visual Studio Code sulla cartella:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>ng new dashboard;<\/li><li>cd dashboard;<\/li><li>npm install -save jquery jqueryui lodash gridstack;<\/li><li>ng g component dashboard;<\/li><li>ng g component widget;<\/li><li>code.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Se preferite, potete linkare jquery, jquery-ui, lodash, e gridstack da una CDN, sulla base dei vostri requisiti, ma, se avete scaricato queste librerie, dovete aggiungerne i percorsi al file\u00a0<em>angular-cli.json<\/em>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"785\" height=\"411\" data-attachment-id=\"29249\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/6d6274b6-9cbb-44f2-ac7c-354cb405c902\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/6d6274b6-9cbb-44f2-ac7c-354cb405c902.png?fit=785%2C411&amp;ssl=1\" data-orig-size=\"785,411\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"6d6274b6-9cbb-44f2-ac7c-354cb405c902\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/6d6274b6-9cbb-44f2-ac7c-354cb405c902.png?fit=785%2C411&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/6d6274b6-9cbb-44f2-ac7c-354cb405c902.png?resize=785%2C411&#038;ssl=1\" alt=\"\" class=\"wp-image-29249\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/6d6274b6-9cbb-44f2-ac7c-354cb405c902.png 785w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/6d6274b6-9cbb-44f2-ac7c-354cb405c902-480x251.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 785px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Come descritto nella documentazione, possiamo realizzare una semplice dashboard creando un contenitore con la classe grid-stack, che racchiuda i contenitori delle widget identificati dalla classe &#8216;grid-stack-item&#8217; e alcuni attributi data-* personalizzati per la posizione (<em>data-gs-x<\/em>\u00a0e\u00a0<em>data-gs-y<\/em>), la larghezza (<em>data-gs-width<\/em>) e l&#8217;altezza (<em>data-gs-height<\/em>). Quindi il nostro\u00a0<em>dashboard.component.html<\/em>\u00a0sar\u00e0 come segue:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"768\" data-attachment-id=\"29251\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/0f1a5701-26c0-4efa-a055-46950d4159d1\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0f1a5701-26c0-4efa-a055-46950d4159d1.png?fit=980%2C768&amp;ssl=1\" data-orig-size=\"980,768\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"0f1a5701-26c0-4efa-a055-46950d4159d1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0f1a5701-26c0-4efa-a055-46950d4159d1.png?fit=980%2C768&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0f1a5701-26c0-4efa-a055-46950d4159d1.png?resize=980%2C768&#038;ssl=1\" alt=\"\" class=\"wp-image-29251\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/0f1a5701-26c0-4efa-a055-46950d4159d1.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/0f1a5701-26c0-4efa-a055-46950d4159d1-480x376.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 980px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Il contenuto della widget \u00e8 identificato dalla classe &#8216;grid-stack-item-content&#8217;, che pu\u00f2 essere utilizzata per stilizzare l&#8217;aspetto della widget nel file\u00a0<em>dashboard.component.css<\/em>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"358\" height=\"182\" data-attachment-id=\"29254\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/5852e5aa-2581-4a7f-93af-5e7b14a6a00e\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/5852e5aa-2581-4a7f-93af-5e7b14a6a00e.png?fit=358%2C182&amp;ssl=1\" data-orig-size=\"358,182\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"5852e5aa-2581-4a7f-93af-5e7b14a6a00e\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/5852e5aa-2581-4a7f-93af-5e7b14a6a00e.png?fit=358%2C182&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/5852e5aa-2581-4a7f-93af-5e7b14a6a00e.png?resize=358%2C182&#038;ssl=1\" alt=\"\" class=\"wp-image-29254\" srcset=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/5852e5aa-2581-4a7f-93af-5e7b14a6a00e.png?w=358&amp;ssl=1 358w, https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/5852e5aa-2581-4a7f-93af-5e7b14a6a00e.png?resize=300%2C153&amp;ssl=1 300w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Gridstack<\/strong>&nbsp;\u00e8 un plugin jQuery, quindi abbiamo bisogno di usare jQuery nel nostro codice per inizializzare il plugin. Il problema con&nbsp;jQuery \u00e8 che dovete fare assunzioni sulla struttura HTML per selezione l&#8217;elemento del DOM appropriato, nel nostro caso abbiamo bisogno di aggiungere la seguente riga di codice:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>$(&#8216;.grid-stack&#8217;).gridstack();<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Angular, la separazione tra la logica del componente (il file .ts) e la struttura HTML (il file .html) \u00e8 molto importante, e di solito incapsuliamo le chiamate che hanno bisogno di conoscere il DOM in direttive Angular, anche perch\u00e9&nbsp;abbiamo bisogno del DOM pronto quando eseguiamo una chiamata jQuery. Ma, in questo caso, il componente esegue solo questa chiamata, perch\u00e9&nbsp;tutto il lavoro viene fatto dal plugin. Quindi, questo \u00e8 forse l&#8217;unico caso in cui possiamo fare assunzioni sulla struttura HTML, e sporcare la logica del component con la chiamata jQuery.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se proprio non ci piace possiamo usare il decoratore\u00a0<strong>@ViewChild<\/strong>\u00a0su una propriet\u00e0 di tipo ElementRef e mettere un\u00a0<em>#gridStackContainer<\/em>\u00a0sul div in questione:\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"117\" data-attachment-id=\"29257\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/286e19a7-2861-4b19-9e2d-9da9d7d44701\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/286e19a7-2861-4b19-9e2d-9da9d7d44701.png?fit=1024%2C117&amp;ssl=1\" data-orig-size=\"1024,117\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"286e19a7-2861-4b19-9e2d-9da9d7d44701\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/286e19a7-2861-4b19-9e2d-9da9d7d44701.png?fit=1024%2C117&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/286e19a7-2861-4b19-9e2d-9da9d7d44701.png?resize=1024%2C117&#038;ssl=1\" alt=\"\" class=\"wp-image-29257\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/286e19a7-2861-4b19-9e2d-9da9d7d44701.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/286e19a7-2861-4b19-9e2d-9da9d7d44701-980x112.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/286e19a7-2861-4b19-9e2d-9da9d7d44701-480x55.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A questo punto, la domanda \u00e8: quando? Quando il DOM \u00e8 pronto per la chiamata jQuery dal componente? Per\u00a0questo scopo, i componenti Angular hanno alcuni hooks che vengono chiamati in varie fasi del ciclo di vita del componente. Maggiori informazioni su questo argomento, potete trovarle nella documentazione ufficiale (<a rel=\"noreferrer noopener\" href=\"https:\/\/angular.io\/guide\/lifecycle-hooks\" target=\"_blank\">https:\/\/angular.io\/guide\/lifecycle-hooks<\/a>).\u00a0Nel nostro caso, abbiamo bisogno dell&#8217;hook AfterViewInit, che viene chiamata da Angular dopo l&#8217;inizializzazione della view del componente\u00a0(e anche delle eventuali view figlie):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"627\" height=\"768\" data-attachment-id=\"29260\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/4d562304-3375-4bf9-bfbe-8465a83878eb\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/4d562304-3375-4bf9-bfbe-8465a83878eb.png?fit=627%2C768&amp;ssl=1\" data-orig-size=\"627,768\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"4d562304-3375-4bf9-bfbe-8465a83878eb\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/4d562304-3375-4bf9-bfbe-8465a83878eb.png?fit=627%2C768&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/4d562304-3375-4bf9-bfbe-8465a83878eb.png?resize=627%2C768&#038;ssl=1\" alt=\"\" class=\"wp-image-29260\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/4d562304-3375-4bf9-bfbe-8465a83878eb.png 627w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/4d562304-3375-4bf9-bfbe-8465a83878eb-480x588.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 627px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ovviamente, Typescript non conosce il simbolo $ di jQuery, quindi dobbiamo dichiarare una costante per passare la traspilazione Typescript senza errori, come potete vedere dopo l&#8217;istruzione import:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>declare const $: any;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Per finire questo primo step, dobbiamo cambiare\u00a0app.component.html come segue:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"398\" height=\"35\" data-attachment-id=\"29262\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/94d63fe8-f4d5-43e5-8493-4d0059885917\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/94d63fe8-f4d5-43e5-8493-4d0059885917.png?fit=398%2C35&amp;ssl=1\" data-orig-size=\"398,35\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"94d63fe8-f4d5-43e5-8493-4d0059885917\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/94d63fe8-f4d5-43e5-8493-4d0059885917.png?fit=398%2C35&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/94d63fe8-f4d5-43e5-8493-4d0059885917.png?resize=398%2C35&#038;ssl=1\" alt=\"\" class=\"wp-image-29262\" srcset=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/94d63fe8-f4d5-43e5-8493-4d0059885917.png?w=398&amp;ssl=1 398w, https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/94d63fe8-f4d5-43e5-8493-4d0059885917.png?resize=300%2C26&amp;ssl=1 300w\" sizes=\"auto, (max-width: 398px) 100vw, 398px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Eseguendo l&#8217;applicazione con il comando\u00a0<em>ng serve -o<\/em>, possiamo vedere il risultato:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"613\" data-attachment-id=\"29265\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/339c0057-256c-43d8-8d01-5a298bd294f2\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/339c0057-256c-43d8-8d01-5a298bd294f2.png?fit=1024%2C613&amp;ssl=1\" data-orig-size=\"1024,613\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"339c0057-256c-43d8-8d01-5a298bd294f2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/339c0057-256c-43d8-8d01-5a298bd294f2.png?fit=1024%2C613&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/339c0057-256c-43d8-8d01-5a298bd294f2.png?resize=1024%2C613&#038;ssl=1\" alt=\"\" class=\"wp-image-29265\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/339c0057-256c-43d8-8d01-5a298bd294f2.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/339c0057-256c-43d8-8d01-5a298bd294f2-980x587.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/339c0057-256c-43d8-8d01-5a298bd294f2-480x287.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ok, \u00e8 il momento di astrarre i nostri componenti per renderli riutilizzabili. Cominciamo spostando la struttura del widget nel componente\u00a0widget, esponendone le propriet\u00e0 con\u00a0Input del\u00a0componente. Il\u00a0<em>widget.component.ts<\/em>\u00a0sar\u00e0 come segue:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"534\" height=\"667\" data-attachment-id=\"29268\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/ef012482-8e95-42e5-b087-29b9f578eaa8\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef012482-8e95-42e5-b087-29b9f578eaa8.png?fit=534%2C667&amp;ssl=1\" data-orig-size=\"534,667\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ef012482-8e95-42e5-b087-29b9f578eaa8\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef012482-8e95-42e5-b087-29b9f578eaa8.png?fit=534%2C667&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef012482-8e95-42e5-b087-29b9f578eaa8.png?resize=534%2C667&#038;ssl=1\" alt=\"\" class=\"wp-image-29268\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/ef012482-8e95-42e5-b087-29b9f578eaa8.png 534w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/ef012482-8e95-42e5-b087-29b9f578eaa8-480x600.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 534px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Il\u00a0<em>widget.component.html<\/em>\u00a0dovrebbe essere come segue:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"515\" height=\"289\" data-attachment-id=\"29271\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/35f797e9-0bd1-4325-b9d0-caf2328d0c3f\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/35f797e9-0bd1-4325-b9d0-caf2328d0c3f.png?fit=515%2C289&amp;ssl=1\" data-orig-size=\"515,289\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"35f797e9-0bd1-4325-b9d0-caf2328d0c3f\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/35f797e9-0bd1-4325-b9d0-caf2328d0c3f.png?fit=515%2C289&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/35f797e9-0bd1-4325-b9d0-caf2328d0c3f.png?resize=515%2C289&#038;ssl=1\" alt=\"\" class=\"wp-image-29271\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/35f797e9-0bd1-4325-b9d0-caf2328d0c3f.png 515w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/35f797e9-0bd1-4325-b9d0-caf2328d0c3f-480x269.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 515px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ma, come ci dice il compilatore, non possiamo bindare attributi sconosciuti alle nostre propriet\u00e0, e i data-* sono troppo generici per essere conosciuti da angular. Possiamo risolvere il problema utilizzando il binding [attr.]:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"281\" data-attachment-id=\"29273\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/aa77f0ba-a9d4-4514-95bc-5d3ab0e84d68\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/aa77f0ba-a9d4-4514-95bc-5d3ab0e84d68.png?fit=512%2C281&amp;ssl=1\" data-orig-size=\"512,281\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"aa77f0ba-a9d4-4514-95bc-5d3ab0e84d68\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/aa77f0ba-a9d4-4514-95bc-5d3ab0e84d68.png?fit=512%2C281&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/aa77f0ba-a9d4-4514-95bc-5d3ab0e84d68.png?resize=512%2C281&#038;ssl=1\" alt=\"\" class=\"wp-image-29273\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/aa77f0ba-a9d4-4514-95bc-5d3ab0e84d68.png 512w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/aa77f0ba-a9d4-4514-95bc-5d3ab0e84d68-480x263.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 512px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Notate l&#8217;elemento ng-content: ci pemette di proiettare del contenuto nel nostro componente:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"778\" height=\"91\" data-attachment-id=\"29276\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/35a76158-3a76-4c77-8762-cb5b013370da\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/35a76158-3a76-4c77-8762-cb5b013370da.png?fit=778%2C91&amp;ssl=1\" data-orig-size=\"778,91\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"35a76158-3a76-4c77-8762-cb5b013370da\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/35a76158-3a76-4c77-8762-cb5b013370da.png?fit=778%2C91&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/35a76158-3a76-4c77-8762-cb5b013370da.png?resize=778%2C91&#038;ssl=1\" alt=\"\" class=\"wp-image-29276\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/35a76158-3a76-4c77-8762-cb5b013370da.png 778w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/35a76158-3a76-4c77-8762-cb5b013370da-480x56.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 778px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Quindi, l&#8217;elemento span contenente Widget 1 sar\u00e0 proiettato nel componente widget, esattamente alla posizione ng-content. Una feature davvero interessante, possiamo usarla anche in\u00a0<em>dashboard.component.html<\/em>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"90\" data-attachment-id=\"29281\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/9711491b-262c-4ba8-855d-6212b87281a9\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9711491b-262c-4ba8-855d-6212b87281a9.png?fit=1024%2C90&amp;ssl=1\" data-orig-size=\"1024,90\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"9711491b-262c-4ba8-855d-6212b87281a9\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9711491b-262c-4ba8-855d-6212b87281a9.png?fit=1024%2C90&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9711491b-262c-4ba8-855d-6212b87281a9.png?resize=1024%2C90&#038;ssl=1\" alt=\"\" class=\"wp-image-29281\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/9711491b-262c-4ba8-855d-6212b87281a9.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/9711491b-262c-4ba8-855d-6212b87281a9-980x86.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/9711491b-262c-4ba8-855d-6212b87281a9-480x42.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Quindi, il nostro app.component.html diventer\u00e0 come segue:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"578\" height=\"768\" data-attachment-id=\"29284\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/804015ca-741d-4d4f-87eb-27155d440a3a\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/804015ca-741d-4d4f-87eb-27155d440a3a.png?fit=578%2C768&amp;ssl=1\" data-orig-size=\"578,768\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"804015ca-741d-4d4f-87eb-27155d440a3a\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/804015ca-741d-4d4f-87eb-27155d440a3a.png?fit=578%2C768&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/804015ca-741d-4d4f-87eb-27155d440a3a.png?resize=578%2C768&#038;ssl=1\" alt=\"\" class=\"wp-image-29284\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/804015ca-741d-4d4f-87eb-27155d440a3a.png 578w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/804015ca-741d-4d4f-87eb-27155d440a3a-480x638.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 578px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ma, eseguendo l&#8217;applicazione, il risultato non \u00e8 come ci aspetteremmo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"455\" data-attachment-id=\"29286\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/8b96cb20-e9e0-41dc-b6f4-f726320b14ba\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/8b96cb20-e9e0-41dc-b6f4-f726320b14ba.png?fit=1024%2C455&amp;ssl=1\" data-orig-size=\"1024,455\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"8b96cb20-e9e0-41dc-b6f4-f726320b14ba\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/8b96cb20-e9e0-41dc-b6f4-f726320b14ba.png?fit=1024%2C455&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/8b96cb20-e9e0-41dc-b6f4-f726320b14ba.png?resize=1024%2C455&#038;ssl=1\" alt=\"\" class=\"wp-image-29286\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/8b96cb20-e9e0-41dc-b6f4-f726320b14ba.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/8b96cb20-e9e0-41dc-b6f4-f726320b14ba-980x435.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/8b96cb20-e9e0-41dc-b6f4-f726320b14ba-480x213.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Perch\u00e9? Se guardiamo la struttura del DOM attuale\u00a0possiamo chiaramente vedere il problema:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"531\" height=\"410\" data-attachment-id=\"29289\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/89b65386-18f6-4aa8-b1b3-23b28e62d8be\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/89b65386-18f6-4aa8-b1b3-23b28e62d8be.png?fit=531%2C410&amp;ssl=1\" data-orig-size=\"531,410\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"89b65386-18f6-4aa8-b1b3-23b28e62d8be\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/89b65386-18f6-4aa8-b1b3-23b28e62d8be.png?fit=531%2C410&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/89b65386-18f6-4aa8-b1b3-23b28e62d8be.png?resize=531%2C410&#038;ssl=1\" alt=\"\" class=\"wp-image-29289\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/89b65386-18f6-4aa8-b1b3-23b28e62d8be.png 531w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/89b65386-18f6-4aa8-b1b3-23b28e62d8be-480x371.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 531px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Tra la dashboard e la widget, Angular posiziona un elemento con il nome del selettore del componente e questo crea problemi con molti plugin jQuery, tra cui gridstack, perch\u00e9 cerca il figlio diretto\u00a0con la classe &#8216;grid-stack-item&#8217; e gli attributi data-*, ma invece trova il nostro. Come possiamo risolvere il problema? La nostra widget non deve essere necessariamente un div, quindi possiamo spostare la classe grid-stack-item e gli attributi data-* sull&#8217;elemento\u00a0usando\u00a0la propriet\u00e0 host del componente o, meglio, il decoratore\u00a0<em>@HostBinding()<\/em>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"627\" height=\"768\" data-attachment-id=\"29291\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/4d562304-3375-4bf9-bfbe-8465a83878eb-1\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/4d562304-3375-4bf9-bfbe-8465a83878eb-1.png?fit=627%2C768&amp;ssl=1\" data-orig-size=\"627,768\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"4d562304-3375-4bf9-bfbe-8465a83878eb-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/4d562304-3375-4bf9-bfbe-8465a83878eb-1.png?fit=627%2C768&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/4d562304-3375-4bf9-bfbe-8465a83878eb-1.png?resize=627%2C768&#038;ssl=1\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/4d562304-3375-4bf9-bfbe-8465a83878eb-1.png 627w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/4d562304-3375-4bf9-bfbe-8465a83878eb-1-480x588.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 627px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Grazie al decoratore HostBinding possiamo aggiungere l&#8217;elemento bindato sul selettore del nostro componente, risolvendo il nostro problema:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"454\" data-attachment-id=\"29294\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/8d03f275-331d-4896-b741-f36587a83dd7\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/8d03f275-331d-4896-b741-f36587a83dd7.png?fit=1024%2C454&amp;ssl=1\" data-orig-size=\"1024,454\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"8d03f275-331d-4896-b741-f36587a83dd7\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/8d03f275-331d-4896-b741-f36587a83dd7.png?fit=1024%2C454&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/8d03f275-331d-4896-b741-f36587a83dd7.png?resize=1024%2C454&#038;ssl=1\" alt=\"\" class=\"wp-image-29294\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/8d03f275-331d-4896-b741-f36587a83dd7.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/8d03f275-331d-4896-b741-f36587a83dd7-980x434.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/8d03f275-331d-4896-b741-f36587a83dd7-480x213.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Perfetto, ma facciamo un ulteriore step. Che succede se\u00a0la definizione delle widget viene da un servizio? Come cambia la nostra implementazione? Apparentemente sembra una domanda semplice, perch\u00e9 dobbiamo solo simulare una chiamata a un servizio e ciclare sui risultati. Ok, proviamo a farlo. Aggiungiamo due file al componente dashboard, un\u00a0<em>dashboard.model.ts<\/em>\u00a0per creare un tipo Widget:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"291\" height=\"218\" data-attachment-id=\"29297\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/b26fd97b-022e-4210-937e-94ca981efc2e\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/b26fd97b-022e-4210-937e-94ca981efc2e.png?fit=291%2C218&amp;ssl=1\" data-orig-size=\"291,218\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"b26fd97b-022e-4210-937e-94ca981efc2e\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/b26fd97b-022e-4210-937e-94ca981efc2e.png?fit=291%2C218&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/b26fd97b-022e-4210-937e-94ca981efc2e.png?resize=291%2C218&#038;ssl=1\" alt=\"\" class=\"wp-image-29297\" srcset=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/b26fd97b-022e-4210-937e-94ca981efc2e.png?w=291&amp;ssl=1 291w, https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/b26fd97b-022e-4210-937e-94ca981efc2e.png?resize=200%2C150&amp;ssl=1 200w\" sizes=\"auto, (max-width: 291px) 100vw, 291px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">E un&nbsp;<em>dashboard.service.ts<\/em>, per simulare la chiamata a un servizio creando e restituendo un Subject e usando un setTimeout per ritardare di 1 secondo l&#8217;arrivo dei dati:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.tolist.net\/Storage\/d6559c44-6647-4f0f-9bca-1cfdc44a4451\/Articles\/6969d711-c586-4fcb-ac40-a515d0216ba6.png?w=1080\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Iniettando il servizio nel nostro dashboard.component.ts, possiamo chiamare il servizio e salvare il risultato in un array specifico come segue:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"761\" height=\"768\" data-attachment-id=\"29299\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/9071f33c-6a2e-4420-9996-52d611f44d98\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9071f33c-6a2e-4420-9996-52d611f44d98.png?fit=761%2C768&amp;ssl=1\" data-orig-size=\"761,768\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"9071f33c-6a2e-4420-9996-52d611f44d98\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9071f33c-6a2e-4420-9996-52d611f44d98.png?fit=761%2C768&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/9071f33c-6a2e-4420-9996-52d611f44d98.png?resize=761%2C768&#038;ssl=1\" alt=\"\" class=\"wp-image-29299\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/9071f33c-6a2e-4420-9996-52d611f44d98.png 761w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/9071f33c-6a2e-4420-9996-52d611f44d98-480x484.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 761px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Dashboard.component.html cambia sulla base della nuova sorgente delle widgets come segue:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"158\" data-attachment-id=\"29302\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/1e37b847-c085-4ac0-ac7a-f00913deb70b-1\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/1e37b847-c085-4ac0-ac7a-f00913deb70b-1.png?fit=1024%2C158&amp;ssl=1\" data-orig-size=\"1024,158\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"1e37b847-c085-4ac0-ac7a-f00913deb70b-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/1e37b847-c085-4ac0-ac7a-f00913deb70b-1.png?fit=1024%2C158&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/1e37b847-c085-4ac0-ac7a-f00913deb70b-1.png?resize=1024%2C158&#038;ssl=1\" alt=\"\" class=\"wp-image-29302\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/1e37b847-c085-4ac0-ac7a-f00913deb70b-1.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/1e37b847-c085-4ac0-ac7a-f00913deb70b-1-980x151.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/1e37b847-c085-4ac0-ac7a-f00913deb70b-1-480x74.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Eseguendo l&#8217;applicazione, comunque,\u00a0ci rendiamo conto che qualcosa non funziona e la console non ci da errori.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"551\" data-attachment-id=\"29305\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/0b98ce37-3b36-46ed-9147-a1bb04d05c92\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b98ce37-3b36-46ed-9147-a1bb04d05c92.png?fit=1024%2C551&amp;ssl=1\" data-orig-size=\"1024,551\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"0b98ce37-3b36-46ed-9147-a1bb04d05c92\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b98ce37-3b36-46ed-9147-a1bb04d05c92.png?fit=1024%2C551&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b98ce37-3b36-46ed-9147-a1bb04d05c92.png?resize=1024%2C551&#038;ssl=1\" alt=\"\" class=\"wp-image-29305\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/0b98ce37-3b36-46ed-9147-a1bb04d05c92.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/0b98ce37-3b36-46ed-9147-a1bb04d05c92-980x527.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/0b98ce37-3b36-46ed-9147-a1bb04d05c92-480x258.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Il problema \u00e8 che quando chiamiamo\u00a0<em>$(this.griStackContainer.nativeElement).gridstack();<\/em>\u00a0la dashboard non contiene ancora le widget\u00a0(abbiamo ritardato l&#8217;arrivo dei dati di 1 secondo). E anche se spostiamo la chiamata nella\u00a0<em>subscribe()<\/em>, non siamo ancora pronti perch\u00e9 il rendering degli args associati all&#8217;array richiede un tempo. Per risolvere il problema possiamo usare un altro hook del componente, chiamato AfterViewChecked, che viene chiamato dopo ogni check di Angular sulle view del componente e dei suoi figli:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"552\" data-attachment-id=\"29307\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/68999571-450e-4960-b26a-9c97fd5076ac\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/68999571-450e-4960-b26a-9c97fd5076ac.png?fit=1024%2C552&amp;ssl=1\" data-orig-size=\"1024,552\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"68999571-450e-4960-b26a-9c97fd5076ac\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/68999571-450e-4960-b26a-9c97fd5076ac.png?fit=1024%2C552&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/68999571-450e-4960-b26a-9c97fd5076ac.png?resize=1024%2C552&#038;ssl=1\" alt=\"\" class=\"wp-image-29307\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/68999571-450e-4960-b26a-9c97fd5076ac.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/68999571-450e-4960-b26a-9c97fd5076ac-980x528.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/68999571-450e-4960-b26a-9c97fd5076ac-480x259.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Perfetto! No? Un sospetto deve sempre affiorare alla vostra mente quando lavorate con i plugin di jQuery: che succede se i dati cambiano dopo la prima volta e il vostro codice\u00a0jQuery viene chiamato di nuovo? Tipicamente smette di funzionare bene, e succede anche nel nostro caso\u2026 Se aggiungiamo un secondo setTimeout al nostro service, come segue:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1013\" height=\"768\" data-attachment-id=\"29310\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/4c6658f2-17f4-45e2-b860-4619feb98ccc\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/4c6658f2-17f4-45e2-b860-4619feb98ccc.png?fit=1013%2C768&amp;ssl=1\" data-orig-size=\"1013,768\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"4c6658f2-17f4-45e2-b860-4619feb98ccc\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/4c6658f2-17f4-45e2-b860-4619feb98ccc.png?fit=1013%2C768&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/4c6658f2-17f4-45e2-b860-4619feb98ccc.png?resize=1013%2C768&#038;ssl=1\" alt=\"\" class=\"wp-image-29310\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/4c6658f2-17f4-45e2-b860-4619feb98ccc.png 1013w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/4c6658f2-17f4-45e2-b860-4619feb98ccc-980x743.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/4c6658f2-17f4-45e2-b860-4619feb98ccc-480x364.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1013px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Dopo 5 secondi, la nostra applicazione mostra correttamente le widgets, ma queste non sono n\u00e8 draggabili n\u00e8 ridimensionabili\u2026<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"551\" data-attachment-id=\"29312\" data-permalink=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/attachment\/c4274d30-5e51-4831-a46c-606e08b4cff3\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/c4274d30-5e51-4831-a46c-606e08b4cff3.png?fit=1024%2C551&amp;ssl=1\" data-orig-size=\"1024,551\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"c4274d30-5e51-4831-a46c-606e08b4cff3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/c4274d30-5e51-4831-a46c-606e08b4cff3.png?fit=1024%2C551&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/c4274d30-5e51-4831-a46c-606e08b4cff3.png?resize=1024%2C551&#038;ssl=1\" alt=\"\" class=\"wp-image-29312\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/c4274d30-5e51-4831-a46c-606e08b4cff3.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/c4274d30-5e51-4831-a46c-606e08b4cff3-980x527.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/c4274d30-5e51-4831-a46c-606e08b4cff3-480x258.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Se avete un po&#8217; di esperienza con jQuery, sapete che la soluzione \u00e8 richiamare l&#8217;istruzione del plugin jQuery, ma prima abbiamo bisogno di distruggere la griglia precedente per rendere funzionante il nostro codice. In linea con quanto indicato nella documentazione di gridstack, il codice cambia come segue:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.tolist.net\/Storage\/d6559c44-6647-4f0f-9bca-1cfdc44a4451\/Articles\/5c08fa71-33e5-4683-8b48-17320328d1bb.png?w=1080\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Adesso funziona bene!&nbsp;Potete trovate il codice sulla mia pagina GitHub, ho creato una branch per ogni step (step1, step2, e step3) e mergiato lo step3 su master a questo indirizzo:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/apomic80\/dashboard\">https:\/\/github.com\/apomic80\/dashboard<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Spero vi sia utile, non solo per l&#8217;implementazione della dashboard, ma anche nel caso dobbiate integrare altri plugin&nbsp;jQuery.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A presto.<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Come usare i componenti in Angular per creare una dashboard che integra librerie JavaScript legacy<\/p>\n","protected":false},"author":196716248,"featured_media":29246,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637374],"tags":[688637387,688637445],"class_list":["post-29245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-angular","tag-vscode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Componenti avanzati in Angular: come creare una dashboard - Blexin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Componenti avanzati in Angular: come creare una dashboard - Blexin\" \/>\n<meta property=\"og:description\" content=\"Come usare i componenti in Angular per creare una dashboard che integra librerie JavaScript legacy\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-23T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-13T08:40:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Michele Aponte\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michele Aponte\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/componenti-avanzati-in-angular-come-creare-una-dashboard\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/componenti-avanzati-in-angular-come-creare-una-dashboard\\\/\"},\"author\":{\"name\":\"Michele Aponte\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"headline\":\"Componenti avanzati in Angular: come creare una dashboard\",\"datePublished\":\"2018-10-23T22:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/componenti-avanzati-in-angular-come-creare-una-dashboard\\\/\"},\"wordCount\":1244,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/componenti-avanzati-in-angular-come-creare-una-dashboard\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&ssl=1\",\"keywords\":[\"Angular\",\"VScode\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/componenti-avanzati-in-angular-come-creare-una-dashboard\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/componenti-avanzati-in-angular-come-creare-una-dashboard\\\/\",\"name\":\"Componenti avanzati in Angular: come creare una dashboard - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/componenti-avanzati-in-angular-come-creare-una-dashboard\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/componenti-avanzati-in-angular-come-creare-una-dashboard\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&ssl=1\",\"datePublished\":\"2018-10-23T22:00:00+00:00\",\"dateModified\":\"2021-01-13T08:40:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/componenti-avanzati-in-angular-come-creare-una-dashboard\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/componenti-avanzati-in-angular-come-creare-una-dashboard\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/componenti-avanzati-in-angular-come-creare-una-dashboard\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&ssl=1\",\"width\":1024,\"height\":552},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/componenti-avanzati-in-angular-come-creare-una-dashboard\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Componenti avanzati in Angular: come creare una dashboard\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\",\"name\":\"Michele Aponte\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"caption\":\"Michele Aponte\"},\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/author\\\/michele-aponteblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Componenti avanzati in Angular: come creare una dashboard - Blexin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/","og_locale":"it_IT","og_type":"article","og_title":"Componenti avanzati in Angular: come creare una dashboard - Blexin","og_description":"Come usare i componenti in Angular per creare una dashboard che integra librerie JavaScript legacy","og_url":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/","og_site_name":"Blexin","article_published_time":"2018-10-23T22:00:00+00:00","article_modified_time":"2021-01-13T08:40:50+00:00","og_image":[{"width":1024,"height":552,"url":"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&ssl=1","type":"image\/png"}],"author":"Michele Aponte","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Michele Aponte","Tempo di lettura stimato":"6 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/"},"author":{"name":"Michele Aponte","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"headline":"Componenti avanzati in Angular: come creare una dashboard","datePublished":"2018-10-23T22:00:00+00:00","dateModified":"2021-01-13T08:40:50+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/"},"wordCount":1244,"image":{"@id":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&ssl=1","keywords":["Angular","VScode"],"articleSection":["Blog"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/","url":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/","name":"Componenti avanzati in Angular: come creare una dashboard - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&ssl=1","datePublished":"2018-10-23T22:00:00+00:00","dateModified":"2021-01-13T08:40:50+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&ssl=1","width":1024,"height":552},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/componenti-avanzati-in-angular-come-creare-una-dashboard\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"Componenti avanzati in Angular: come creare una dashboard"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/it\/#website","url":"https:\/\/blexin.com\/it\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005","name":"Michele Aponte","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","caption":"Michele Aponte"},"url":"https:\/\/blexin.com\/it\/author\/michele-aponteblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/0b2fdd00-192a-4095-b0bc-627097e78f0e.png?fit=1024%2C552&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7BH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/29245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/users\/196716248"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/comments?post=29245"}],"version-history":[{"count":17,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/29245\/revisions"}],"predecessor-version":[{"id":29316,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/29245\/revisions\/29316"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/29246"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=29245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=29245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=29245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}