{"id":26867,"date":"2024-04-03T16:47:11","date_gmt":"2024-04-03T14:47:11","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=26867"},"modified":"2024-04-03T16:51:36","modified_gmt":"2024-04-03T14:51:36","slug":"la-nuova-funzione-output-di-angular","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/","title":{"rendered":"La nuova funzione output()\u00a0di Angular"},"content":{"rendered":"\n

Negli ultimi mesi, Angular v17<\/strong> ha introdotto una serie di nuove API per potenziare l\u2019integrazione dei Signal nei componenti e nelle direttive. Queste includono Signal Inputs<\/a><\/strong>, Model Inputs<\/a><\/strong> e Signal Queries<\/strong><\/a>.<\/p>\n\n\n\n

Guardando il quadro completo, ci manca solo una core API per concludere questo viaggio, e in questo articolo tratter\u00f2 proprio di questa: l’ultima aggiunta di Angular v17.3.0<\/strong>, la nuova funzione output()<\/strong><\/code>.<\/p>\n\n\n\n

\n\n\n\n

La nuova funzione output()<\/strong><\/h2>\n\n\n\n

Proprio come per le altre API precedentemente citate, abbiamo ora a disposizione una nuova funzione output()<\/strong><\/code> progettata per sostituire il decoratore @Output<\/strong>.

Per dichiarare un output, non dobbiamo far altro che richiamare la funzione output()<\/strong><\/code> quando dichiariamo una propriet\u00e0 di un componente o direttiva:<\/p>\n\n\n

import<\/span> { Component, output, OutputEmitterRef } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  selector: 'my-component'<\/span>,\n<\/span><\/span>  standalone: true<\/span>,\n<\/span><\/span>  template: `<button (click)=\"emitClick($event)\">Click here<\/button>`<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyComponent {\n<\/span><\/span>  buttonClick = output<MouseEvent>();\n<\/span><\/mark>  alias = output<MouseEvent>({ alias: 'aliasClick'<\/span> });\n<\/span><\/mark>\n<\/span><\/span>  emitClick(event: MouseEvent): void<\/span> {\n<\/span><\/span>    this<\/span>.buttonClick.emit(event);\n<\/span><\/mark>    this<\/span>.alias.emit(event);\n<\/span><\/mark>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Come possiamo notare dall\u2019esempio, questa API supporta anche la propriet\u00e0 alias<\/strong><\/code> ed espone la funzione emit()<\/strong><\/code>.
<\/p>\n\n\n\n
Inoltre, possiamo metterci in ascolto dell\u2019evento associato nei componenti padri, utilizzando la sintassi event binding di Angular nel template:<\/p>\n\n\n
<my-component<\/span><\/span>\n<\/span><\/span>  (buttonClick<\/span>)=\"myFunction($event)\"<\/span><\/span>\n<\/span><\/mark>  (aliasClick<\/span>)=\"myFunction($event)\"<\/span><\/span>\n<\/span><\/mark>\/><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Fin qui, tutto funziona in modo quasi identico agli output basati sul decoratore @Output<\/strong>.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Passiamo ora alla funzione subscribe()<\/strong><\/code>, che ha subito qualche cambiamento.<\/p>\n\n\n\n
\n\n\n\n
Articolo consigliato: Angular Model Inputs<\/strong><\/em><\/a><\/p>\n\n\n\n
\n\n\n\n
Come mettersi in ascolto dell\u2019evento dinamicamente<\/strong><\/h3>\n\n\n\n
Quando usiamo la funzione output()<\/strong><\/code> otteniamo un istanza di tipo OutputEmitterRef<\/strong>:<\/p>\n\n\n
buttonClick: OutputEmitterRef<MouseEvent> = output<MouseEvent>();\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Oltre al gi\u00e0 citato metodo emit()<\/strong><\/code>, rimasto pressoch\u00e9 invariato in superficie, questa classe espone anche un metodo subscribe()<\/strong><\/code> per mettersi in ascolto dell\u2019evento dinamicamente:<\/p>\n\n\n
import<\/span> { Component, Signal, effect, viewChild } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>import<\/span> { MyComponent } from<\/span> '.\/my-component'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  selector: 'my-parent-component'<\/span>,\n<\/span><\/span>  standalone: true<\/span>,\n<\/span><\/span>  imports: [MyComponent],\n<\/span><\/span>  template: `<my-component \/>`<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyParentComponent {\n<\/span><\/span>  myComponentRef: Signal<MyComponent> = viewChild.required(MyComponent);\n<\/span><\/span>\n<\/span><\/span>  constructor<\/span>(<\/span>) {\n<\/span><\/span>    effect(()<\/span> =><\/span> {\n<\/span><\/span>      this<\/span>.myComponentRef().myOutput.subscribe((event<\/span>: MouseEvent<\/span><\/span>) =><\/span> {\n<\/span><\/mark>        console<\/span>.log('Manual subscription:'<\/span>, event);\n<\/span><\/mark>      });\n<\/span><\/mark>    });\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
La subscription generata da questa classe non \u00e8 basata su RxJs<\/strong>, dunque non possiamo utilizzare la funzione pipe()<\/strong><\/code> e gli operatori. Nonostante ci\u00f2, espone comunque una funzione unsubscribe()<\/strong><\/code> per terminarla dinamicamente:<\/p>\n\n\n
const<\/span> subscription = this<\/span>.myComponentRef().myOutput.subscribe(\n<\/span><\/span> (event<\/span>: MouseEvent<\/span><\/span>) =><\/span> {\n<\/span><\/span>   \/\/ Unsubscribes to listen only the first event, if any<\/span>\n<\/span><\/span>   subscription.unsubscribe();\n<\/span><\/mark>  }\n<\/span><\/span>);\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
\u00c8 inoltre completata automaticamente quando il componente, o direttiva, viene distrutto.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
\n\n\n\n
Le nuove funzioni rxjs-interop<\/strong><\/h2>\n\n\n\n
Per estendere ulteriormente le potenzialit\u00e0 di questa nuova API, sono state inoltre introdotte due nuove funzioni nel pacchetto RxJs Interop<\/strong>.<\/p>\n\n\n\n
outputFromObservable( )<\/h3>\n\n\n\n
Grazie alla funzione outputFromObservable()<\/strong><\/code> possiamo ora creare un output partendo da un Observable<\/strong>.<\/p>\n\n\n\n
L\u2019output generato emette dunque per ogni nuovo valore emesso dell\u2019Observable<\/strong>:<\/p>\n\n\n
import<\/span> { Component, OutputRef } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>import<\/span> { outputFromObservable } from<\/span> '@angular\/core\/rxjs-interop'<\/span>;\n<\/span><\/mark>import<\/span> { interval } from<\/span> 'rxjs'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  selector: 'my-timer-component'<\/span>,\n<\/span><\/span>  standalone: true<\/span>,\n<\/span><\/span>  template: `...`<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyTimerComponent {\n<\/span><\/span> timer: OutputRef<number<\/span>> = outputFromObservable(interval(1000<\/span>));\n<\/span><\/mark> timerAlias = outputFromObservable(interval(1000<\/span>), { alias: 'timerChange'<\/span> });\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Sia l\u2019Observable<\/strong> che l\u2019output vengono completati automaticamente quando il componente, o direttiva, viene distrutto.<\/p>\n\n\n\n
In caso di errore l\u2019Observable<\/strong> viene interrotto, di conseguenza l\u2019output smette di emettere e l\u2019errore si propaga (se non \u00e8 gestito).<\/p>\n\n\n\n
\"Codemotion<\/a><\/figure>\n\n\n\n
outputToObservable( )<\/h3>\n\n\n\n
Grazie alla funzione outputToObservable()<\/strong><\/code> possiamo invece trasformare un output in Observable<\/strong>:<\/p>\n\n\n
import<\/span> { Component, Signal, effect, viewChild } from<\/span> '@angular\/core'<\/span>;\n<\/span><\/span>import<\/span> { outputToObservable } from<\/span> '@angular\/core\/rxjs-interop'<\/span>;\n<\/span><\/mark>import<\/span> { MyComponent } from<\/span> '.\/my-component'<\/span>;\n<\/span><\/span>\n<\/span><\/span>@Component<\/span>({\n<\/span><\/span>  selector: 'my-parent-component'<\/span>,\n<\/span><\/span>  standalone: true<\/span>,\n<\/span><\/span>  imports: [MyComponent],\n<\/span><\/span>  template: `<my-component \/>`<\/span>,\n<\/span><\/span>})\n<\/span><\/span>export<\/span> class<\/span> MyParentComponent {\n<\/span><\/span>  myComponentRef: Signal<MyComponent> = viewChild.required(MyComponent);\n<\/span><\/span>\n<\/span><\/span>  constructor<\/span>(<\/span>) {\n<\/span><\/span>    effect(()<\/span> =><\/span> {\n<\/span><\/span>      outputToObservable(this<\/span>.myComponentRef().myOutput)\n<\/span><\/mark>        .subscribe((event<\/span>: MouseEvent<\/span><\/span>) =><\/span> {\n<\/span><\/mark>          console<\/span>.log('Manual subscription:'<\/span>, event);\n<\/span><\/mark>        });\n<\/span><\/mark>    });\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Anche in questo caso, sia l\u2019Observable<\/strong> che l\u2019output vengono completati automaticamente quando il componente, o direttiva, viene distrutto.<\/p>\n\n\n\n
Inoltre, data la mancanza di errori negli output, l\u2019Observable<\/strong> risultante non emette mai notifiche di errore.<\/p>\n\n\n\n
\n\n\n\n
Grazie per aver letto questo articolo \ud83d\ude4f<\/h2>\n\n\n\n
Mi piacerebbe avere qualche feedback quindi grazie in anticipo per qualsiasi commento. \ud83d\udc4b<\/p>\n\n\n\n
Infine, se ti \u00e8 piaciuto davvero tanto, condividilo con la tua community. \ud83d\udc4b\ud83d\ude01<\/p>\n","protected":false},"excerpt":{"rendered":"
Negli ultimi mesi, Angular v17 ha introdotto una serie di nuove API per potenziare l\u2019integrazione dei Signal nei componenti e nelle direttive. Queste includono Signal Inputs, Model Inputs e Signal Queries. Guardando il quadro completo, ci manca solo una core API per concludere questo viaggio, e in questo articolo tratter\u00f2 proprio di questa: l’ultima aggiunta… Read more<\/a><\/p>\n","protected":false},"author":200,"featured_media":26900,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10265],"tags":[11586],"collections":[11708],"class_list":{"0":"post-26867","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-it","8":"tag-angular-it","9":"collections-dalla-community","10":"entry"},"yoast_head":"\nLa nuova funzione output()\u00a0di Angular - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Angular v17 ha introdotto nuove API per migliorare l'integrazione di Signal. Ecco a voi l'ultima aggiunta: la nuova funzione output().\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La nuova funzione output()\u00a0di Angular\" \/>\n<meta property=\"og:description\" content=\"Angular v17 ha introdotto nuove API per migliorare l'integrazione di Signal. Ecco a voi l'ultima aggiunta: la nuova funzione output().\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-03T14:47:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T14:51:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"608\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Davide Passafaro\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Davide Passafaro\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/\"},\"author\":{\"name\":\"Davide Passafaro\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\"},\"headline\":\"La nuova funzione output()\u00a0di Angular\",\"datePublished\":\"2024-04-03T14:47:11+00:00\",\"dateModified\":\"2024-04-03T14:51:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/\"},\"wordCount\":422,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/\",\"name\":\"La nuova funzione output()\u00a0di Angular - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png\",\"datePublished\":\"2024-04-03T14:47:11+00:00\",\"dateModified\":\"2024-04-03T14:51:36+00:00\",\"description\":\"Angular v17 ha introdotto nuove API per migliorare l'integrazione di Signal. Ecco a voi l'ultima aggiunta: la nuova funzione output().\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png\",\"width\":1080,\"height\":608,\"caption\":\"Scopriamo la nuova funzione (output) di Angular.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"La nuova funzione output()\u00a0di Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\",\"name\":\"Davide Passafaro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png\",\"caption\":\"Davide Passafaro\"},\"description\":\"My name is Davide Passafaro and I am Senior Frontend Engineer at Awork. I lead two developer communities in Rome, GDG Roma Citt\u00e0 and Angular Rome, and actively contribute to the tech community as a writer and speaker. When i shut down my computer I like to play board games and archery, not both together till now. I also like escape rooms and memes.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/davide-passafaro\/\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"La nuova funzione output()\u00a0di Angular - Codemotion Magazine","description":"Angular v17 ha introdotto nuove API per migliorare l'integrazione di Signal. Ecco a voi l'ultima aggiunta: la nuova funzione output().","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:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/","og_locale":"en_US","og_type":"article","og_title":"La nuova funzione output()\u00a0di Angular","og_description":"Angular v17 ha introdotto nuove API per migliorare l'integrazione di Signal. Ecco a voi l'ultima aggiunta: la nuova funzione output().","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2024-04-03T14:47:11+00:00","article_modified_time":"2024-04-03T14:51:36+00:00","og_image":[{"width":1080,"height":608,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png","type":"image\/png"}],"author":"Davide Passafaro","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Davide Passafaro","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/"},"author":{"name":"Davide Passafaro","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828"},"headline":"La nuova funzione output()\u00a0di Angular","datePublished":"2024-04-03T14:47:11+00:00","dateModified":"2024-04-03T14:51:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/"},"wordCount":422,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png","keywords":["Angular"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/","name":"La nuova funzione output()\u00a0di Angular - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png","datePublished":"2024-04-03T14:47:11+00:00","dateModified":"2024-04-03T14:51:36+00:00","description":"Angular v17 ha introdotto nuove API per migliorare l'integrazione di Signal. Ecco a voi l'ultima aggiunta: la nuova funzione output().","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png","width":1080,"height":608,"caption":"Scopriamo la nuova funzione (output) di Angular."},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/la-nuova-funzione-output-di-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"La nuova funzione output()\u00a0di Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828","name":"Davide Passafaro","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png","caption":"Davide Passafaro"},"description":"My name is Davide Passafaro and I am Senior Frontend Engineer at Awork. I lead two developer communities in Rome, GDG Roma Citt\u00e0 and Angular Rome, and actively contribute to the tech community as a writer and speaker. When i shut down my computer I like to play board games and archery, not both together till now. I also like escape rooms and memes.","sameAs":["https:\/\/www.linkedin.com\/in\/davide-passafaro\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2-600x600.png","author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png",1080,608,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2-300x169.png",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2-768x432.png",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png",1080,608,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2.png",1080,608,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2-100x100.png",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/image-2-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_comment_info":0,"uagb_excerpt":"Negli ultimi mesi, Angular v17 ha introdotto una serie di nuove API per potenziare l\u2019integrazione dei Signal nei componenti e nelle direttive. Queste includono Signal Inputs, Model Inputs e Signal Queries. Guardando il quadro completo, ci manca solo una core API per concludere questo viaggio, e in questo articolo tratter\u00f2 proprio di questa: l’ultima aggiunta……","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/26867","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/200"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=26867"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/26867\/revisions"}],"predecessor-version":[{"id":26911,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/26867\/revisions\/26911"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/26900"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=26867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=26867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=26867"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=26867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}