{"id":24828,"date":"2023-11-27T09:03:00","date_gmt":"2023-11-27T08:03:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=24828"},"modified":"2024-01-25T12:26:35","modified_gmt":"2024-01-25T11:26:35","slug":"angular-control-flow-la-guida-completa","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/","title":{"rendered":"Angular Control Flow: la guida\u00a0completa"},"content":{"rendered":"\n<p>La versione 17 di Angular \u00e8 stata rilasciata pochi giorni fa insieme ad un restyle grafico del logo e al nuovo blog <a href=\"http:\/\/angular.dev\" rel=\"noreferrer noopener\" target=\"_blank\">angular.dev<\/a>.<\/p>\n\n\n\n<p>In questo articolo analizzeremo insieme il nuovo control flow, che ci dar\u00e0 la possibilit\u00e0 di dimenticarci delle direttive <strong>ngIf<\/strong>, <strong>ngSwitch<\/strong> e <strong>ngFor<\/strong> grazie ad una nuova sintassi per scrivere condizioni <strong>if<\/strong>, <strong>if\/else<\/strong>, <strong>switch<\/strong> e il ciclo <strong>for<\/strong> nei nostri template.<\/p>\n\n\n\n<p>\u26a0\ufe0f <strong>ATTENZIONE:<\/strong> il nuovo control flow \u00e8 attualmente in developer preview \u26a0\ufe0f<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p>Senza dilungarmi oltre, iniziamo subito il nostro viaggio dalla condizione pi\u00f9 basilare: <strong>@if<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-if-condition\">@if condition<\/h3>\n\n\n\n<p>Per mostrare una determinata porzione del nostro template al verificarsi di una determinata condizione in Angular ci siamo sempre serviti della direttiva <strong>ngIf<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript\"><span class=\"hljs-meta\">@Component<\/span>({\n  standalone: <span class=\"hljs-literal\">true<\/span>,\n  template: <span class=\"hljs-string\">`&lt;div *ngIf=\"condition\"&gt; ... &lt;\/div&gt;`<\/span>,\n  imports: &#91;NgIf]\n})\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">class<\/span> MyComponent {}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Questa semplice direttiva ha per\u00f2 alcuni <strong>punti negativi<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La sintassi risulta poco intuitiva e troppo legata al framework;<\/li>\n\n\n\n<li>Non possiamo applicarla su gruppi di elementi, quindi siamo obbligati ad usare un elemento contenitore o <strong>ng-template<\/strong>\/<strong>ng-container<\/strong>;<\/li>\n\n\n\n<li>Dobbiamo importare il <strong>CommonModule <\/strong>o la direttiva <strong>NgIf<\/strong> nei moduli.<\/li>\n<\/ul>\n\n\n\n<p>La nuova condizione <strong>@if<\/strong> ci permette di ottenere lo stesso risultato:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">@if (condition) {\n  * your content *\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>@if<\/strong> offre una sintassi molto pi\u00f9 pulita, i blocchi condizionali risaltano immediatamente durante la lettura del template, offrendoci la possibilit\u00e0 di raggruppare <strong>gruppi di elementi<\/strong> all\u2019interno delle parentesi graffe e soprattutto: <strong>niente pi\u00f9 moduli o direttive da importare<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-else-e-nbsp-else-if\">@else e&nbsp;@else\/if<\/h4>\n\n\n\n<p>Creare condizioni <strong>if\/else<\/strong> \u00e8 sempre stata una agonia in Angular:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> *<span class=\"hljs-attr\">ngIf<\/span>=<span class=\"hljs-string\">\"condition; else otherTemplate\"<\/span>&gt;<\/span>\n  * your content *\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ng-template<\/span> #<span class=\"hljs-attr\">otherTemplate<\/span>&gt;<\/span>\n  * your other content *\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ng-template<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Dover utilizzare un <strong>ng-template<\/strong> in combinazione con una <strong>template variable<\/strong> per fornire alla direttiva <strong>ngIf<\/strong> un blocco di riserva ha sempre reso il codice poco intuitivo.<\/p>\n\n\n\n<p>Ed \u00e8 qui che <strong>@if<\/strong> viene maggiormente in nostro soccorso poich\u00e9 pu\u00f2 essere esteso utilizzando la condizione <strong>@else<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">@if (condition) {\n  * your content *\n} @else {\n  * your other content *\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Ma non \u00e8 tutto, <strong>@if<\/strong> infatti accetta la possibilit\u00e0 di concatenare ulteriori condizioni <strong>@else\/if<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">@if (condition) {\n  * your content *\n} @else if (secondCondition) {\n  * your second content *\n} @else {\n  * your other content *\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Grazie a questo potremo quindi creare template con condizioni molto complesse producendo per\u00f2 codice molto pulito e facilmente leggibile.<br>Semplice da leggere, semplice da manutenete.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p>Passiamo ora alla condizione <strong>@switch<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-switch-condition\">@switch condition<\/h3>\n\n\n\n<p>Fino ad oggi abbiamo utilizzato la direttiva <strong>ngSwitch<\/strong> per mostrare un blocco di template diverso in base ad una determinata condizione:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> &#91;<span class=\"hljs-attr\">ngSwitch<\/span>]=<span class=\"hljs-string\">\"condition\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> *<span class=\"hljs-attr\">ngSwitchCase<\/span>=<span class=\"hljs-string\">\"value1\"<\/span>&gt;<\/span>* content block value1 *<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> *<span class=\"hljs-attr\">ngSwitchCase<\/span>=<span class=\"hljs-string\">\"value2\"<\/span>&gt;<\/span>* content block value2 *<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> *<span class=\"hljs-attr\">ngSwitchDefault<\/span>&gt;<\/span>* default content *<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>In modo analogo a<strong> @if<\/strong> abbiamo ora a disposizione una nuova condizione <strong>@switch<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">@switch(condition) {\n  @case ('value1') {\n    * content block value1 *\n  } @case ('value2') {\n    * content block value2 *\n  } @default {\n    * default content *\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Anche in questo caso otteniamo una sintassi pulita e <strong>niente imports<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<p>Siamo giunti ora all\u2019ultimo argomento dell\u2019articolo: il ciclo <strong>@for<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-for-loop\">@for loop<\/h3>\n\n\n\n<p>Mostrare una lista di blocchi nel template per rappresentare una lista di elementi \u00e8 uno dei concetti chiave di molti framework e in Angular questo \u00e8 sempre stato possibile grazie alla direttiva <strong>ngFor<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> *<span class=\"hljs-attr\">ngFor<\/span>=<span class=\"hljs-string\">\"let item of itemList\"<\/span>&gt;<\/span>\n    {{ item.name }}\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Questa direttiva ci permette di creare un blocco di template per ogni singolo elemento di una lista, grazie alla sua capacit\u00e0 di fornirci le informazioni del singolo elemento e alcune <strong>variabili locali<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>index: number<\/code>: index dell\u2019elemento nella lista;<\/li>\n\n\n\n<li><code>count: number<\/code>: il valore della length della lista;<\/li>\n\n\n\n<li><code>first: boolean<\/code>: indica se l\u2019elemento \u00e8 il primo della lista;<\/li>\n\n\n\n<li><code>last: boolean<\/code>: indica se l\u2019elemento \u00e8 l\u2019ultimo della lista;<\/li>\n\n\n\n<li><code>even: boolean<\/code>: indica se l\u2019elemento ha index di valore pari nella lista;<\/li>\n\n\n\n<li><code>odd: boolean<\/code>: indica se l\u2019elemento ha index di valore dispari nella lista.<\/li>\n<\/ul>\n\n\n\n<p>Non solo, la direttiva <strong>ngFor<\/strong> accetta inoltre come parametro opzionale una funzione, chiamata <strong>trackBy<\/strong>, utilizzata per fornire ad Angular un <strong>identificativo unico<\/strong> per ogni elemento della lista (come un id):<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> *<span class=\"hljs-attr\">ngFor<\/span>=<span class=\"hljs-string\">\"let item of itemList; trackBy: itemById\"<\/span>&gt;<\/span>\n    {{ item.name }}\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript\">itemById(index, item) {\n  <span class=\"hljs-keyword\">return<\/span> item.id;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Grazie a questa funzione Angular \u00e8 in grado di <strong>ottimizzare le performance<\/strong> in caso di operazioni di aggiornamento o modifica liste.<\/p>\n\n\n\n<p>Dunque per sostituire <strong>ngFor<\/strong> il nuovo control flow ci fornisce uno strumento apposito <strong>@for<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n  @for (item of itemList; track item.id; let idx = $index, e = $even) {\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>{{ item.name }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n  }\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Questa nuova sintassi porta con s\u00e9 alcuni grandi cambiamenti:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Perfomance migliori fino al 90% rispetto a ngFor<\/strong>, grazie al nuovo algoritmo utilizzato per implementare <strong>@for<\/strong>;<\/li>\n\n\n\n<li>La funzione <strong>trackBy<\/strong> viene sostituita dalla propriet\u00e0 <strong>track<\/strong> che richiede un espressione, molto pi\u00f9 semplice da scrivere\/leggere di una funzione;<\/li>\n\n\n\n<li>La propriet\u00e0 <strong>track \u00e8 obbligatoria<\/strong> cosi da spingerci ad usarla, dato che la funzione <strong>trackBy viene spesso dimenticata<\/strong>;<\/li>\n\n\n\n<li>Le variabili locali ora hanno come prefisso la lettera $ (es: <strong>$index<\/strong>).<\/li>\n<\/ul>\n\n\n\n<p>Inoltre anche in questo caso otteniamo una sintassi pulita e <strong>niente imports<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-empty-block\">@empty block<\/h4>\n\n\n\n<p>Infine la nuova sintassi <strong>@for<\/strong> porta con se la comodissima condizione <strong>@placeholder<\/strong> che ci permetter\u00e0 di fornire un blocco di template nel caso in cui la lista risulti vuota:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\">@for (item of itemList; track item.id) {\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>{{ item.name }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n} @placeholder {\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>No items available<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Fantastico \ud83e\udd29<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-conclusioni\">Conclusioni:<\/h3>\n\n\n\n<p>Come abbiamo visto il nuovo Angular control flow ci offre un modo semplice e immediato per scrivere condizioni complesse nei nostri template, con l&#8217;aggiunta di <strong>performance migliori<\/strong> e <strong>maggior leggibilit\u00e0<\/strong> dei nostri template.<\/p>\n\n\n\n<p>\u26a0\ufe0f <strong>ATTENZIONE:<\/strong> il nuovo control flow \u00e8 ancora in developer preview \u26a0\ufe0f<\/p>\n\n\n\n<p>Se vuoi iniziare a provarlo ti consiglio di farlo su un applicativo gi\u00e0 esistente.<br>Non dovrai far altro che lanciare un <strong>ng update<\/strong> e usare il comando di migrazione fornito dalla <strong>Angular CLI<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"Bash\" data-shcb-language-slug=\"bash\"><span><code class=\"hljs language-bash\">ng generate @angular\/core:control-flow<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Bash<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">bash<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Grazie per essere arrivato fin qui, mi farebbe molto piacere ricevere qualche feedback. \ud83d\udc4b<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La versione 17 di Angular \u00e8 stata rilasciata pochi giorni fa insieme ad un restyle grafico del logo e al nuovo blog angular.dev. In questo articolo analizzeremo insieme il nuovo control flow, che ci dar\u00e0 la possibilit\u00e0 di dimenticarci delle direttive ngIf, ngSwitch e ngFor grazie ad una nuova sintassi per scrivere condizioni if, if\/else,&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/\">Read more<\/a><\/p>\n","protected":false},"author":200,"featured_media":24889,"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,11589],"collections":[11708],"class_list":{"0":"post-24828","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-it","8":"tag-angular-it","9":"tag-control-flow-it","10":"collections-dalla-community","11":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Angular Control Flow: la guida\u00a0completa - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Angular v17 introduce molte nuove funzionalit\u00e0. Insieme analizzeremo il nuovo Angular control flow: @if, @switch and @for.\" \/>\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\/angular-control-flow-la-guida-completa\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Control Flow: la guida\u00a0completa\" \/>\n<meta property=\"og:description\" content=\"Analizziamo insieme il nuovo Angular control flow: @if, @switch and @for.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/\" \/>\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=\"2023-11-27T08:03:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-25T11:26:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"828\" \/>\n\t<meta property=\"og:image:height\" content=\"414\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\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=\"4 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\\\/angular-control-flow-la-guida-completa\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-control-flow-la-guida-completa\\\/\"},\"author\":{\"name\":\"Davide Passafaro\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/79170e2a1bfc41ddeaa10827ce803828\"},\"headline\":\"Angular Control Flow: la guida\u00a0completa\",\"datePublished\":\"2023-11-27T08:03:00+00:00\",\"dateModified\":\"2024-01-25T11:26:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-control-flow-la-guida-completa\\\/\"},\"wordCount\":756,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-control-flow-la-guida-completa\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/image.webp\",\"keywords\":[\"Angular\",\"Control Flow\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-control-flow-la-guida-completa\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-control-flow-la-guida-completa\\\/\",\"name\":\"Angular Control Flow: la guida\u00a0completa - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-control-flow-la-guida-completa\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-control-flow-la-guida-completa\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/image.webp\",\"datePublished\":\"2023-11-27T08:03:00+00:00\",\"dateModified\":\"2024-01-25T11:26:35+00:00\",\"description\":\"Angular v17 introduce molte nuove funzionalit\u00e0. Insieme analizzeremo il nuovo Angular control flow: @if, @switch and @for.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-control-flow-la-guida-completa\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-control-flow-la-guida-completa\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-control-flow-la-guida-completa\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/image.webp\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/image.webp\",\"width\":828,\"height\":414,\"caption\":\"angular, control flow\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/it\\\/frontend-it\\\/angular-control-flow-la-guida-completa\\\/#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\":\"Angular Control Flow: la guida\u00a0completa\"}]},{\"@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\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/Davide-photo-1mb-100x100.png\",\"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":"Angular Control Flow: la guida\u00a0completa - Codemotion Magazine","description":"Angular v17 introduce molte nuove funzionalit\u00e0. Insieme analizzeremo il nuovo Angular control flow: @if, @switch and @for.","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\/angular-control-flow-la-guida-completa\/","og_locale":"en_US","og_type":"article","og_title":"Angular Control Flow: la guida\u00a0completa","og_description":"Analizziamo insieme il nuovo Angular control flow: @if, @switch and @for.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-11-27T08:03:00+00:00","article_modified_time":"2024-01-25T11:26:35+00:00","og_image":[{"width":828,"height":414,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp","type":"image\/webp"}],"author":"Davide Passafaro","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Davide Passafaro","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/"},"author":{"name":"Davide Passafaro","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828"},"headline":"Angular Control Flow: la guida\u00a0completa","datePublished":"2023-11-27T08:03:00+00:00","dateModified":"2024-01-25T11:26:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/"},"wordCount":756,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp","keywords":["Angular","Control Flow"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/","name":"Angular Control Flow: la guida\u00a0completa - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp","datePublished":"2023-11-27T08:03:00+00:00","dateModified":"2024-01-25T11:26:35+00:00","description":"Angular v17 introduce molte nuove funzionalit\u00e0. Insieme analizzeremo il nuovo Angular control flow: @if, @switch and @for.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp","width":828,"height":414,"caption":"angular, control flow"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-control-flow-la-guida-completa\/#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":"Angular Control Flow: la guida\u00a0completa"}]},{"@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\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png","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\/2023\/11\/image-600x400.webp","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-600x414.webp","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\/2023\/11\/image.webp",828,414,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-150x150.webp",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-300x150.webp",300,150,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-768x384.webp",768,384,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp",828,414,false],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp",828,414,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp",828,414,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-100x100.webp",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-180x128.webp",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image.webp",828,414,false],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-400x225.webp",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-600x400.webp",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/11\/image-600x414.webp",600,414,true]},"uagb_author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_comment_info":0,"uagb_excerpt":"La versione 17 di Angular \u00e8 stata rilasciata pochi giorni fa insieme ad un restyle grafico del logo e al nuovo blog angular.dev. In questo articolo analizzeremo insieme il nuovo control flow, che ci dar\u00e0 la possibilit\u00e0 di dimenticarci delle direttive ngIf, ngSwitch e ngFor grazie ad una nuova sintassi per scrivere condizioni if, if\/else,&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/24828","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=24828"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/24828\/revisions"}],"predecessor-version":[{"id":24908,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/24828\/revisions\/24908"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/24889"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=24828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=24828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=24828"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=24828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}