{"id":6194,"date":"2021-03-06T17:18:46","date_gmt":"2021-03-06T17:48:46","guid":{"rendered":"https:\/\/ultering.com\/it4us\/?p=6194"},"modified":"2025-05-06T17:00:16","modified_gmt":"2025-05-06T17:30:16","slug":"angular-from-scratch-tutorial-step-3-binding","status":"publish","type":"post","link":"https:\/\/ultering.com\/it4us\/?p=6194","title":{"rendered":"Angular From Scratch Tutorial &#8211; Step 3: Binding"},"content":{"rendered":"<p><a href=\"https:\/\/ultering.com\/it4us\/?p=7175\">Angular From Scratch Tutorial &#8211; Index<\/a><\/p>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=6166\">PREVIOUS: Angular From Scratch Tutorial \u2013 Step 2: Components<\/a><\/p>\n<p><a class=\"row-title\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\" aria-label=\"\u201cAngular From Scratch Tutorial \u2013 Step 4:\u201d (Edit)\"><em>NEXT: Angular From Scratch Tutorial \u2013 Step 4: Adding Bootstrap<\/em><\/a><\/p>\n<p>&nbsp;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a04deff0e653\" class=\"ez-toc-cssicon-toggle-label\"><span class><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\" \/><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\" \/><\/svg><\/span><\/span><\/label><input type=\"checkbox\" id=\"ez-toc-cssicon-toggle-item-6a04deff0e653\" checked aria-label=\"Toggle\"><nav><ul class=\"ez-toc-list ez-toc-list-level-1 \"><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#TARGET\" title=\"TARGET\">TARGET<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#CONVENTIONS\" title=\"CONVENTIONS\">CONVENTIONS<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#SUMMARY\" title=\"SUMMARY\">SUMMARY<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#TARGET-2\" title=\"TARGET\">TARGET<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Source_CodeDownload\" title=\"Source Code\/Download\">Source Code\/Download<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#DATA_BINDING\" title=\"DATA BINDING\">DATA BINDING<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Forms_of_binding_in_Angulars_Template_Syntax\" title=\"Forms of binding in Angular&#8217;s Template Syntax\">Forms of binding in Angular&#8217;s Template Syntax<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#TARGET_FOR_THIS_STEP\" title=\"TARGET FOR THIS STEP\">TARGET FOR THIS STEP<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#SOURCE_CODE\" title=\"SOURCE CODE\">SOURCE CODE<\/a><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#How_to_Use\" title=\"How to Use\">How to Use<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#INTERPOLATION\" title=\"INTERPOLATION\">INTERPOLATION<\/a><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Test\" title=\"Test\">Test<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#PROPERTY_BINDING\" title=\"PROPERTY BINDING\">PROPERTY BINDING<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Binding_a_property\" title=\"Binding a property\">Binding a property<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#DOMs_element_property_interpolation\" title=\"DOM&#8217;s element property interpolation\">DOM&#8217;s element property interpolation<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#DOMs_element_property_interpolation_plus_event\" title=\"DOM&#8217;s element property interpolation plus event\">DOM&#8217;s element property interpolation plus event<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Binding_to_a_DOMs_element_property\" title=\"Binding to a DOM&#8217;s element property\">Binding to a DOM&#8217;s element property<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Buttons_Property_Binding_Example\" title=\"Button&#8217;s Property Binding Example\">Button&#8217;s Property Binding Example<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Example_using_an_image\" title=\"Example using an image\">Example using an image<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Example_handling_an_elements_property\" title=\"Example handling an element&#8217;s property\">Example handling an element&#8217;s property<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Other_Examples\" title=\"Other Examples\">Other Examples<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Working_with_CSS\" title=\"Working with CSS\">Working with CSS<\/a><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Alternatives\" title=\"Alternatives\">Alternatives<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#ngStyle\" title=\"ngStyle\">ngStyle<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#ANGULAR_ATTRIBUTES_SUMMARY\" title=\"ANGULAR ATTRIBUTES SUMMARY\">ANGULAR ATTRIBUTES SUMMARY<\/a><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#attr\" title=\"attr.\">attr.<\/a><ul class=\"ez-toc-list-level-6\"><li class=\"ez-toc-heading-level-6\"><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Calculated_Expressions\" title=\"Calculated Expressions\">Calculated Expressions<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#class\" title=\"class.\">class.<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#style\" title=\"style.\">style.<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#EVENT_BINDING\" title=\"EVENT BINDING\">EVENT BINDING<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Example\" title=\"Example\">Example<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Parent-Child_Relationship_%E2%80%93_Sending_data_from_Parent_to_Child\" title=\"Parent-Child Relationship &#8211; Sending data from Parent to Child\">Parent-Child Relationship &#8211; Sending data from Parent to Child<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Example-2\" title=\"Example\">Example<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Parent-Child_Relationship_sending_data_from_child_to_parent_using_EventEmitter_Output\" title=\"Parent-Child Relationship sending data from child to parent using EventEmitter, @Output\">Parent-Child Relationship sending data from child to parent using EventEmitter, @Output<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Two-way_Binding_Input_and_Output_together\" title=\"Two-way Binding: @Input()&nbsp;and&nbsp;@Output()&nbsp;together\">Two-way Binding: @Input()&nbsp;and&nbsp;@Output()&nbsp;together<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Two-way_Binding_%E2%80%93_parent_property_vs_child_property\" title=\"Two-way Binding \u2013 parent property vs. child property\">Two-way Binding \u2013 parent property vs. child property<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Two-way_Binding_%E2%80%93_property_and_method\" title=\"Two-way Binding &#8211; property and method\">Two-way Binding &#8211; property and method<\/a><ul class=\"ez-toc-list-level-5\"><li class=\"ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Creating_the_component_and_Implementing_code\" title=\"Creating the component and Implementing code\">Creating the component and Implementing code<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-5\"><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Code_Implementation\" title=\"Code Implementation\">Code Implementation<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Two-way_data_binding_with_ngModel\" title=\"Two-way data binding with ngModel\">Two-way data binding with ngModel<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#NOTE_error_NG8002\" title=\"NOTE: error NG8002\">NOTE: error NG8002<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-42\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Summary_of_the_examples_from_Angulars_Built-in_Directives_post\" title=\"Summary of the examples from Angular&#8217;s Built-in Directives post\">Summary of the examples from Angular&#8217;s Built-in Directives post<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-43\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#USEFUL_NOTES\" title=\"#USEFUL NOTES\">#USEFUL NOTES<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-44\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Meaning_of_exclamation_mark_on_input_var\" title=\"Meaning of exclamation mark on @input var\">Meaning of exclamation mark on @input var<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-45\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Interrogation_mark_usage\" title=\"Interrogation mark (`?`) usage\">Interrogation mark (`?`) usage<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-46\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#CLOSING\" title=\"CLOSING\">CLOSING<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-47\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#NEXT\" title=\"NEXT\">NEXT<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-48\" href=\"https:\/\/ultering.com\/it4us\/?p=6194\/#Credits\" title=\"Credits\">Credits<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"TARGET\"><\/span>TARGET<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The purpose of this page in this tutorial series is to provide a very fast approach that is useful for revisions when you have already dealt with Angular, but after an absense of using it, it turns necessary to do a &#8220;disk swap&#8221; bringing from &#8220;disk&#8221; to your &#8220;memory&#8221; again. \ud83d\ude42<\/p>\n<p>If it is your first Angular approach, or you are a newbie, it is recommended to go first to the Angular&#8217;s documentation. After, this page will serve you as a summary for fast referencing and revision.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"CONVENTIONS\"><\/span>CONVENTIONS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>About the notation adopted in this project.<br>\nThe code created for this project has an &#8220;app&#8221; prefix.<br>\nCode, projects, implementations in general from external sources hasn&#8217;t this prefix.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"SUMMARY\"><\/span>SUMMARY<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Binding is a key interaction concept.<br>\nIt must be kept in mind the several ways it may occur.<br>\n<strong>This tutorial basically summarizes Angular documentation.<br>\nUseful for fast revisions.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"TARGET-2\"><\/span>TARGET<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Binding handling.<br>\nProviding routing to the moved content creating a link to it.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Source_CodeDownload\"><\/span>Source Code\/Download<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For more details, the source code may be found on <a href=\"https:\/\/github.com\/alsdias\/afsTutorial\">GitHub<\/a>, &#8220;step3&#8221; tag (includes step1 up to step3).<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"DATA_BINDING\"><\/span>DATA BINDING<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p id=\"data-binding\"><a href=\"https:\/\/angular.io\/guide\/glossary#data-binding\">Data Binding<\/a><i class=\"material-icons\"><\/i> allows apps to display data values to a user and respond to user actions (such as clicks, touches, and keystrokes).<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Forms_of_binding_in_Angulars_Template_Syntax\"><\/span><a href=\"https:\/\/angular.io\/guide\/template-syntax\">Forms of binding in Angular&#8217;s Template Syntax<\/a><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><a href=\"https:\/\/angular.io\/guide\/interpolation\">Interpolation<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/guide\/property-binding\">Property binding<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/guide\/event-binding\">Event binding<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/guide\/attribute-binding\">Attribute binding<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/guide\/class-binding\">Class and style binding<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/guide\/attribute-binding#style-binding\">Style binding<\/a><\/li>\n<li><a href=\"https:\/\/angular.io\/guide\/built-in-directives#ngModel\">Two-way data binding with ngModel<\/a><\/li>\n<\/ul>\n<p>@FROM: <a href=\"https:\/\/angular.io\/guide\/glossary#data-binding\">Angular documentation<\/a><\/p>\n<h2><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"TARGET_FOR_THIS_STEP\"><\/span>TARGET FOR THIS STEP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Implementation of data binding types.<\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"SOURCE_CODE\"><\/span>SOURCE CODE<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Since this step includes additional files, to make easier its implementation, the respective source code may be cloned from <a href=\"https:\/\/github.com\/alsdias\/afsTutorial\">GitHub<\/a>.<\/p>\n<h5><span class=\"ez-toc-section\" id=\"How_to_Use\"><\/span>How to Use<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>The master branch contains the last current version.<br>\nTo get this step (step3), do:<\/p>\n<ul>\n<li>Get a list of all available local tags (your machine):<br>\ngit tag<\/li>\n<li>Get a list of all available remote tags (on GitHub&#8217;s server).:<br>\ngit ls-remote &#8211;tags origin<\/li>\n<li>To checkout the step3 tag:<br>\ngit checkout tags\/step3<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"INTERPOLATION\"><\/span>INTERPOLATION<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Edit &#8220;app.component.html&#8221; to add title, setting it like this:<\/p>\n<div>\n<div><em>&lt;h2&gt;{{title}}&lt;\/h2&gt;<\/em><\/div>\n<div>&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/div>\n<\/div>\n<p>The title&#8217;s value comes from &#8220;app.component.ts&#8221;:<\/p>\n<div>\n<div>export&nbsp;class&nbsp;AppComponent&nbsp;{<\/div>\n<div><strong>&nbsp;&nbsp;title&nbsp;=&nbsp;&#8216;afsTutorial&#8217;;<\/strong><\/div>\n<div>}<\/div>\n<\/div>\n<h5><span class=\"ez-toc-section\" id=\"Test\"><\/span>Test<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<div>Point to:<br>\nhttp:\/\/localhost:4200\/<\/div>\n<div><\/div>\n<div>Returns the page like this:<\/div>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6206\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding.jpg\" alt width=\"402\" height=\"144\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding.jpg 402w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding-300x107.jpg 300w\" sizes=\"(max-width: 402px) 100vw, 402px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6206 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20402%20144%22%3E%3C%2Fsvg%3E\" alt width=\"402\" height=\"144\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20402%20144%22%3E%3C%2Fsvg%3E 402w\" sizes=\"(max-width: 402px) 100vw, 402px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding.jpg 402w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding-300x107.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding.jpg\"><\/p>\n<p>Interpolation is simple like that.<br>\nIt is used a double curl brace in the HTML file for a class property defined in the .ts file.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"PROPERTY_BINDING\"><\/span>PROPERTY BINDING<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><em>To bind to an element&#8217;s property, enclose it in square brackets,&nbsp;<code>[]<\/code>, which identifies the property as a target property. <\/em><br>\n<em>A target property is the DOM property to which you want to assign a value.&nbsp;<\/em><br>\n<em><strong>The brackets,&nbsp;<code>[]<\/code>, cause Angular to evaluate the right-hand side of the assignment as a dynamic expression.<\/strong><br>\nWithout the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.<br>\n<a href=\"https:\/\/angular.io\/guide\/property-binding\">[Angular documentation]<\/a><\/em><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Binding_a_property\"><\/span>Binding a property<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Edit &#8220;app.component.ts&#8221; and create the <em>siteBadge<\/em> property as follows:<\/p>\n<pre class>export class AppComponent {\n  title = 'afsTutorial';\n  siteBadge = '..\/assets\/img\/afstutorial_main_image.jpg';\n}\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Bind it to the HTML file (app.component.html):<\/p>\n<pre class>&lt;h2&gt;{{title}}&lt;\/h2&gt;\n&lt;img [src]=\"siteBadge\"&gt;\n&lt;router-outlet&gt;&lt;\/router-outlet&gt;\n<\/pre>\n<p>Point to the main page:<br>\nhttp:\/\/localhost:4200\/<\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6210\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_main_image.jpg\" alt width=\"685\" height=\"447\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_main_image.jpg 685w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_main_image-300x196.jpg 300w\" sizes=\"(max-width: 685px) 100vw, 685px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6210 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20685%20447%22%3E%3C%2Fsvg%3E\" alt width=\"685\" height=\"447\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20685%20447%22%3E%3C%2Fsvg%3E 685w\" sizes=\"(max-width: 685px) 100vw, 685px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_main_image.jpg 685w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_main_image-300x196.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_main_image.jpg\"><\/p>\n<h4><\/h4>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"DOMs_element_property_interpolation\"><\/span>DOM&#8217;s element property interpolation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div>This example is static.<br>\nWhen the page loads, the &#8220;carSelection.value&#8221; is &#8220;Fiat&#8221; by default.<br>\nIf the selection is switched, it won&#8217;t switch the &#8220;carSelection.value&#8221; because it is necessary to assign an event that performs the update.<\/div>\n<pre class>&lt;h4&gt;DOM's&nbsp;element&nbsp;property&nbsp;interpolation without event treatment&lt;\/h4&gt;\n&lt;p&gt; {{carSelection.value}} &lt;\/p&gt;\n&lt;select&nbsp;#carSelection&gt;\n&nbsp;&nbsp;&lt;option value=\"Fiat\"&gt;Fiat&lt;\/option&gt;\n&nbsp;&nbsp;&lt;option value=\"Hyundai\"&gt;Hyundai&lt;\/option&gt;\n&nbsp;&nbsp;&lt;option value=\"Mercedes\"&gt;Mercedes&lt;\/option&gt;\n&lt;\/select&gt;\n<\/pre>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6224\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_05a.jpg\" alt width=\"460\" height=\"129\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_05a.jpg 460w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_05a-300x84.jpg 300w\" sizes=\"(max-width: 460px) 100vw, 460px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6224 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20460%20129%22%3E%3C%2Fsvg%3E\" alt width=\"460\" height=\"129\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20460%20129%22%3E%3C%2Fsvg%3E 460w\" sizes=\"(max-width: 460px) 100vw, 460px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_05a.jpg 460w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_05a-300x84.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_05a.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div>\n<h3><span class=\"ez-toc-section\" id=\"DOMs_element_property_interpolation_plus_event\"><\/span>DOM&#8217;s element property interpolation plus event<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<\/div>\n<div>\n<p>To make it dynamic just add to the select element the following:<\/p>\n<pre class=\" language-html\"><code class=\"prism language-html\"><span class=\"token tag\"><span class=\"token attr-name\">(input)<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>0<span class=\"token punctuation\">\"<\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<pre class>&lt;h4&gt;DOM's element property interpolation plus event&lt;\/h4&gt;\n&lt;p&gt; {{carSelection2.value}} &lt;\/p&gt;\n&lt;select #carSelection2 (input)=\"0\"&gt;\n&nbsp;&nbsp;&lt;option value=\"Fiat\"&gt;Fiat&lt;\/option&gt;\n&nbsp;&nbsp;&lt;option value=\"Hyundai\"&gt;Hyundai&lt;\/option&gt;\n&nbsp;&nbsp;&lt;option value=\"Mercedes\"&gt;Mercedes&lt;\/option&gt;\n&lt;\/select&gt;\n<\/pre>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6225\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_05b.jpg\" alt width=\"608\" height=\"250\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_05b.jpg 608w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_05b-300x123.jpg 300w\" sizes=\"(max-width: 608px) 100vw, 608px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6225 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20608%20250%22%3E%3C%2Fsvg%3E\" alt width=\"608\" height=\"250\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20608%20250%22%3E%3C%2Fsvg%3E 608w\" sizes=\"(max-width: 608px) 100vw, 608px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_05b.jpg 608w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_05b-300x123.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_05b.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Binding_to_a_DOMs_element_property\"><\/span><span style=\"background-color: #ffffff;\">Binding to a DOM&#8217;s element property<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Suppose you&#8217;re working with legacy code(very common, by the way), and you need to handle dynamically some attribute of a table&#8217;s row.<br>\nFor instance, we may suppose the following alternatives:<\/p>\n<p><strong>CASE 1:<\/strong>&nbsp;<strong>The snippet below is a static interpolation<\/strong> that may be replaced by property binding to turn into a dynamic interpolation or binding.<\/p>\n<p>Notice that it must be used the element&#8217;s property native name that uses camel case (span) and not something different from that like &#8220;Span&#8221;.<\/p>\n<pre class>&lt;tr&gt;&lt;td span=\"{{1 + 1}}\"&gt;Three-Four&lt;\/td&gt;&lt;\/tr&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>CASE 2: Using the element&#8217;s binding and the property binding together:<\/strong><\/p>\n<p>Supposing that the app.component.ts file has span attribute as follows:<\/p>\n<pre class>export class AppComponent {\n  title = 'afsTutorial';\n  siteBadge = '..\/assets\/img\/afstutorial_main_image.jpg';\n  <b>span = 3;<\/b>\n}\n<\/pre>\n<p>The full HTML code (app.component.html) becomes:<\/p>\n<pre class>&lt;br \/&gt;\n&lt;br \/&gt;\n&lt;h4&gt;[span]=\"1 + 1\"&lt;\/h4&gt;\n&lt;table&gt;\n  &lt;colgroup&gt;\n    &lt;col [span]=\"1 + 1\" style=\"background-color:#D2D2D2\"&gt;\n  &lt;\/colgroup&gt;\n  &lt;tr&gt;\n    &lt;th&gt;ISBN&lt;\/th&gt;\n    &lt;th&gt;Title&lt;\/th&gt;\n    &lt;th&gt;Price&lt;\/th&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;3476900&lt;\/td&gt;\n    &lt;td&gt;Angular for Tomorrow&lt;\/td&gt;\n    &lt;td&gt;$106&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;\n\n&lt;br \/&gt;\n&lt;br \/&gt;\n&lt;h4&gt;[span]=\"span\"&lt;\/h4&gt;\n&lt;table&gt;\n  &lt;colgroup&gt;\n    &lt;col [span]=\"span\" style=\"background-color:#D2D2D2\"&gt;\n  &lt;\/colgroup&gt;\n  &lt;tr&gt;\n    &lt;th&gt;ISBN&lt;\/th&gt;\n    &lt;th&gt;Title&lt;\/th&gt;\n    &lt;th&gt;Price&lt;\/th&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;3476999&lt;\/td&gt;\n    &lt;td&gt;Angular Forever&lt;\/td&gt;\n    &lt;td&gt;$10600&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;\n<\/pre>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6231\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_01b.jpg\" alt width=\"272\" height=\"401\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_01b.jpg 272w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_01b-203x300.jpg 203w\" sizes=\"(max-width: 272px) 100vw, 272px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6231 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20272%20401%22%3E%3C%2Fsvg%3E\" alt width=\"272\" height=\"401\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20272%20401%22%3E%3C%2Fsvg%3E 272w\" sizes=\"(max-width: 272px) 100vw, 272px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_01b.jpg 272w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_01b-203x300.jpg 203w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_01b.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Buttons_Property_Binding_Example\"><\/span>Button&#8217;s Property Binding Example<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre class>- The HTML code in .html file:\n&lt;button [disabled]=\"buttonDisabled\"&gt;&lt;\/button&gt;\n\n- The JavaScript code for the class property in the respective .ts file:\nbuttonDisabled = true;\n<\/pre>\n<h4><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6218\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_03.jpg\" alt width=\"315\" height=\"95\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_03.jpg 315w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_03-300x90.jpg 300w\" sizes=\"(max-width: 315px) 100vw, 315px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6218 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20315%2095%22%3E%3C%2Fsvg%3E\" alt width=\"315\" height=\"95\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20315%2095%22%3E%3C%2Fsvg%3E 315w\" sizes=\"(max-width: 315px) 100vw, 315px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_03.jpg 315w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_03-300x90.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_03.jpg\"><\/h4>\n<div>\n<h4><\/h4>\n<h3><span class=\"ez-toc-section\" id=\"Example_using_an_image\"><\/span>Example using an image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>app.component.html:<\/strong><\/p>\n<pre class>&lt;h4&gt;Property Binding Example Using an Image &lt;\/h4&gt;\n&lt;h5&gt;\n  &lt;img [alt]=\"birds[0].name\" [src]=\"birds[0].image\" \/&gt;\n&lt;\/h5&gt;\n&lt;img [alt]=\"birds[0].name\" [src]=\"birds[0].image\" \/&gt;\n&lt;br \/&gt;&lt;br \/&gt;\n\n&lt;h5&gt;\n  &lt;img bind-alt=\"birds[1].name\" bind-src=\"birds[1].image\"&gt;\n&lt;\/h5&gt;\n&lt;img bind-alt=\"birds[1].name\" bind-src=\"birds[1].image\"&gt;\n&lt;br \/&gt;&lt;br \/&gt;\n<\/pre>\n<p><strong><br>\napp.component.ts:<\/strong><\/p>\n<p>birds = [{<br>\nname: &#8216;Eagle #1&#8217;,<br>\nimage: &#8216;..\/assets\/img\/eagle1.jpg&#8217;<br>\n}, {<br>\nname: &#8216;Eagle #2&#8217;,<br>\nimage: &#8216;..\/assets\/img\/eagle2.jpg&#8217;<br>\n}];<\/p>\n<\/div>\n<h4><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6227\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_06.jpg\" alt width=\"358\" height=\"397\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_06.jpg 358w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_06-271x300.jpg 271w\" sizes=\"(max-width: 358px) 100vw, 358px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6227 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20358%20397%22%3E%3C%2Fsvg%3E\" alt width=\"358\" height=\"397\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20358%20397%22%3E%3C%2Fsvg%3E 358w\" sizes=\"(max-width: 358px) 100vw, 358px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_06.jpg 358w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_06-271x300.jpg 271w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_06.jpg\"><\/h4>\n<p>&nbsp;<\/p>\n<h4><\/h4>\n<h3><span class=\"ez-toc-section\" id=\"Example_handling_an_elements_property\"><\/span>Example handling an element&#8217;s property<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>app.component.html:<\/strong><\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6228\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_07.jpg\" alt width=\"320\" height=\"68\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_07.jpg 320w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_07-300x64.jpg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6228 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%2068%22%3E%3C%2Fsvg%3E\" alt width=\"320\" height=\"68\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%2068%22%3E%3C%2Fsvg%3E 320w\" sizes=\"(max-width: 320px) 100vw, 320px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_07.jpg 320w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_07-300x64.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_07.jpg\"><\/p>\n<p><strong>app.component.ts:<\/strong><\/p>\n<div>\n<div>titleOfParagraph&nbsp;=&nbsp;&#8216;Example&nbsp;handling&nbsp;an&nbsp;element\\&#8217;s&nbsp;property&#8217;;<\/div>\n<\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Other_Examples\"><\/span>Other Examples<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"color: #ff0000;\"><strong>WRONG<\/strong><\/span>: the new operator:<\/p>\n<pre class=\" language-html\"><code class=\"prism language-html\"><span class=\"token tag\"><span class=\"token punctuation\"><span style=\"background-color: #ff99cc;\">&lt;<\/span><\/span><span style=\"background-color: #ff99cc;\">p<span class=\"token punctuation\">&gt;<\/span><\/span><\/span><span style=\"background-color: #ff99cc;\"> {{ new Date() }} <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span><\/span><\/code><\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Also, not allowed JavaScript expressions that have side effects:<\/strong><\/p>\n<p>like containing =, +=, -=, etc.<br>\nOperators: instanceOf, typeOf, for, while, etc.<br>\nChaining statements using &#8216;;&#8217; or &#8216;,&#8217;<br>\nIncrement and decrement expressions like ++ and &#8212;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>RIGHT<\/strong><\/p>\n<p>.html file:<\/p>\n<p>&lt;p&gt; {{ convertToDate() }} &lt;\/p&gt;<\/p>\n<p>.ts file:<\/p>\n<pre class>function convertToDate(){\n      const date = new Date();\n      return date.toLocaleDateString();\n}\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><\/h4>\n<h4><span class=\"ez-toc-section\" id=\"Working_with_CSS\"><\/span>Working with CSS<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5><span class=\"ez-toc-section\" id=\"Alternatives\"><\/span>Alternatives<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>By snippets of the examples:<\/p>\n[style]=&#8217;navStyle&#8217;<br>\n[style.color]=&#8221;color&#8221;<br>\n[attr.colspan]=&#8221;1 + 1&#8243;<br>\n[ngStyle]=&#8221;pHighlight&#8221;\n<p>&nbsp;<\/p>\n<h5><span class=\"ez-toc-section\" id=\"ngStyle\"><\/span>ngStyle<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p><strong>app.component.html:<\/strong><\/p>\n<pre class>&lt;h4&gt;CSS style using [ngStyle]&lt;\/h4&gt;\n&lt;p [ngStyle]=\"pHighlight\"&gt;TITLE HIGHLIGHTED #1&lt;\/p&gt;&lt;br \/&gt;\n&lt;p [ngStyle]=\"pHighlight\"&gt;TITLE HIGHLIGHTED #1&lt;\/p&gt;\n&lt;br \/&gt;&lt;br \/&gt;\n&lt;h4&gt;CSS style not using [ngStyle]&lt;\/h4&gt;\n&lt;p [style.color]=\"thColor\" [style.font-size]=\"thFontSz\" [style.background]=\"thBackground\"&gt;TITLE HIGHLIGHTED #2&lt;\/p&gt;&lt;br \/&gt;\n&lt;p [style.color]=\"thColor\" [style.font-size]=\"thFontSz\" [style.background]=\"thBackground\"&gt;TITLE HIGHLIGHTED #2&lt;\/p&gt;\n&lt;br \/&gt;&lt;br \/&gt;\n<\/pre>\n<p><strong>app.component.ts:<\/strong><\/p>\n<pre class>  pHighlight = {\n    color: 'yellow',\n    fontSize: '20px',\n    background: 'black'\n  };\n\n  thColor = 'yellow';\n  thFontSz = '20px';\n  thBackground = 'black';\n<\/pre>\n<p>&nbsp;<\/p>\n<p><a class=\"row-title\" href=\"https:\/\/ultering.com\/it4us\/wp-admin\/post.php?post=6166&amp;action=edit&amp;classic-editor\" aria-label=\"\u201cAngular From Scratch Tutorial \u2013 Step 2: Components\u201d (Edit)\"><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6234\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_08.jpg\" alt width=\"826\" height=\"307\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_08.jpg 826w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_08-300x112.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_08-768x285.jpg 768w\" sizes=\"(max-width: 826px) 100vw, 826px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6234 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20826%20307%22%3E%3C%2Fsvg%3E\" alt width=\"826\" height=\"307\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20826%20307%22%3E%3C%2Fsvg%3E 826w\" sizes=\"(max-width: 826px) 100vw, 826px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_08.jpg 826w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_08-300x112.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_08-768x285.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_binding_08.jpg\"><\/a><\/p>\n<p>See More:<br>\n<a href=\"https:\/\/angular.io\/guide\/attribute-binding\">Attribute binding<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"ANGULAR_ATTRIBUTES_SUMMARY\"><\/span>ANGULAR ATTRIBUTES SUMMARY<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Some important angular attributes:<\/p>\n<p>1. **[ngModel]**:<br>\nThis attribute is used for two-way data binding in forms.<br>\nIt binds a model property to an input element, allowing changes in the input to update the model and vice versa.<\/p>\n<p>&#8220;`html<br>\n&lt;input type=&#8221;text&#8221; [(ngModel)]=&#8221;name&#8221;&gt;<br>\n&#8220;`<\/p>\n<p>2. **(click)**:<br>\nThis attribute is used to bind a method to the click event of an element.<\/p>\n<p>&#8220;`html<br>\n&lt;button (click)=&#8221;onClick()&#8221;&gt;Click me&lt;\/button&gt;<br>\n&#8220;`<\/p>\n<p>3. **[ngClass]**:<br>\nThis attribute allows dynamically adding or removing CSS classes based on certain conditions.<\/p>\n<p>&#8220;`html<br>\n&lt;div [ngClass]=&#8221;{&#8216;active&#8217;: isActive, &#8216;disabled&#8217;: isDisabled}&#8221;&gt;Content&lt;\/div&gt;<br>\n&#8220;`<\/p>\n<p>4. **[ngStyle]**:<br>\nThis attribute allows dynamically applying inline styles to an element based on certain conditions.<\/p>\n<p>&#8220;`html<br>\n&lt;div [ngStyle]=&#8221;{&#8216;color&#8217;: isActive ? &#8216;green&#8217; : &#8216;red&#8217;, &#8216;font-size.px&#8217;: fontSize}&#8221;&gt;Content&lt;\/div&gt;<br>\n&#8220;`<\/p>\n<p>5. ***ngFor**:<br>\nThis is a structural directive used for iterating over a collection and rendering each item.<\/p>\n<p>&#8220;`html<br>\n&lt;ul&gt;<br>\n&lt;li *ngFor=&#8221;let item of items&#8221;&gt;{{ item }}&lt;\/li&gt;<br>\n&lt;\/ul&gt;<br>\n&#8220;`<\/p>\n<p>6. ***ngIf**:<br>\nThis is a structural directive used for conditionally rendering elements based on a boolean expression.<\/p>\n<p>&#8220;`html<br>\n&lt;div *ngIf=&#8221;isVisible&#8221;&gt;Content&lt;\/div&gt;<br>\n&#8220;`<\/p>\n<p>7. **[routerLink]**:<br>\nThis attribute is used to navigate between different routes in an Angular application.<\/p>\n<p>&#8220;`html<br>\n&lt;a [routerLink]=&#8221;[&#8216;\/home&#8217;]&#8221;&gt;Home&lt;\/a&gt;<br>\n&#8220;`<\/p>\n<p>These are just a few examples of how attributes are used in Angular templates to achieve different functionalities.<br>\nAngular provides a rich set of built-in directives and attributes to make building dynamic web applications easier.<br>\n(By ChatGPT)<\/p>\n<h5><span class=\"ez-toc-section\" id=\"attr\"><\/span><span style=\"font-size: 14pt;\">attr.<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>In Angular, the `attr.` prefix is used to dynamically set or bind HTML attributes on elements.<br>\nThis is particularly useful when you want to set attributes conditionally or when the attribute name is dynamic or not directly supported by Angular&#8217;s binding syntax.<\/p>\n<p>Here&#8217;s how you can use the `attr.` prefix in Angular:<\/p>\n<p>&#8220;`html<br>\n&lt;button [attr.disabled]=&#8221;isDisabled ? true : null&#8221;&gt;Disabled Button&lt;\/button&gt;<br>\n&#8220;`<\/p>\n<p>In this example, the `disabled` attribute of the `&lt;button&gt;` element will be set if `isDisabled` evaluates to true. If `isDisabled` is false, the `disabled` attribute will not be added to the element. The `null` value is used to remove the attribute if it&#8217;s not needed.<\/p>\n<p>You can also use `attr.` with dynamically generated attribute names:<\/p>\n<p>&#8220;`html<br>\n&lt;input [attr.data-custom]=&#8221;customData&#8221;&gt;<br>\n&#8220;`<\/p>\n<p>In this case, if `customData` is a variable in your component containing the name of the attribute and its value, it will be dynamically set on the `&lt;input&gt;` element.<\/p>\n<p>Using `attr.` in Angular gives you flexibility in managing attributes dynamically, enabling you to build more dynamic and interactive web applications.<br>\n(By ChatGPT)<\/p>\n<h6><\/h6>\n<h6><span class=\"ez-toc-section\" id=\"Calculated_Expressions\"><\/span>Calculated Expressions<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<pre class>&lt;!--  expression calculates colspan=2 --&gt;\n&lt;tr&gt;&lt;td [attr.colspan]=\"1 + 1\"&gt;One-Two&lt;\/td&gt;&lt;\/tr&gt;\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><span class=\"ez-toc-section\" id=\"class\"><\/span><span style=\"font-size: 14pt;\">class.<\/span><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6680\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angular_doc_attribute_bindind_class.jpg\" alt width=\"948\" height=\"516\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angular_doc_attribute_bindind_class.jpg 948w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angular_doc_attribute_bindind_class-300x163.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angular_doc_attribute_bindind_class-768x418.jpg 768w\" sizes=\"(max-width: 948px) 100vw, 948px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6680 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20948%20516%22%3E%3C%2Fsvg%3E\" alt width=\"948\" height=\"516\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20948%20516%22%3E%3C%2Fsvg%3E 948w\" sizes=\"(max-width: 948px) 100vw, 948px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angular_doc_attribute_bindind_class.jpg 948w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angular_doc_attribute_bindind_class-300x163.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angular_doc_attribute_bindind_class-768x418.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/angular_doc_attribute_bindind_class.jpg\"><\/p>\n<h5><span class=\"ez-toc-section\" id=\"style\"><\/span>style.<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<pre class>@Component({\n  selector: 'app-nav-bar',\n  template: `\n&lt;nav [style]='navStyle'&gt;\n  &lt;a [style.text-decoration]=\"activeLinkStyle\"&gt;Home Page&lt;\/a&gt;\n  &lt;a [style.text-decoration]=\"linkStyle\"&gt;Login&lt;\/a&gt;\n&lt;\/nav&gt;`\n})\nexport class NavBarComponent {\n  navStyle = 'font-size: 1.2rem; color: cornflowerblue;';\n  linkStyle = 'underline';\n  activeLinkStyle = 'overline';\n  \/* . . . *\/\n}\n<\/pre>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/angular.io\/guide\/attribute-binding#styling-precedence\">styling precedence<\/a><\/p>\n<p><a href=\"https:\/\/angular.io\/guide\/class-binding\">Class and style binding<\/a><\/p>\n<p><a href=\"https:\/\/angular.io\/guide\/attribute-binding#style-binding\">Style binding<\/a><\/p>\n<p><a href=\"https:\/\/angular.io\/guide\/built-in-directives#ngModel\">Styles with NgStyle<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"EVENT_BINDING\"><\/span>EVENT BINDING<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>&nbsp;<\/p>\n<p>Above, it was already shown an event binding using (input)=&#8221;0&#8243;.<br>\nLet&#8217;s see others.<\/p>\n<p>A simple event binding works like this, according to <a href=\"https:\/\/angular.io\/guide\/event-binding\">Angular documentation<\/a>:<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6237\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_01.jpg\" alt width=\"601\" height=\"127\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_01.jpg 601w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_01-300x63.jpg 300w\" sizes=\"(max-width: 601px) 100vw, 601px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6237 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20601%20127%22%3E%3C%2Fsvg%3E\" alt width=\"601\" height=\"127\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20601%20127%22%3E%3C%2Fsvg%3E 601w\" sizes=\"(max-width: 601px) 100vw, 601px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_01.jpg 601w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_01-300x63.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_01.jpg\"><\/p>\n<h4><\/h4>\n<h3><span class=\"ez-toc-section\" id=\"Example\"><\/span>Example<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>app.component.html:<\/strong><\/p>\n<div>\n<div>&lt;h4&gt;Event&nbsp;Binding&lt;\/h4&gt;<\/div>\n<div>&lt;button&nbsp;(click)=&#8221;hello()&#8221;&gt;Hello!&lt;\/button&gt;<\/div>\n<\/div>\n<div><\/div>\n<div><strong>app.component.ts:<\/strong><\/div>\n<div>\n<div>\n<div>&nbsp;&nbsp;hello():&nbsp;void&nbsp;{<\/div>\n<div>&nbsp;&nbsp;&nbsp;&nbsp;alert(&#8216;Hello!&#8217;);<\/div>\n<div>&nbsp;&nbsp;}<\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<div>Result:<\/div>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6240\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_02.jpg\" alt width=\"117\" height=\"79\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6240 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20117%2079%22%3E%3C%2Fsvg%3E\" alt width=\"117\" height=\"79\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_02.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6242\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_03.jpg\" alt width=\"698\" height=\"300\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_03.jpg 698w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_03-300x129.jpg 300w\" sizes=\"(max-width: 698px) 100vw, 698px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6242 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20698%20300%22%3E%3C%2Fsvg%3E\" alt width=\"698\" height=\"300\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20698%20300%22%3E%3C%2Fsvg%3E 698w\" sizes=\"(max-width: 698px) 100vw, 698px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_03.jpg 698w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_03-300x129.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_03.jpg\"><\/p>\n<h3><\/h3>\n<h3><\/h3>\n<h3><\/h3>\n<h3 id=\"custom-events-with-eventemitter\"><span class=\"ez-toc-section\" id=\"Parent-Child_Relationship_%E2%80%93_Sending_data_from_Parent_to_Child\"><\/span>Parent-Child Relationship &#8211; Sending data from Parent to Child<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div>\n<p><a href=\"https:\/\/angular.io\/guide\/inputs-outputs\">Angular documentation<\/a><\/p>\n<\/div>\n<div>\n<div>\n<p>This tutorial has a very fast approach, useful for revisions and fast learning, but sometimes, when the concept is a little more tricky, may be helpful to extend the approach.<br>\nIf desired detailed information, please take a look at <a href=\"https:\/\/angular.io\/guide\/inputs-outputs\">@Input\/@Output documentation.<\/a><br>\nAlso, you may check other sources referenced below under <em>Credits<\/em> topic, at the page&#8217;s bottom.<\/p>\n<\/div>\n<\/div>\n<p>To go ahead, it is necessary to create app&#8217;s child, run on prompt, under project&#8217;s root folder,&nbsp; the following command:<\/p>\n<p><strong>ng g c app-child<\/strong><\/p>\n<p>Result:<\/p>\n<div>\n<div><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6245\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_04.jpg\" alt width=\"315\" height=\"349\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_04.jpg 315w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_04-271x300.jpg 271w\" sizes=\"(max-width: 315px) 100vw, 315px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6245 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20315%20349%22%3E%3C%2Fsvg%3E\" alt width=\"315\" height=\"349\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20315%20349%22%3E%3C%2Fsvg%3E 315w\" sizes=\"(max-width: 315px) 100vw, 315px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_04.jpg 315w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_04-271x300.jpg 271w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_04.jpg\"><\/div>\n<\/div>\n<div><\/div>\n<div><\/div>\n<div>Edit app-child.component.ts and adjust the import to declare EventEmitter, @Output and @Input:<\/div>\n<div><em><br>\n<\/em>\n<div>\n<div><em>import&nbsp;{&nbsp;Component,&nbsp;OnInit,&nbsp;Output,&nbsp;Input,&nbsp;EventEmitter&nbsp;}&nbsp;from&nbsp;&#8216;@angular\/core&#8217;;<\/em><\/div>\n<\/div>\n<div><em>Obs.: the @output and EventEmitter will be used for the next examples.<\/em><\/div>\n<\/div>\n<div><\/div>\n<div><\/div>\n<div>\n<h4><span class=\"ez-toc-section\" id=\"Example-2\"><\/span>Example<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><strong>1. Edit app.component.ts and declare childName just after class declaration. Example:<\/strong><\/p>\n<div>\n<div>\n<div>\n<pre class>export class AppComponent {\n  childName = 'app-child';\n<\/pre>\n<\/div>\n<\/div>\n<div><strong>NOTE<\/strong>: if the childName is not set closer to the class declaration, some instance name may cause this compilation error:<br>\n<em>error TS2339: Property &#8216;childName&#8217; does not exist on type &#8216;AppComponent&#8217;.<br>\n<\/em>So, when having this kind of compilation issue, try to move the not recognized property to a closer position to the class declaration.<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><strong>2. Edit app-child.component.ts and add:<\/strong><\/p>\n<div>\n<div>\n<div>\n<div>export&nbsp;class&nbsp;AppChildComponent&nbsp;implements&nbsp;OnInit&nbsp;{<\/div>\n<div>&nbsp; &nbsp; @Input() myName: string; \/\/ the child will get its name from the parent<\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<\/div>\n<div>\n<div>\n<p>Edit app-child.component.html and replace the default code with:<\/p>\n<div>\n<div>&lt;p&gt;<\/div>\n<div>Hello!<\/div>\n<div>My&nbsp;name&nbsp;is&nbsp;&#8220;&lt;i&gt;{{myName}}&lt;\/i&gt;&#8221;&nbsp;and&nbsp;it&nbsp;was&nbsp;given&nbsp;by&nbsp;my&nbsp;parent.<\/div>\n<div>&lt;\/p&gt;<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<p><strong>3. Edit app.component.html and set:<\/strong><\/p>\n<\/div>\n<pre class>&lt;h4&gt;Event&nbsp;Binding&nbsp;@Input&lt;\/h4&gt;\n&lt;app-app-child [myName]=\"childName\"&gt;&lt;\/app-app-child&gt;\n<\/pre>\n<div><\/div>\n<div>Where does it come from the element&#8217;s name (&lt;app-app-child&gt;)?<\/div>\n<p>Go to the <em>app-child.component.ts<\/em> file and check its selector name:<\/p>\n<pre class>@Component({\n&nbsp;&nbsp;selector:&nbsp;'app-app-child',\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>4. Result:<\/strong><\/p>\n<div><\/div>\n<div><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6246\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_05.jpg\" alt width=\"414\" height=\"84\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_05.jpg 414w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_05-300x61.jpg 300w\" sizes=\"(max-width: 414px) 100vw, 414px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6246 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20414%2084%22%3E%3C%2Fsvg%3E\" alt width=\"414\" height=\"84\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20414%2084%22%3E%3C%2Fsvg%3E 414w\" sizes=\"(max-width: 414px) 100vw, 414px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_05.jpg 414w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_05-300x61.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_05.jpg\"><\/div>\n<h3><\/h3>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"Parent-Child_Relationship_sending_data_from_child_to_parent_using_EventEmitter_Output\"><\/span>Parent-Child Relationship sending data from child to parent using EventEmitter, @Output<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><a href=\"https:\/\/angular.io\/guide\/inputs-outputs\">Angular documentation<\/a><\/p>\n<p id=\"custom-events-with-eventemitter\">This example comes from <a href=\"https:\/\/angular.io\/guide\/inputs-outputs\">Angular doc<\/a> where you may find additional information.<br>\nHere, the example is summarized to attend the purpose of this post (revision\/fast learning).<br>\nSome small changes were done to adjust to the current sequence ot the tutorial.<\/p>\n<p><strong><br>\n1.&nbsp; Add to app-child.component.ts:<\/strong><\/p>\n<p><span class=\"lit\">&nbsp; &nbsp;@<\/span><a class=\"code-anchor\" href=\"https:\/\/angular.io\/api\/core\/Output\"><span class=\"lit\">Output<\/span><\/a><span class=\"pun\">()<\/span><span class=\"pln\"> newItemEvent <\/span><span class=\"pun\">=<\/span> <span class=\"kwd\">new<\/span> <a class=\"code-anchor\" href=\"https:\/\/angular.io\/api\/core\/EventEmitter\"><span class=\"typ\">EventEmitter<\/span><\/a><span class=\"str\">&lt;string&gt;<\/span><span class=\"pun\">();<\/span><\/p>\n<pre class>  addNewItem(value: string): void {\n    this.newItemEvent.emit(value);\n  }\n<\/pre>\n<p>Obs.:<br>\na.&nbsp; &nbsp;It is used the import already created in the previous topic.<br>\nb. &nbsp;<a class=\"code-anchor\" href=\"https:\/\/angular.io\/api\/core\/EventEmitter\">EventEmitter<\/a><code>&lt;string&gt;<\/code>\u2014the&nbsp;<code>@<\/code><a class=\"code-anchor\" href=\"https:\/\/angular.io\/api\/core\/Output\">Output<\/a><code>()<\/code>&#8216;s type<\/p>\n<p>&nbsp;<\/p>\n<p><strong>2.&nbsp; Add to app-child.component.html:<\/strong><\/p>\n<pre class>&lt;label&gt;Add an item: &lt;input #newItem&gt;&lt;\/label&gt;\n&lt;button (click)=\"addNewItem(newItem.value)\"&gt;Add to parent's list&lt;\/button&gt;\n<\/pre>\n<p><strong><br>\n3.&nbsp; Add to app.component.ts:<\/strong><\/p>\n<pre class>items = ['item1', 'item2', 'item3', 'item4'];  \/\/ set this with the other properties, near to class definition.\n\n\/\/ append the method to the end of the file\naddItem(newItem: string): void {\n\tthis.items.push(newItem);\n}\n\n<\/pre>\n<p><strong>4. Append to app.component.html:<\/strong><\/p>\n<p>The highlighted code is the prior code used in the previous topic.<br>\nNow, as part of our exercise, we are going to &#8220;merge&#8221; both examples into just one, since we are using the same output element (app-app-child).<br>\nFollow by the images.<\/p>\n<p><strong>BEFORE<\/strong><\/p>\n<pre class><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6248\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_06a.jpg\" alt width=\"532\" height=\"212\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_06a.jpg 532w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_06a-300x120.jpg 300w\" sizes=\"(max-width: 532px) 100vw, 532px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6248 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20532%20212%22%3E%3C%2Fsvg%3E\" alt width=\"532\" height=\"212\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20532%20212%22%3E%3C%2Fsvg%3E 532w\" sizes=\"(max-width: 532px) 100vw, 532px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_06a.jpg 532w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_06a-300x120.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_06a.jpg\"> \n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>AFTER<\/strong><\/p>\n<pre class>&lt;h4&gt;Event Binding - Child&lt;\/h4&gt;\n&lt;app-app-child [myName]=\"childName\" (newItemEvent)=\"addItem($event)\"&gt;&lt;\/app-app-child&gt;\n\n&lt;h4&gt;Event Binding - Parent&lt;\/h4&gt;\n&lt;ul&gt;\n  &lt;li *ngFor=\"let item of items\"&gt;{{item}}&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;br \/&gt;&lt;br \/&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6249\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_06b.jpg\" alt width=\"703\" height=\"224\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_06b.jpg 703w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_06b-300x96.jpg 300w\" sizes=\"(max-width: 703px) 100vw, 703px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6249 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20703%20224%22%3E%3C%2Fsvg%3E\" alt width=\"703\" height=\"224\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20703%20224%22%3E%3C%2Fsvg%3E 703w\" sizes=\"(max-width: 703px) 100vw, 703px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_06b.jpg 703w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_06b-300x96.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_06b.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>RESULT<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6250\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_07.jpg\" alt width=\"426\" height=\"489\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_07.jpg 426w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_07-261x300.jpg 261w\" sizes=\"(max-width: 426px) 100vw, 426px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6250 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20426%20489%22%3E%3C%2Fsvg%3E\" alt width=\"426\" height=\"489\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20426%20489%22%3E%3C%2Fsvg%3E 426w\" sizes=\"(max-width: 426px) 100vw, 426px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_07.jpg 426w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_07-261x300.jpg 261w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_07.jpg\"><\/p>\n<p>The &#8220;ol\u00e1&#8221; (portuguese word for hello) is pushed into the items array when the button is pressed.<\/p>\n<p>You, see! Here you also learn portuguese!&nbsp; <noscript><img decoding=\"async\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/plugins\/wp-edit\/plugins\/emoticons\/img\/smiley-laughing.gif\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/plugins\/wp-edit\/plugins\/emoticons\/img\/smiley-laughing.gif\" class=\" lazyload\"><br>\nOk! Let&#8217;s go ahead because there is still road to run!!<\/p>\n<p><a href=\"https:\/\/stackblitz.com\/run?file=src%2Fapp%2Fsizer%2Fsizer.component.ts\">Live Example<\/a><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Two-way_Binding_Input_and_Output_together\"><\/span>Two-way Binding: @Input<code>()<\/code>&nbsp;and&nbsp;<code>@<\/code>Output<code>()<\/code>&nbsp;together<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>@<a class=\"code-anchor\" href=\"https:\/\/angular.io\/api\/core\/Input\">Input<\/a><code>()<br>\n<\/code><code>@<\/code><a class=\"code-anchor\" href=\"https:\/\/angular.io\/api\/core\/Output\">Output<\/a><code>()<\/code><\/p>\n<p><a href=\"https:\/\/angular.io\/guide\/inputs-outputs\">Angular documentation &#8211; Two-way binding<\/a><\/p>\n<p><a href=\"https:\/\/angular.io\/guide\/two-way-binding#how-two-way-binding-works\">How two-way data binding works<\/a><\/p>\n<p><a href=\"https:\/\/stackblitz.com\/run?file=src%2Fapp%2Fsizer%2Fsizer.component.ts\">Two-way Binding live demo<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>In this kind of binding the data is passed to the child and vice-versa.<\/p>\n<p><strong>*** IMPORTANT NOTE:<\/strong><br>\n<strong>To make it work, there is a rule: the event name must follow a syntax that is the concatenation of the &#8220;@Input&#8221; attribute name plus the &#8220;Change&#8221; suffix.<\/strong><\/p>\n<p>Example:<\/p>\n<p><code><\/code><\/p>\n<pre class>  @Input()  sportCode: number;\n  @Output() sportCodeChange = new EventEmitter&lt;number&gt;();\n\n  sportItens = ['ball', 'football boots', 'shirt', 'shorts', 'sockets'];\n  @Input()  sportItem: string;\n  @Output() sportItemChange = new EventEmitter&lt;string&gt;();\n<\/pre>\n<p>&nbsp;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Two-way_Binding_%E2%80%93_parent_property_vs_child_property\"><\/span>Two-way Binding \u2013 parent property vs. child property<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6261\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_10.jpg\" alt width=\"1194\" height=\"323\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_10.jpg 1194w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_10-300x81.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_10-768x208.jpg 768w\" sizes=\"(max-width: 1194px) 100vw, 1194px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6261 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201194%20323%22%3E%3C%2Fsvg%3E\" alt width=\"1194\" height=\"323\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201194%20323%22%3E%3C%2Fsvg%3E 1194w\" sizes=\"(max-width: 1194px) 100vw, 1194px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_10.jpg 1194w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_10-300x81.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_10-768x208.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_10.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p><strong>PREVIOUS CODE TO BE REFACTORED (app.component.html&nbsp; BEFORE)<\/strong><\/p>\n<p><\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6273\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_09b.jpg\" alt width=\"673\" height=\"158\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_09b.jpg 673w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_09b-300x70.jpg 300w\" sizes=\"(max-width: 673px) 100vw, 673px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6273 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20673%20158%22%3E%3C%2Fsvg%3E\" alt width=\"673\" height=\"158\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20673%20158%22%3E%3C%2Fsvg%3E 673w\" sizes=\"(max-width: 673px) 100vw, 673px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_09b.jpg 673w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_09b-300x70.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_09b.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p><strong><br>\nAFTER REFACTORING&nbsp; (app.component.html&nbsp; AFTER)<\/strong><\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6277\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_11.jpg\" alt width=\"642\" height=\"259\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_11.jpg 642w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_11-300x121.jpg 300w\" sizes=\"(max-width: 642px) 100vw, 642px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6277 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20642%20259%22%3E%3C%2Fsvg%3E\" alt width=\"642\" height=\"259\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20642%20259%22%3E%3C%2Fsvg%3E 642w\" sizes=\"(max-width: 642px) 100vw, 642px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_11.jpg 642w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_11-300x121.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_11.jpg\"><\/p>\n<pre><\/pre>\n<pre class>&lt;app-app-child \n\t[(sportItem)]=\"currentSportItem\" (sportItemChange)=\"currentSportItem=$event\"  \n\t[(sportCode)]=\"currentSportCode\" (sportCodeChange)=\"currentSportCode=$event\"  \n\t[myName]=\"childName\" (newItemEvent)=\"addItem($event)\"&gt;\n&lt;\/app-app-child&gt;\n<\/pre>\n<p><strong><br>\nPARENT IMPLEMENTATION (app.component.ts)<\/strong><\/p>\n<div>\n<div>\n<div>currentSportItem = &#8221;;<br>\ncurrentSportCode = 0;<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><strong>CHILD IMPLEMENTATION (app-child.component.ts)<\/strong><\/p>\n<p>&nbsp;<\/p>\n<pre class> sportItens = ['ball', 'football boots', 'shirt', 'shorts', 'sockets'];\n\n  @Input()  sportCode: number;\n  @Output() sportCodeChange = new EventEmitter&lt;number&gt;();\n\n  @Input()  sportItem: string;\n  @Output() sportItemChange = new EventEmitter&lt;string&gt;();\n\n\/\/ ...\n\n  inc(): void {\n    this.sportCode  += 1;\n    this.nextCode(this.sportCode);\n    this.nextItem(this.sportCode);\n  }\n\n  nextCode(num: number): void {\n    this.sportCode =  (this.sportCode % 5);\n    this.sportCodeChange.emit(this.sportCode);\n  }\n\n  nextItem(idx: number): void {\n    this.sportItem = this.sportItens[idx];\n    this.sportItemChange.emit(this.sportItem);\n  }\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Comparing parent vs. child implementation, you may notice that the child has all the code to make it happen, and the parent just the two properties that sends and receives data.<\/p>\n<p>&nbsp;<\/p>\n<p><strong><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6280\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_12.jpg\" alt width=\"548\" height=\"403\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_12.jpg 548w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_12-300x221.jpg 300w\" sizes=\"(max-width: 548px) 100vw, 548px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6280 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20548%20403%22%3E%3C%2Fsvg%3E\" alt width=\"548\" height=\"403\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20548%20403%22%3E%3C%2Fsvg%3E 548w\" sizes=\"(max-width: 548px) 100vw, 548px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_12.jpg 548w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_12-300x221.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_12.jpg\"><\/strong><\/p>\n<h4><\/h4>\n<p><strong>AFTER PRESSING BUTTON (+)<\/strong><\/p>\n<h4><strong><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6281\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_13.jpg\" alt width=\"617\" height=\"309\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_13.jpg 617w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_13-300x150.jpg 300w\" sizes=\"(max-width: 617px) 100vw, 617px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6281 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20617%20309%22%3E%3C%2Fsvg%3E\" alt width=\"617\" height=\"309\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20617%20309%22%3E%3C%2Fsvg%3E 617w\" sizes=\"(max-width: 617px) 100vw, 617px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_13.jpg 617w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_13-300x150.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_13.jpg\"><\/strong><\/h4>\n<h4><\/h4>\n<h4><span class=\"ez-toc-section\" id=\"Two-way_Binding_%E2%80%93_property_and_method\"><\/span>Two-way Binding &#8211; property and method<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>The image below belongs to the <a href=\"https:\/\/angular.io\/guide\/inputs-outputs\">Angular documentation<\/a> and it is shown at the bottom of this <a href=\"https:\/\/angular.io\/guide\/inputs-outputs\">page<\/a>, but without the respective implementation.<br>\nLet&#8217;s implement this code as an exercise but adjusting to our pre-existante implementation.<br>\nAfter all, this is our developer&#8217;s daily life-style routine, combining and merging code everywhere, every day &#8230;<\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6254\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_08.jpg\" alt width=\"715\" height=\"298\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_08.jpg 715w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_08-300x125.jpg 300w\" sizes=\"(max-width: 715px) 100vw, 715px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6254 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20715%20298%22%3E%3C%2Fsvg%3E\" alt width=\"715\" height=\"298\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20715%20298%22%3E%3C%2Fsvg%3E 715w\" sizes=\"(max-width: 715px) 100vw, 715px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_08.jpg 715w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_08-300x125.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_08.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>The image above tells us the following:<\/p>\n<p>1. The child select in our implementation will be replaced by the selector created by the new component&#8217;s selector (app-app-item).<\/p>\n<p>&lt;app-app-item [item]=&#8221;currentItem&#8221; (deleteRequest)=&#8221;crossOffItem($event)&#8221; &gt;&lt;\/app-app-item&gt;<\/p>\n<p>&nbsp;<\/p>\n<p>2. In the child&#8217;s source, there is one &#8220;@Input&#8221; property denoted by &#8220;item&#8221; and the respective &#8220;@Output&#8221; event denoted by &#8220;deleteRequest&#8221;.<\/p>\n<div>\n<div>&nbsp; import { Component, OnInit, Output, Input, EventEmitter } from &#8216;@angular\/core&#8217;;<\/div>\n<div>\n<div>&nbsp;&nbsp;@Input()&nbsp;item:&nbsp;string;<\/div>\n<div>&nbsp;&nbsp;@Output() deleteRequestChange = new EventEmitter&lt;void&gt;();<\/div>\n<\/div>\n<\/div>\n<p>3. The parent&#8217;s source has one property and one method, respectively denoted by &#8220;currentItem&#8221; and &#8220;crossOffItem(event)&#8221;.<\/p>\n<div>\n<div>\n<div>currentItem&nbsp;=&nbsp;this.items[0];<\/div>\n<\/div>\n<\/div>\n<div>\n<div>crossOffItem(event: EventEmitter&lt;void&gt;): void {&#8230;}<\/div>\n<div><\/div>\n<\/div>\n<h5><span class=\"ez-toc-section\" id=\"Creating_the_component_and_Implementing_code\"><\/span>Creating the component and Implementing code<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>ng g c app-item<\/p>\n<p>Opening the app-item.component.ts file created by the command above, we may check the child selector that shall be used in parent&#8217;s html file:<\/p>\n<p>@Component({ selector: &#8216;app-app-item&#8217;, templateUrl: &#8216;.\/app-item.component.html&#8217;, styleUrls: [&#8216;.\/app-item.component.css&#8217;] })<\/p>\n<h5><\/h5>\n<h5><span class=\"ez-toc-section\" id=\"Code_Implementation\"><\/span>Code Implementation<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p><strong>app.component.ts<\/strong><\/p>\n<div>\n<div>&nbsp; &nbsp; items = [&#8216;item1&#8217;, &#8216;item2&#8217;, &#8216;item3&#8217;, &#8216;item4&#8217;];<\/div>\n<div>\/\/ &#8230;<\/div>\n<\/div>\n<div>\n<pre class>  crossOffItem(event: EventEmitter&lt;void&gt;): void {\n      this.items.shift();\n  }\n<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<p><strong>app-item.component.ts<\/strong><\/p>\n<pre class>export class AppItemComponent implements OnInit {\n\n  @Input() item: string;\n  @Output() deleteRequest = new EventEmitter&lt;void&gt;();\n\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n  del(): void {\n    this.deleteRequest.emit();\n  }\n\n}\n<\/pre>\n<div>\n<p><strong>app-item.component.html<\/strong><\/p>\n<pre class>&lt;h4&gt;Event Binding @Output - Item&lt;\/h4&gt;\n\n&lt;label&gt;Delete item: {{sportCode}}&lt;\/label&gt;&lt;br \/&gt;&lt;br \/&gt;\n&lt;button (click)=\"del()\" title=\"delete\"&gt;&lt;img src=\"..\/..\/assets\/img\/delete_30x30.jpg\" \/&gt;&lt;\/button&gt;&lt;br \/&gt;\n<\/pre>\n<p><strong><br>\napp.component.html<\/strong><\/p>\n<pre class>&lt;h4&gt;Event Binding - Parent&lt;\/h4&gt;\n&lt;ul&gt;\n  &lt;li *ngFor=\"let item of items\"&gt;{{item}}&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;br \/&gt;&lt;br \/&gt;\n&lt;app-app-item [item]=\"currentItem\" (deleteRequest)=\"crossOffItem($event)\" &gt;&lt;\/app-app-item&gt;\n<\/pre>\n<\/div>\n<p><strong>RESULT<\/strong><\/p>\n<p><strong>Initial status<\/strong><\/p>\n<p><strong><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6285\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_14.jpg\" alt width=\"496\" height=\"332\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_14.jpg 496w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_14-300x201.jpg 300w\" sizes=\"(max-width: 496px) 100vw, 496px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6285 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20496%20332%22%3E%3C%2Fsvg%3E\" alt width=\"496\" height=\"332\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20496%20332%22%3E%3C%2Fsvg%3E 496w\" sizes=\"(max-width: 496px) 100vw, 496px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_14.jpg 496w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_14-300x201.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_14.jpg\"><\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><strong>After two clicks on the garbage<\/strong><\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6286\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_15.jpg\" alt width=\"466\" height=\"285\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_15.jpg 466w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_15-300x183.jpg 300w\" sizes=\"(max-width: 466px) 100vw, 466px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6286 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20466%20285%22%3E%3C%2Fsvg%3E\" alt width=\"466\" height=\"285\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20466%20285%22%3E%3C%2Fsvg%3E 466w\" sizes=\"(max-width: 466px) 100vw, 466px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_15.jpg 466w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_15-300x183.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_event_binding_15.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Two-way_data_binding_with_ngModel\"><\/span>Two-way data binding with ngModel<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div>\n<p id=\"displaying-and-updating-properties-with-ngmodel\">See <span style=\"text-decoration: underline;\">Displaying and updating properties with ngModel<\/span> at&nbsp;<a href=\"https:\/\/angular.io\/guide\/built-in-directives#ngModel\">Angular documentation<\/a><\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p><strong>In the app.component.ts file, set:<\/strong><\/p>\n<pre class>  person = {\n    name: 'Mary',\n    lastname: 'Doe'\n  };\n<\/pre>\n<p>&nbsp;<\/p>\n<pre class>nameToUppercase(name:&nbsp;string):&nbsp;void&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;this.person.name&nbsp;=&nbsp;name.toUpperCase();\n}\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>In the app.component.html file, append:<\/strong><\/p>\n<pre class>&lt;h4&gt;Event Binding using ngModel&lt;\/h4&gt;\n&lt;p&gt;Current item name: {{currentItem}}&lt;\/p&gt;\n&lt;p&gt;\n  &lt;label for=\"example-ngModel\"&gt;[ngModel]:&lt;\/label&gt;\n  &lt;input [ngModel]=\"person.name\" (ngModelChange)=\"nameToUppercase($event)\" id=\"example-ngModel\"&gt;\n&lt;\/p&gt;\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Result<\/strong><\/p>\n<p>Starts as Person&#8217;s name.<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6369\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_event_binding_16.jpg\" alt width=\"304\" height=\"138\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_event_binding_16.jpg 304w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_event_binding_16-300x136.jpg 300w\" sizes=\"(max-width: 304px) 100vw, 304px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6369 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20304%20138%22%3E%3C%2Fsvg%3E\" alt width=\"304\" height=\"138\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20304%20138%22%3E%3C%2Fsvg%3E 304w\" sizes=\"(max-width: 304px) 100vw, 304px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_event_binding_16.jpg 304w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_event_binding_16-300x136.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_event_binding_16.jpg\"><\/p>\n<p>Then typing in the input field, it is converted to upper case:<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6370\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_event_binding_17.jpg\" alt width=\"291\" height=\"133\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6370 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20291%20133%22%3E%3C%2Fsvg%3E\" alt width=\"291\" height=\"133\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_event_binding_17.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<div>\n<h4><span class=\"ez-toc-section\" id=\"NOTE_error_NG8002\"><\/span>NOTE: error NG8002<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p class=\"post-title entry-title\">If you get the following error:<br>\nerror NG8002: Can&#8217;t bind to &#8216;ngModel&#8217; since it isn&#8217;t a known property of &#8216;input&#8217;<\/p>\n<p>see the solution at:<br>\n<a href=\"https:\/\/alsdias.blogspot.com\/2021\/03\/javascript-error-ng8002-cant-bind-to.html\">alsdias.blogspot.com\/2021\/03\/javascript-error-ng8002-cant-bind-to.html<\/a><\/p>\n<\/div>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"Summary_of_the_examples_from_Angulars_Built-in_Directives_post\"><\/span>Summary of the examples from Angular&#8217;s Built-in Directives post<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre class=\"programbox\">&lt;h1&gt;Built-in Directives&lt;\/h1&gt;\n\n&lt;h2&gt;Built-in attribute directives&lt;\/h2&gt;\n\n&lt;h3 id=\"ngModel\"&gt;NgModel (two-way) Binding&lt;\/h3&gt;\n\n&lt;fieldset&gt;&lt;h4&gt;NgModel examples&lt;\/h4&gt;\n  &lt;p&gt;Current item name: {{currentItem.name}}&lt;\/p&gt;\n  &lt;p&gt;\n    &lt;label for=\"without\"&gt;without NgModel:&lt;\/label&gt;\n    &lt;input [value]=\"currentItem.name\" (input)=\"currentItem.name=getValue($event)\" id=\"without\"&gt;\n  &lt;\/p&gt;\n\n  &lt;p&gt;\n    &lt;label for=\"example-ngModel\"&gt;[(ngModel)]:&lt;\/label&gt;\n    &lt;input [(ngModel)]=\"currentItem.name\" id=\"example-ngModel\"&gt;\n  &lt;\/p&gt;\n\n  &lt;p&gt;\n    &lt;label for=\"example-change\"&gt;(ngModelChange)=\"...name=$event\":&lt;\/label&gt;\n    &lt;input [ngModel]=\"currentItem.name\" (ngModelChange)=\"currentItem.name=$event\" id=\"example-change\"&gt;\n  &lt;\/p&gt;\n\n  &lt;p&gt;\n    &lt;label for=\"example-uppercase\"&gt;(ngModelChange)=\"setUppercaseName($event)\"\n      &lt;input [ngModel]=\"currentItem.name\" (ngModelChange)=\"setUppercaseName($event)\" id=\"example-uppercase\"&gt;\n    &lt;\/label&gt;\n  &lt;\/p&gt;\n&lt;\/fieldset&gt;\n\n&lt;hr&gt;&lt;h2 id=\"ngClass\"&gt;NgClass Binding&lt;\/h2&gt;\n\n&lt;p&gt;currentClasses is {{currentClasses | json}}&lt;\/p&gt;\n&lt;div [ngClass]=\"currentClasses\"&gt;This div is initially saveable, unchanged, and special.&lt;\/div&gt;\n&lt;ul&gt;\n  &lt;li&gt;\n    &lt;label for=\"saveable\"&gt;saveable&lt;\/label&gt;\n    &lt;input type=\"checkbox\" [(ngModel)]=\"canSave\" id=\"saveable\"&gt;\n  &lt;\/li&gt;\n  &lt;li&gt;\n    &lt;label for=\"modified\"&gt;modified:&lt;\/label&gt;\n    &lt;input type=\"checkbox\" [value]=\"!isUnchanged\" (change)=\"isUnchanged=!isUnchanged\" id=\"modified\"&gt;&lt;\/li&gt;\n  &lt;li&gt;\n    &lt;label for=\"special\"&gt;special: &lt;input type=\"checkbox\" [(ngModel)]=\"isSpecial\" id=\"special\"&gt;&lt;\/label&gt;\n&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;button type=\"button\" (click)=\"setCurrentClasses()\"&gt;Refresh currentClasses&lt;\/button&gt;\n\n&lt;div [ngClass]=\"currentClasses\"&gt;\n  This div should be {{ canSave ? \"\": \"not\"}} saveable,\n                  {{ isUnchanged ? \"unchanged\" : \"modified\" }} and\n                  {{ isSpecial ? \"\": \"not\"}} special after clicking \"Refresh\".&lt;\/div&gt;\n&lt;br&gt;&lt;br&gt;\n&lt;!-- toggle the \"special\" class on\/off with a property --&gt;\n&lt;div [ngClass]=\"isSpecial ? 'special' : ''\"&gt;This div is special&lt;\/div&gt;\n&lt;div class=\"helpful study course\"&gt;Helpful study course&lt;\/div&gt;\n&lt;div [ngClass]=\"{'helpful':false, 'study':true, 'course':true}\"&gt;Study course&lt;\/div&gt;\n\n\n&lt;!-- NgStyle binding --&gt;\n&lt;hr&gt;&lt;h3&gt;NgStyle Binding&lt;\/h3&gt;\n&lt;div [style.font-size]=\"isSpecial ? 'x-large' : 'smaller'\"&gt;\n  This div is x-large or smaller.\n&lt;\/div&gt;\n\n&lt;h4&gt;[ngStyle] binding to currentStyles - CSS property names&lt;\/h4&gt;\n&lt;p&gt;currentStyles is {{currentStyles | json}}&lt;\/p&gt;\n\n&lt;div [ngStyle]=\"currentStyles\"&gt;\n  This div is initially italic, normal weight, and extra large (24px).\n&lt;\/div&gt;\n\n\n\n&lt;br&gt;\n&lt;label for=\"canSave\"&gt;italic: &lt;input id=\"canSave\" type=\"checkbox\" [(ngModel)]=\"canSave\"&gt;&lt;\/label&gt; |\n&lt;label for=\"isUnchanged\"&gt;normal: &lt;input id=\"isUnchanged\" type=\"checkbox\" [(ngModel)]=\"isUnchanged\"&gt;&lt;\/label&gt; |\n&lt;label for=\"isSpecial\"&gt;xlarge: &lt;input id=\"isSpecial\" type=\"checkbox\" [(ngModel)]=\"isSpecial\"&gt;&lt;\/label&gt;\n&lt;button type=\"button\" (click)=\"setCurrentStyles()\"&gt;Refresh currentStyles&lt;\/button&gt;\n&lt;br&gt;&lt;br&gt;\n&lt;div [ngStyle]=\"currentStyles\"&gt;\n  This div should be {{ canSave ? \"italic\": \"plain\"}},\n                  {{ isUnchanged ? \"normal weight\" : \"bold\" }} and,\n                  {{ isSpecial ? \"extra large\": \"normal size\"}} after clicking \"Refresh\".&lt;\/div&gt;\n\n&lt;hr&gt;\n&lt;h2&gt;Built-in structural directives&lt;\/h2&gt;\n&lt;h3 id=\"ngIf\"&gt;NgIf Binding&lt;\/h3&gt;\n&lt;div&gt;\n  &lt;p&gt;If isActive is true, app-item-detail will render: &lt;\/p&gt;\n  &lt;app-item-detail *ngIf=\"isActive\" [item]=\"item\"&gt;&lt;\/app-item-detail&gt;\n\n  &lt;button type=\"button\" (click)=\"isActiveToggle()\"&gt;Toggle app-item-detail&lt;\/button&gt;\n&lt;\/div&gt;\n&lt;p&gt;If currentCustomer isn't null, say hello to Laura:&lt;\/p&gt;\n&lt;div *ngIf=\"currentCustomer\"&gt;Hello, {{currentCustomer.name}}&lt;\/div&gt;\n&lt;p&gt;nullCustomer is null by default. NgIf guards against null. Give it a value to show it:&lt;\/p&gt;\n&lt;div *ngIf=\"nullCustomer\"&gt;Hello, &lt;span&gt;{{nullCustomer}}&lt;\/span&gt;&lt;\/div&gt;\n&lt;button type=\"button\" (click)=\"giveNullCustomerValue()\"&gt;Give nullCustomer a value&lt;\/button&gt;\n\n\n&lt;h4&gt;NgIf binding with template (no *)&lt;\/h4&gt;\n\n&lt;ng-template [ngIf]=\"currentItem\"&gt;Add {{currentItem.name}} with template&lt;\/ng-template&gt;\n&lt;hr&gt;\n\n&lt;h4&gt;Show\/hide vs. NgIf&lt;\/h4&gt;\n&lt;!-- isSpecial is true --&gt;\n&lt;div [class.hidden]=\"!isSpecial\"&gt;Show with class&lt;\/div&gt;\n&lt;div [class.hidden]=\"isSpecial\"&gt;Hide with class&lt;\/div&gt;\n\n&lt;p&gt;ItemDetail is in the DOM but hidden&lt;\/p&gt;\n&lt;app-item-detail [class.hidden]=\"isSpecial\"&gt;&lt;\/app-item-detail&gt;\n\n&lt;div [style.display]=\"isSpecial ? 'block' : 'none'\"&gt;Show with style&lt;\/div&gt;\n&lt;div [style.display]=\"isSpecial ? 'none'  : 'block'\"&gt;Hide with style&lt;\/div&gt;\n\n\n&lt;hr&gt;\n&lt;h2 id=\"ngFor\"&gt;NgFor Binding&lt;\/h2&gt;\n\n&lt;div class=\"box\"&gt;\n  &lt;div *ngFor=\"let item of items\"&gt;{{item.name}}&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;p&gt;*ngFor with ItemDetailComponent element&lt;\/p&gt;\n&lt;div class=\"box\"&gt;\n  &lt;app-item-detail *ngFor=\"let item of items\" [item]=\"item\"&gt;&lt;\/app-item-detail&gt;\n&lt;\/div&gt;\n\n\n&lt;h4 id=\"ngFor-index\"&gt;*ngFor with index&lt;\/h4&gt;\n&lt;p&gt;with &lt;em&gt;semi-colon&lt;\/em&gt; separator&lt;\/p&gt;\n&lt;div class=\"box\"&gt;\n  &lt;div *ngFor=\"let item of items; let i=index\"&gt;{{i + 1}} - {{item.name}}&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;p&gt;with &lt;em&gt;comma&lt;\/em&gt; separator&lt;\/p&gt;\n&lt;div class=\"box\"&gt;\n &lt;div *ngFor=\"let item of items, let i=index\"&gt;{{i + 1}} - {{item.name}}&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;h4 id=\"ngFor-trackBy\"&gt;*ngFor trackBy&lt;\/h4&gt;\n&lt;button type=\"button\" (click)=\"resetList()\"&gt;Reset items&lt;\/button&gt;\n&lt;button type=\"button\" (click)=\"changeIds()\"&gt;Change ids&lt;\/button&gt;\n&lt;button type=\"button\" (click)=\"clearTrackByCounts()\"&gt;Clear counts&lt;\/button&gt;\n\n&lt;p&gt;&lt;em&gt;without&lt;\/em&gt; trackBy&lt;\/p&gt;\n&lt;div class=\"box\"&gt;\n  &lt;div #noTrackBy *ngFor=\"let item of items\"&gt;({{item.id}}) {{item.name}}&lt;\/div&gt;\n\n  &lt;div id=\"noTrackByCnt\" *ngIf=\"itemsNoTrackByCount\" &gt;\n    Item DOM elements change #{{itemsNoTrackByCount}} without trackBy\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;p&gt;with trackBy&lt;\/p&gt;\n&lt;div class=\"box\"&gt;\n  &lt;div #withTrackBy *ngFor=\"let item of items; trackBy: trackByItems\"&gt;({{item.id}}) {{item.name}}&lt;\/div&gt;\n\n  &lt;div id=\"withTrackByCnt\" *ngIf=\"itemsWithTrackByCount\"&gt;\n    Item DOM elements change #{{itemsWithTrackByCount}} with trackBy\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;br&gt;&lt;br&gt;&lt;br&gt;\n\n&lt;p&gt;with trackBy and &lt;em&gt;semi-colon&lt;\/em&gt; separator&lt;\/p&gt;\n&lt;div class=\"box\"&gt;\n  &lt;div *ngFor=\"let item of items; trackBy: trackByItems\"&gt;\n    ({{item.id}}) {{item.name}}\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;p&gt;with trackBy and &lt;em&gt;comma&lt;\/em&gt; separator&lt;\/p&gt;\n&lt;div class=\"box\"&gt;\n  &lt;div *ngFor=\"let item of items, trackBy: trackByItems\"&gt;({{item.id}}) {{item.name}}&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;p&gt;with trackBy and &lt;em&gt;space&lt;\/em&gt; separator&lt;\/p&gt;\n&lt;div class=\"box\"&gt;\n  &lt;div *ngFor=\"let item of items trackBy: trackByItems\"&gt;({{item.id}}) {{item.name}}&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;p&gt;with &lt;em&gt;generic&lt;\/em&gt; trackById function&lt;\/p&gt;\n&lt;div class=\"box\"&gt;\n  &lt;div *ngFor=\"let item of items, trackBy: trackById\"&gt;({{item.id}}) {{item.name}}&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;hr&gt;&lt;h2&gt;NgSwitch Binding&lt;\/h2&gt;\n\n&lt;p&gt;Pick your favorite item&lt;\/p&gt;\n&lt;div&gt;\n  &lt;label for=\"item-{{i}}\" *ngFor=\"let i of items\"&gt;\n    &lt;div&gt;&lt;input id=\"item-{{i}}\"type=\"radio\" name=\"items\" [(ngModel)]=\"currentItem\" [value]=\"i\"&gt;{{i.name}}\n    &lt;\/div&gt;\n  &lt;\/label&gt;\n&lt;\/div&gt;\n\n&lt;div [ngSwitch]=\"currentItem.feature\"&gt;\n  &lt;app-stout-item    *ngSwitchCase=\"'stout'\"    [item]=\"currentItem\"&gt;&lt;\/app-stout-item&gt;\n  &lt;app-device-item   *ngSwitchCase=\"'slim'\"     [item]=\"currentItem\"&gt;&lt;\/app-device-item&gt;\n  &lt;app-lost-item     *ngSwitchCase=\"'vintage'\"  [item]=\"currentItem\"&gt;&lt;\/app-lost-item&gt;\n  &lt;app-best-item     *ngSwitchCase=\"'bright'\"   [item]=\"currentItem\"&gt;&lt;\/app-best-item&gt;\n  &lt;div *ngSwitchCase=\"'bright'\"&gt; Are you as bright as {{currentItem.name}}?&lt;\/div&gt;\n  &lt;app-unknown-item  *ngSwitchDefault           [item]=\"currentItem\"&gt;&lt;\/app-unknown-item&gt;\n&lt;\/div&gt;\n\n\n<\/pre>\n<p>&nbsp;<\/p>\n<p>In this example, since <a href=\"https:\/\/angular.io\/guide\/built-in-directives#ngModel\">Angular documentation<\/a> has many useful examples, it&#8217;s interesting to bring them in because it is useful as a code repository for later consultation.<br>\nThe original project may be found here: <a href=\"https:\/\/angular.io\/generated\/zips\/built-in-directives\/built-in-directives.zip\">built-in-directives.zip<\/a> from <a href=\"https:\/\/angular.io\/guide\/built-in-directives#ngModel\">Built-in Directives page.<\/a><\/p>\n<div>\n<p>To migrate the ngModel&#8217;s examples from <a href=\"https:\/\/angular.io\/generated\/zips\/built-in-directives\/built-in-directives.zip\">built-in-directives.zip<\/a>&nbsp;it was created two additional packages.<\/p>\n<\/div>\n<p>ng g c child-ng<br>\nng g c item-detail<\/p>\n<p>Notice that both packages don&#8217;t have the &#8220;app&#8221; prefix because their code come from external source.<\/p>\n<p>For more details, the source code may be found on <a href=\"https:\/\/github.com\/alsdias\/afsTutorial\">GitHub<\/a>, &#8220;step3&#8221; tag.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"USEFUL_NOTES\"><\/span>#USEFUL NOTES<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Meaning_of_exclamation_mark_on_input_var\"><\/span>Meaning of exclamation mark on @input var<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>@Input() item!: Item;<\/strong><\/p>\n<p>In Angular, when you see an exclamation mark (`!`) in front of an `@Input` variable declaration, it indicates that the variable is marked as non-null.<br>\nThis is a feature introduced in TypeScript called &#8220;definite assignment assertions.&#8221;<\/p>\n<p>Here&#8217;s how it works:<\/p>\n<p>&#8220;`typescript<br>\n@Input() myInput!: string;<br>\n&#8220;`<\/p>\n<p>In this example, `myInput` is declared as an `@Input` variable.<br>\nThe exclamation mark indicates to TypeScript that even though it&#8217;s not initialized in the constructor or assigned a value before being used, it will be assigned a value before being accessed at runtime.<br>\nThis is typically the case when Angular initializes the component and sets the value of the `@Input` property.<\/p>\n<p>Using `!` explicitly tells TypeScript that you, as the developer, are ensuring that the variable will have a value when it&#8217;s used, thus avoiding TypeScript compilation errors related to potential null or undefined values.<\/p>\n<p>It&#8217;s important to note that using `!` means you&#8217;re taking responsibility for ensuring the variable is indeed initialized before use.<br>\nIf there&#8217;s a chance it might not be initialized in certain circumstances, it&#8217;s better to handle that case explicitly in your code.<\/p>\n<p>@FROM: ChatGPT<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Interrogation_mark_usage\"><\/span>Interrogation mark (`?`) usage<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>&lt;span&gt;{{item?.name}}&lt;\/span&gt;<br>\n<\/strong><\/p>\n<div class=\"programbox\">\n<p>In Angular, when you see an interrogation mark (`?`) used in conjunction with a variable or property, it typically signifies optional chaining or safe navigation in TypeScript.Here are two common uses:<\/p>\n<p>1. **Optional Properties**:<br>\nIn TypeScript, when you define a property with a question mark (`?`) after its name in an interface or type definition, it means that property is optional.<br>\nIt can exist or not exist on the object without causing a compilation error.<\/p>\n<p>&#8220;`typescript<br>\ninterface Person {<br>\nname: string;<br>\nage?: number; \/\/ Optional property<br>\n}<br>\n&#8220;`<\/p>\n<p>In this example, the `age` property is optional. Objects of type `Person` may or may not have an `age` property.<\/p>\n<p>2. **Safe Navigation Operator**:<br>\nIn Angular templates, the safe navigation operator (`?.`) is used to guard against null and undefined values when accessing properties of objects.<\/p>\n<p>&#8220;`html<br>\n&lt;div&gt;{{ user?.name }}&lt;\/div&gt;<br>\n&#8220;`<\/p>\n<p>In this example, if `user` is null or undefined, the expression `user?.name` will gracefully return `null` instead of throwing an error, preventing runtime errors due to accessing properties of null or undefined objects.<\/p>\n<p>Using the `?` operator is a handy way to ensure smoother handling of potentially nullable or undefined variables or properties in both TypeScript code and Angular templates.<\/p>\n<\/div>\n<p>@FROM: ChatGPT<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"CLOSING\"><\/span>CLOSING<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This step continues on step-4 where bootstrap will be used to supply a better visual experience.<br>\nThis source code may be found on GitHub, &#8220;step3&#8221; tag.<\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6374\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/github_afstutorial_tags_01.jpg\" alt width=\"1000\" height=\"342\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/github_afstutorial_tags_01.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/github_afstutorial_tags_01-300x103.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/github_afstutorial_tags_01-768x263.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6374 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20342%22%3E%3C%2Fsvg%3E\" alt width=\"1000\" height=\"342\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20342%22%3E%3C%2Fsvg%3E 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/github_afstutorial_tags_01.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/github_afstutorial_tags_01-300x103.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/github_afstutorial_tags_01-768x263.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/github_afstutorial_tags_01.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"NEXT\"><\/span>NEXT<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=7175\">Angular From Scratch Tutorial &#8211; Index<\/a><\/p>\n<p><a class=\"row-title\" href=\"https:\/\/ultering.com\/it4us\/?p=6198\" aria-label=\"\u201cAngular From Scratch Tutorial \u2013 Step 4:\u201d (Edit)\"><em>NEXT: Angular From Scratch Tutorial \u2013 Step 4: Adding Bootstrap<\/em><\/a><\/p>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=6166\">PREVIOUS: Angular From Scratch Tutorial \u2013 Step 2: Components<\/a><\/p>\n<h2><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"Credits\"><\/span>Credits<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/angular.io\/guide\/architecture\">angular.io\/guide\/architecture<\/a><br>\n<a href=\"https:\/\/angular.io\/guide\/architecture-components\">angular.io\/guide\/architecture-components<\/a><br>\n<a href=\"https:\/\/angular.io\/tutorial\">angular.io\/tutorial<\/a><br>\n<a href=\"https:\/\/angular.io\/guide\/glossary#data-binding\">angular.io\/guide\/glossary#data-binding<\/a><br>\n<a href=\"https:\/\/angular.io\/guide\/interpolation\">angular.io\/guide\/interpolation<\/a><br>\n<a href=\"https:\/\/angular.io\/guide\/architecture-components\">angular.io\/guide\/architecture-components<\/a><br>\n<a href=\"https:\/\/www.telerik.com\/blogs\/understanding-angular-property-binding-and-interpolation\">www.telerik.com\/blogs\/understanding-angular-property-binding-and-interpolation<\/a><br>\n<a href=\"https:\/\/angular.io\/guide\/event-binding\">angular.io\/guide\/event-binding<\/a><br>\n<a href=\"https:\/\/angular.io\/api\/core\/Output\">angular.io\/api\/core\/Output<\/a><br>\n<a href=\"https:\/\/angular.io\/guide\/inputs-outputs\">angular.io\/guide\/inputs-outputs<\/a><br>\nChatGPT<\/p>\n<p>&nbsp;<\/p>\n<!--CusAds0-->\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Angular From Scratch Tutorial &#8211; Index PREVIOUS: Angular From Scratch Tutorial \u2013 Step 2: Components NEXT: Angular From Scratch Tutorial \u2013 Step 4: Adding Bootstrap &nbsp; TARGET The purpose of this page in this tutorial series is to provide a very fast approach that is useful for revisions when you have already dealt with Angular, &#8230; <a href=\"https:\/\/ultering.com\/it4us\/?p=6194\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> &#8220;Angular From Scratch Tutorial &#8211; Step 3: Binding&#8221;<\/span> &raquo;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[192,26],"tags":[],"class_list":["post-6194","post","type-post","status-publish","format-standard","hentry","category-angular","category-javascript"],"_links":{"self":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6194"}],"version-history":[{"count":6,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6194\/revisions"}],"predecessor-version":[{"id":7317,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6194\/revisions\/7317"}],"wp:attachment":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}