{"id":6166,"date":"2021-03-06T00:50:03","date_gmt":"2021-03-06T01:20:03","guid":{"rendered":"https:\/\/ultering.com\/it4us\/?p=6166"},"modified":"2025-05-05T15:13:38","modified_gmt":"2025-05-05T15:43:38","slug":"angular-from-scratch-tutorial-step-2-compoments","status":"publish","type":"post","link":"https:\/\/ultering.com\/it4us\/?p=6166","title":{"rendered":"Angular From Scratch Tutorial &#8211; Step 2: Components"},"content":{"rendered":"<p><a href=\"https:\/\/ultering.com\/it4us\/?p=7175\">Angular From Scratch Tutorial &#8211; Index<\/a><br>\n<a href=\"https:\/\/ultering.com\/it4us\/?p=6152\">PREVIUS: STEP ONE<\/a><br>\n<a href=\"https:\/\/ultering.com\/it4us\/?p=6194\">NEXT: Angular From Scratch Tutorial &#8211; Step 3: Binding<\/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-69f5586e7215b\" 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-69f5586e7215b\" 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=6166\/#Note\" title=\"Note\">Note<\/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=6166\/#Target\" 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-3\" href=\"https:\/\/ultering.com\/it4us\/?p=6166\/#Source_CodeDownload\" title=\"Source Code\/Download\">Source Code\/Download<\/a><\/li><\/ul><\/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=6166\/#What_is_a_Compoment\" title=\"What is a Compoment\">What is a Compoment<\/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=6166\/#Commands_to_create_component\" title=\"Commands to create component\">Commands to create component<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ultering.com\/it4us\/?p=6166\/#Creating_the_%E2%80%9Coriginal-init-page%E2%80%9D_component\" title=\"Creating the&nbsp;&#8220;original-init-page&#8221;&nbsp;component&nbsp;\">Creating the&nbsp;&#8220;original-init-page&#8221;&nbsp;component&nbsp;<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ultering.com\/it4us\/?p=6166\/#Routing_%E2%80%93_URL_setup\" title=\"Routing &#8211; URL setup\">Routing &#8211; URL setup<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ultering.com\/it4us\/?p=6166\/#Testing\" title=\"Testing\">Testing<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ultering.com\/it4us\/?p=6166\/#Moving_the_content_from_the_indexhtml_page_to_the_new_component\" title=\"Moving the content from the index.html page to the new component\">Moving the content from the index.html page to the new component<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ultering.com\/it4us\/?p=6166\/#Testing_again\" title=\"Testing again\">Testing again<\/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-11\" href=\"https:\/\/ultering.com\/it4us\/?p=6166\/#NEXT\" title=\"NEXT\">NEXT<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Note\"><\/span>Note<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=\"Target\"><\/span>Target<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Creating a new component, to where the current initial page content will be moved to.<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<h2><span class=\"ez-toc-section\" id=\"What_is_a_Compoment\"><\/span>What is a Compoment<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Using a simple way of defining things, we may see a component as a chunk of script belonging to its respective HTML.<br>\nI like to think about Angular as a segmented tool to bind HTML (the template) and its scripting code (the component) putting them together under the same folder, instead of having everything together and a huge code to dig in, up and down.<\/p>\n<p>Each part takes care of a specific feature, split into HTML and its script code, making things easier.<\/p>\n<p>The HTML code is called &#8220;template&#8221;.<br>\nThe script part is the &#8220;component&#8221;.<br>\nBetween, there is the interaction provided by &#8220;bindings&#8221;.<\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-24128\" src=\"https:\/\/ultering.com\/itstuff\/wp-content\/uploads\/2021\/03\/angular_data_biding_summary-02.jpg\" alt width=\"358\" height=\"219\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-24128 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20358%20219%22%3E%3C%2Fsvg%3E\" alt width=\"358\" height=\"219\" data-src=\"https:\/\/ultering.com\/itstuff\/wp-content\/uploads\/2021\/03\/angular_data_biding_summary-02.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>Excellent more detailed information at <a href=\"https:\/\/angular.io\/guide\/architecture-components\">Angular&#8217;s documentation<\/a>.<\/p>\n<h2><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Commands_to_create_component\"><\/span><strong>Commands to create component<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>ng generate component new-cmp<br>\nor<br>\nng g component new-cmp<br>\n<em>or ng g c new-cmd<\/em><\/p>\n<h2><\/h2>\n<h2 class=\"md-end-block md-heading\"><span class=\"md-plain md-expand\">Creating the&nbsp;<\/span><span class=\"md-plain md-expand\">&#8220;<\/span>original-init-page&#8221;&nbsp;<span class=\"md-plain md-expand\">component&nbsp;<\/span><\/h2>\n<p>The purpose of a component is perfect to our purposes of&nbsp; moving the content of the initial page to another place to be referenced by a specific URL.<\/p>\n<p>Do:<\/p>\n<p><em>ng g c original-init-page<\/em><\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6180\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page.jpg\" alt width=\"926\" height=\"128\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page.jpg 926w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page-300x41.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page-768x106.jpg 768w\" sizes=\"(max-width: 926px) 100vw, 926px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6180 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20926%20128%22%3E%3C%2Fsvg%3E\" alt width=\"926\" height=\"128\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20926%20128%22%3E%3C%2Fsvg%3E 926w\" sizes=\"(max-width: 926px) 100vw, 926px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page.jpg 926w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page-300x41.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page-768x106.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6181\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_02.jpg\" alt width=\"332\" height=\"450\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_02.jpg 332w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_02-221x300.jpg 221w\" sizes=\"(max-width: 332px) 100vw, 332px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6181 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20332%20450%22%3E%3C%2Fsvg%3E\" alt width=\"332\" height=\"450\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20332%20450%22%3E%3C%2Fsvg%3E 332w\" sizes=\"(max-width: 332px) 100vw, 332px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_02.jpg 332w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_02-221x300.jpg 221w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_02.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6182\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_03.jpg\" alt width=\"837\" height=\"204\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_03.jpg 837w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_03-300x73.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_03-768x187.jpg 768w\" sizes=\"(max-width: 837px) 100vw, 837px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6182 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20837%20204%22%3E%3C%2Fsvg%3E\" alt width=\"837\" height=\"204\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20837%20204%22%3E%3C%2Fsvg%3E 837w\" sizes=\"(max-width: 837px) 100vw, 837px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_03.jpg 837w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_03-300x73.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_03-768x187.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_03.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Routing_%E2%80%93_URL_setup\"><\/span>Routing &#8211; URL setup<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Target: we desire to access the content of the component.<br>\nSolution: we need to provide routing.<\/p>\n<p>Change the app.app-routing.module.ts file to be like this:<\/p>\n<pre class>import { NgModule } from '@angular\/core';\nimport { Routes, RouterModule } from '@angular\/router';\n\nimport { OriginalInitPageComponent } from '.\/original-init-page\/original-init-page.component';\n\nconst routes: Routes = [\n  {path: '',   redirectTo: 'index',  pathMatch: 'full'},\n  {path: 'ori-init-page', component: OriginalInitPageComponent }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n\n<\/pre>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6183\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage.jpg\" alt width=\"823\" height=\"341\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage.jpg 823w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage-300x124.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage-768x318.jpg 768w\" sizes=\"(max-width: 823px) 100vw, 823px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6183 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20823%20341%22%3E%3C%2Fsvg%3E\" alt width=\"823\" height=\"341\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20823%20341%22%3E%3C%2Fsvg%3E 823w\" sizes=\"(max-width: 823px) 100vw, 823px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage.jpg 823w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage-300x124.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage-768x318.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage.jpg\"><\/p>\n<div>\n<pre class>First you import the new component:<\/pre>\n<div>\n<div><em>import&nbsp;{&nbsp;OriginalInitPageComponent&nbsp;}&nbsp;from&nbsp;&#8216;.\/original-init-page\/original-init-page.component&#8217;;<\/em><\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<div>After, it is created the default page routing:<\/div>\n<div>\n<div>\n<div><em>{path:&nbsp;&#8221;,&nbsp;&nbsp;&nbsp;redirectTo:&nbsp;&#8216;index&#8217;,&nbsp;&nbsp;pathMatch:&nbsp;&#8216;full&#8217;},<\/em><\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<div>Then, the new component routing:<\/div>\n<div>\n<div>\n<div><em>{path:&nbsp;&#8216;ori-init-page&#8217;,&nbsp;component:&nbsp;OriginalInitPageComponent&nbsp;}<\/em><\/div>\n<\/div>\n<\/div>\n<div>\n<h4><span class=\"ez-toc-section\" id=\"Testing\"><\/span>Testing<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Pointing to:<br>\nhttp:\/\/localhost:4200\/<\/p>\n<p>shall return the same thing, but pointing to:<br>\nhttp:\/\/localhost:4200\/ori-init-page<\/p>\n<p>returns the new component&#8217;s template content, appending to the button of the initial&#8217;s page content:<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6184\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage_02.jpg\" alt width=\"1000\" height=\"575\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage_02.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage_02-300x173.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage_02-768x442.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6184 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20575%22%3E%3C%2Fsvg%3E\" alt width=\"1000\" height=\"575\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20575%22%3E%3C%2Fsvg%3E 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage_02.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage_02-300x173.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage_02-768x442.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_app-routing.modules-oriinitpage_02.jpg\"><\/p>\n<\/div>\n<h4><\/h4>\n<h4><\/h4>\n<h3><span class=\"ez-toc-section\" id=\"Moving_the_content_from_the_indexhtml_page_to_the_new_component\"><\/span>Moving the content from the index.html page to the new component<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Go to the <strong>app.component.html <\/strong>and cut all the content <strong><span style=\"text-decoration: underline;\">except this last line<\/span><\/strong>:<\/p>\n<div>\n<div>&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/div>\n<\/div>\n<div><\/div>\n<div>and replaces the <strong>original-init-page.component.html<\/strong> content.<\/div>\n<div><\/div>\n<div>The remaining content of app.component.html comes to this:<\/div>\n<div><\/div>\n<div><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6188\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_04.jpg\" alt width=\"626\" height=\"116\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_04.jpg 626w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_04-300x56.jpg 300w\" sizes=\"(max-width: 626px) 100vw, 626px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6188 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20626%20116%22%3E%3C%2Fsvg%3E\" alt width=\"626\" height=\"116\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20626%20116%22%3E%3C%2Fsvg%3E 626w\" sizes=\"(max-width: 626px) 100vw, 626px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_04.jpg 626w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_04-300x56.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_04.jpg\"><\/div>\n<div><\/div>\n<div>\n<p>containing just:<\/p>\n<div>\n<div>&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<div>And the <strong>original-init-page.component.html <\/strong>page contains everything except the &#8220;router-outlet&#8221; markup.<br>\nThis markup is a placeholder that marks where the router will render its output filtered by the Routes that were configured above.<\/div>\n<div>Now, copy the &#8220;title&#8221; from <em>app.components.ts<\/em> to <em>original-init-page.component.ts<\/em>.<br>\nCheck the images below:<\/div>\n<div>app.components.ts<\/div>\n<div><\/div>\n<div><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6189\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_05-1.jpg\" alt width=\"409\" height=\"269\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_05-1.jpg 409w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_05-1-300x197.jpg 300w\" sizes=\"(max-width: 409px) 100vw, 409px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6189 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20409%20269%22%3E%3C%2Fsvg%3E\" alt width=\"409\" height=\"269\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20409%20269%22%3E%3C%2Fsvg%3E 409w\" sizes=\"(max-width: 409px) 100vw, 409px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_05-1.jpg 409w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_05-1-300x197.jpg 300w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_05-1.jpg\"><\/div>\n<p>original-init-page.components.ts<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6187\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_06.jpg\" alt width=\"800\" height=\"301\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_06.jpg 800w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_06-300x113.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_06-768x289.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6187 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20301%22%3E%3C%2Fsvg%3E\" alt width=\"800\" height=\"301\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20301%22%3E%3C%2Fsvg%3E 800w\" sizes=\"(max-width: 800px) 100vw, 800px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_06.jpg 800w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_06-300x113.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_06-768x289.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_06.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Testing_again\"><\/span>Testing again<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Pointing to:<br>\nhttp:\/\/localhost:4200\/<\/p>\n<p>you shall get a blank page, without content, but&nbsp;pointing to:<br>\nhttp:\/\/localhost:4200\/ori-init-page<\/p>\n<p>it is returned the original page initial content.<\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6192\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_07.jpg\" alt width=\"1000\" height=\"452\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_07.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_07-300x136.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_07-768x347.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6192 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20452%22%3E%3C%2Fsvg%3E\" alt width=\"1000\" height=\"452\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20452%22%3E%3C%2Fsvg%3E 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_07.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_07-300x136.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_07-768x347.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2021\/03\/afstutorial_create_original-init-page_07.jpg\"><\/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 href=\"https:\/\/ultering.com\/it4us\/?p=6194\">Angular From Scratch Tutorial &#8211; Step 3: Binding<\/a><\/p>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=6152\">PREVIUS: STEP ONE<\/a><\/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 PREVIUS: STEP ONE NEXT: Angular From Scratch Tutorial &#8211; Step 3: Binding &nbsp; Note 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, &#8230; <a href=\"https:\/\/ultering.com\/it4us\/?p=6166\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> &#8220;Angular From Scratch Tutorial &#8211; Step 2: Components&#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-6166","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\/6166","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=6166"}],"version-history":[{"count":6,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6166\/revisions"}],"predecessor-version":[{"id":7314,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6166\/revisions\/7314"}],"wp:attachment":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}