{"id":967,"date":"2019-09-20T08:00:11","date_gmt":"2019-09-20T06:00:11","guid":{"rendered":"http:\/\/cmagazine.test\/rxjs-and-angular-reactive-forms\/"},"modified":"2020-06-25T17:35:21","modified_gmt":"2020-06-25T15:35:21","slug":"rxjs-and-angular-reactive-forms","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/","title":{"rendered":"RxJS and Angular Reactive Forms"},"content":{"rendered":"

Angular<\/strong> provides two different approaches to handle forms: template-driven forms<\/b>, very simple to use and powerful, and Reactive Forms<\/b>, based on Observable, much more flexible, scalable and robust.<\/p>\n

In this article we will learn more about this by discovery Fabio Biondi<\/strong>‘s point of view, based on his talk delivered during Codemotion Rome 2019<\/strong>.<\/p>\n

Why do we need \u2018reactivity\u2019 in JavaScript and what does it take to start reactive programming<\/span> in JavaScript<\/span>?<\/b><\/p><\/blockquote>\n

Reactive Programming<\/span><\/strong> is an \u201cold\u201d paradigm, but since the latest Angular version there has been development<\/span> around this concept. By using the famous library RxJS<\/strong>, it has gained enormous popularity. Meanwhile, other frameworks and libraries have been developed around this concept.<\/p>\n

Modern web and single page applications<\/span> are highly interactive with a lot of UI events to handle, often connected to each other. Reactive Programming<\/span> helps developers<\/span> to handle these scenarios in the form of streams, focusing on the interdependence of events that define the business logic<\/span>, rather than implementation. Furthermore, RxJS provides tons of utilities (dozens of operators, multicast, etc.) and you can now accomplish complex tasks in very few lines of code.<\/p>\n

What are the main challenges for developers<\/span> approaching to reactive programming<\/span> for the first time?<\/b><\/p><\/blockquote>\n

Open their minds and think outside the box.<\/p>\n

The first time I saw RxJS, I said: whaaaat? A lot of \u201cweird\u201d operators (more than 100), hot and cold observables, marble diagrams, multicast, subjects and a lot of new concepts to learn.<\/p>\n

I suggest learning the fundamentals and try to apply reactive programming<\/span> in real use cases, just like forms, user interactions or scenarios like an authentication system. Since Angular is based on Observable, it represents a great way to get closer to this world.<\/p>\n

Anyway, I have to admit that functional reactive programming<\/span> was, in my experience<\/span>, one of the biggest challenges of the last few years. It is a drastic paradigm shift. So it takes a lot of time to be really appreciated and mastered.<\/p>\n

Be patient \ud83d\ude42<\/p>\n

You mentioned in your talk that Angular Reactive Forms provide effective and scalable handling of form data. Why is that?<\/b><\/p><\/blockquote>\n

Reactive Forms<\/strong> (RF) are reusable, testable, synchronous and very flexible. In fact RFs provide access to low level APIs, that allow developers<\/span> to do amazing stuff: split forms in nested groups that you can validate individually,\u00a0 easily split forms in components<\/span>, create forms at runtime, handle list of forms as an array and, since forms and controls (inputs, selects, calendars and so on) are treated like Observables, you can get great benefits from RxJS as well.
\nFurthermore, Reactive Forms are immutable, very easy to test and to debug, especially if compared to template driven forms.<\/p>\n


\n\"\"<\/center><\/p>\n

How has front-end<\/span> development<\/span> changed with the advent of component-based<\/span> frameworks, such as Angular, React and Single Page Application (SPA) pattern?<\/b><\/p><\/blockquote>\n

I\u2019m a big supporter of this \u201cpattern\u201d but \u201cComponent<\/span>-Based\u201d frameworks are nothing new; it\u2019s an old approach (I\u2019ve used it since Adobe Flex, in 2008, when SPA was known as Rich Internet Applications) but it remains one of the best techniques to split and organise the application<\/span> UI.<\/p>\n

Thanks to this approach, it is very easy to create reusable code too (i.e. shared components<\/span> or UiKit), test your code and avoid JS (and CSS!) conflicts. No more \u201cglobals\u201d anymore.<\/p>\n

But the main advantage I have seen so far is when this approach is used together with a state manager, such as Redux, in my opinion the real revolution in the SPA world<\/i> of recent years.<\/p>\n

You can now completely split the data architecture from the presentational layer, simplifying testing, enabling time travel debugging, saving and rehydrating a store<\/span>, splitting the application<\/span> business logic<\/span> in actions, effects, reducers (to update state) and selectors (to get a portion of the store<\/span> by using memorisation).<\/p>\n


\n\"\"<\/center>The UI (so your components<\/span>) should be dumb and completely stateless, so your data model should be handled exclusively by the state manager.<\/p>\n

This is great also because senior developers<\/span> can now focus on architectural aspects while juniors and web designers can work on the UI without the fear of doing damage or \u201cbreaking\u201d something, since it\u2019s \u201cstupid” and does nothing.<\/p>\n

State managers as NGRX for Angular<\/i> now combine Redux with RXJS and your data<\/span> is exposed as Observable. So you can now get advantages from both worlds.<\/p>\n

It\u2019s amazing. ES2015\/2018 and Typescript<\/span> added a lot of new tools and sugar syntax as well and, finally, JS developers<\/span> can write high quality code with no compromises.<\/p>\n

Today, it\u2019s a great time to be a front-end<\/span> developer<\/span> and you no longer need to be ashamed to tell the world that you use Javascript<\/span>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Angular provides two different approaches to handle forms: template-driven forms, very simple to use and powerful, and Reactive Forms, based on Observable, much more flexible, scalable and robust. In this article we will learn more about this by discovery Fabio Biondi‘s point of view, based on his talk delivered during Codemotion Rome 2019. Why do… Read more<\/a><\/p>\n","protected":false},"author":64,"featured_media":968,"comment_status":"closed","ping_status":"open","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":[31],"tags":[],"collections":[],"class_list":{"0":"post-967","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-developer","8":"entry"},"yoast_head":"\nRxJS and Angular Reactive Forms - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"In this article we interviewed Fabio Biondi to learn more about RxJS and Angular Reactive Forms.\" \/>\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\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"RxJS and Angular Reactive Forms\" \/>\n<meta property=\"og:description\" content=\"In this article we interviewed Fabio Biondi to learn more about RxJS and Angular Reactive Forms.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/\" \/>\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=\"2019-09-20T06:00:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-25T15:35:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"668\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Codemotion\" \/>\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=\"Codemotion\" \/>\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\\\/frontend\\\/web-developer\\\/rxjs-and-angular-reactive-forms\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/rxjs-and-angular-reactive-forms\\\/\"},\"author\":{\"name\":\"Codemotion\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/201bb98b02412383686cced7521b861c\"},\"headline\":\"RxJS and Angular Reactive Forms\",\"datePublished\":\"2019-09-20T06:00:11+00:00\",\"dateModified\":\"2020-06-25T15:35:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/rxjs-and-angular-reactive-forms\\\/\"},\"wordCount\":777,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/rxjs-and-angular-reactive-forms\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/image1.png\",\"articleSection\":[\"Web Developer\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/rxjs-and-angular-reactive-forms\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/rxjs-and-angular-reactive-forms\\\/\",\"name\":\"RxJS and Angular Reactive Forms - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/rxjs-and-angular-reactive-forms\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/rxjs-and-angular-reactive-forms\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/image1.png\",\"datePublished\":\"2019-09-20T06:00:11+00:00\",\"dateModified\":\"2020-06-25T15:35:21+00:00\",\"description\":\"In this article we interviewed Fabio Biondi to learn more about RxJS and Angular Reactive Forms.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/rxjs-and-angular-reactive-forms\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/rxjs-and-angular-reactive-forms\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/rxjs-and-angular-reactive-forms\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/image1.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/image1.png\",\"width\":1200,\"height\":668},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/rxjs-and-angular-reactive-forms\\\/#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\\\/frontend\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Developer\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/web-developer\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"RxJS and Angular Reactive Forms\"}]},{\"@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\\\/201bb98b02412383686cced7521b861c\",\"name\":\"Codemotion\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/cropped-codemotionlogo-150x150.png\",\"caption\":\"Codemotion\"},\"description\":\"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/CodemotionIT\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/codemotion-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"RxJS and Angular Reactive Forms - Codemotion Magazine","description":"In this article we interviewed Fabio Biondi to learn more about RxJS and Angular Reactive Forms.","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\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/","og_locale":"en_US","og_type":"article","og_title":"RxJS and Angular Reactive Forms","og_description":"In this article we interviewed Fabio Biondi to learn more about RxJS and Angular Reactive Forms.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2019-09-20T06:00:11+00:00","article_modified_time":"2020-06-25T15:35:21+00:00","og_image":[{"width":1200,"height":668,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1.png","type":"image\/png"}],"author":"Codemotion","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Codemotion","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/"},"author":{"name":"Codemotion","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c"},"headline":"RxJS and Angular Reactive Forms","datePublished":"2019-09-20T06:00:11+00:00","dateModified":"2020-06-25T15:35:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/"},"wordCount":777,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1.png","articleSection":["Web Developer"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/","name":"RxJS and Angular Reactive Forms - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1.png","datePublished":"2019-09-20T06:00:11+00:00","dateModified":"2020-06-25T15:35:21+00:00","description":"In this article we interviewed Fabio Biondi to learn more about RxJS and Angular Reactive Forms.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1.png","width":1200,"height":668},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/rxjs-and-angular-reactive-forms\/#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\/frontend\/"},{"@type":"ListItem","position":3,"name":"Web Developer","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/"},{"@type":"ListItem","position":4,"name":"RxJS and Angular Reactive Forms"}]},{"@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\/201bb98b02412383686cced7521b861c","name":"Codemotion","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","caption":"Codemotion"},"description":"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.","sameAs":["https:\/\/x.com\/CodemotionIT"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1-600x400.png","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1-600x600.png","author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1.png",1200,668,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1-150x150.png",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1-300x167.png",300,167,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1-768x428.png",768,428,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1-1024x570.png",1024,570,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1.png",1200,668,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1.png",1200,668,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1.png",100,56,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1-180x128.png",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1-896x504.png",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1-400x225.png",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1-600x400.png",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/09\/image1-600x600.png",600,600,true]},"uagb_author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_comment_info":0,"uagb_excerpt":"Angular provides two different approaches to handle forms: template-driven forms, very simple to use and powerful, and Reactive Forms, based on Observable, much more flexible, scalable and robust. In this article we will learn more about this by discovery Fabio Biondi‘s point of view, based on his talk delivered during Codemotion Rome 2019. Why do……","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/967","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\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=967"}],"version-history":[{"count":5,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/967\/revisions"}],"predecessor-version":[{"id":6081,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/967\/revisions\/6081"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/968"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=967"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}