{"id":4284,"date":"2020-09-03T13:53:22","date_gmt":"2020-09-03T14:23:22","guid":{"rendered":"https:\/\/ultering.com\/it4us\/?p=4284"},"modified":"2023-07-06T15:24:52","modified_gmt":"2023-07-06T15:54:52","slug":"angular-angular-10-bootstrap-modules-and-view-setup","status":"publish","type":"post","link":"https:\/\/ultering.com\/it4us\/?p=4284","title":{"rendered":"ANGULAR 10: Step Two &#8211; Angular 10\/Bootstrap Modules and View Setup"},"content":{"rendered":"<p><a href=\"https:\/\/ultering.com\/it4us\/?p=4244\"><span style=\"font-size: 14pt;\">Back to index&nbsp;<\/span><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">&lt;<a href=\"https:\/\/ultering.com\/it4us\/?p=4252\">Previous <\/a>&nbsp;&nbsp;<a href=\"https:\/\/ultering.com\/it4us\/?p=4336\">Next &gt;<\/a><\/span><\/p>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=4294\">Code download<\/a><\/p>\n<h1><\/h1>\n<p><strong><span style=\"font-size: 16pt;\">IMPORTANT NOTE<br>\n<\/span><\/strong><\/p>\n<p><span style=\"font-size: 14pt;\">The procedures described here details how the application was created.<\/span><br>\n<span style=\"font-size: 14pt;\">Follow them if you have created your application from scratch, otherwise it is not necessary since it is already done.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">In both cases, the procedures are useful to understand the details.<\/span><\/p>\n<p>&nbsp;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 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-6a1c11c6a7e9b\" 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-6a1c11c6a7e9b\" 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=4284\/#DOWNLOAD\">#DOWNLOAD<\/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=4284\/#CREATING_MODULE\">#CREATING MODULE<\/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=4284\/#CREATING_THE_ANGULAR_COMPONENTS\">#CREATING THE ANGULAR COMPONENTS<\/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=4284\/#ROUTING\">#ROUTING<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ultering.com\/it4us\/?p=4284\/#VIEW_ADJUSTMENTS\">#VIEW ADJUSTMENTS<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ultering.com\/it4us\/?p=4284\/#HOW_DOES_IT_WORK\">#HOW DOES IT WORK?<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ultering.com\/it4us\/?p=4284\/#IMPLEMENTING_NAVBAR_BOOTSTRAP_COMPONENT\">#IMPLEMENTING NAVBAR BOOTSTRAP COMPONENT<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ultering.com\/it4us\/?p=4284\/#REGISTERING_THE_COMPONENT\">#REGISTERING THE COMPONENT<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ultering.com\/it4us\/?p=4284\/#Navbar_closed\">#Navbar closed<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ultering.com\/it4us\/?p=4284\/#Navbar_Opened\">#Navbar Opened<\/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=4284\/#IMPLEMENTING_STEP_TWO_PAGE\">#IMPLEMENTING STEP TWO PAGE<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/ultering.com\/it4us\/?p=4284\/#PAGE_DEFAULT_CONTENT\">#PAGE DEFAULT CONTENT<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/ultering.com\/it4us\/?p=4284\/#IMPLEMENTING_STEPTWO_PAGE_CONTENT_USING_BOOTSTRAP\">#IMPLEMENTING STEPTWO PAGE CONTENT USING BOOTSTRAP<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"DOWNLOAD\"><\/span>#DOWNLOAD<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 14pt;\">Download the project at <a href=\"https:\/\/github.com\/alsdias\/it4us_angular_10_bootstrap.git\">Github<\/a> from &#8220;<em>features\/step02<\/em>&#8221; branch.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"CREATING_MODULE\"><\/span>#CREATING MODULE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 14pt;\">&#8211; Create the module for the 1st step denoted by stepone:<\/span><br>\n<span style=\"font-size: 14pt;\"><em>ng g module steptwo<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"CREATING_THE_ANGULAR_COMPONENTS\"><\/span>#CREATING THE ANGULAR COMPONENTS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 14pt;\">ng g c home<\/span><br>\n<span style=\"font-size: 14pt;\">ng g c <em>steptwo<\/em>\/<em>steptwo<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; register into app.module.ts:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 14pt;\">import { SteptwoModule } from &#8216;.\/<em>steptwo<\/em>\/<em>steptwo<\/em>.module&#8217;;<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">imports: [<\/span><br>\n<span style=\"font-size: 14pt;\">&#8230;<\/span><br>\n<span style=\"font-size: 14pt;\">SteptwoModule,<\/span><br>\n<span style=\"font-size: 14pt;\">&#8230;<\/span><br>\n<span style=\"font-size: 14pt;\">]<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"ROUTING\"><\/span>#ROUTING<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 14pt;\">Edit app-routing.module.ts.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Add as follows:<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre class><span style=\"font-size: 14pt;\">import { SteptwoModule } from '.\/<em>steptwo<\/em>\/<em>steptwo<\/em>.module';\n\nconst routes: Routes = [\n  {path: '', component: HomeComponent, pathMatch: 'full'},\n  {path: 'steptwo', component: SteptwoComponent},\n  {path: '**', component: HomeComponent}\n];\n\n@NgModule({\n  imports: [\n    RouterModule.forRoot(routes),\n    SteponeModule,\n  ],\n  exports: [RouterModule]\n})\n\n<\/span><\/pre>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"VIEW_ADJUSTMENTS\"><\/span>#VIEW ADJUSTMENTS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 14pt;\">Copy the index.html file to your project.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Edit <em>app-component.html<\/em> and replace all the content with just this:<\/span><\/p>\n<div>\n<div><span style=\"font-size: 14pt;\">&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/span><\/div>\n<\/div>\n<div><\/div>\n<div>\n<h3><span class=\"ez-toc-section\" id=\"HOW_DOES_IT_WORK\"><\/span>#HOW DOES IT WORK?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<\/div>\n<div><\/div>\n<div><span style=\"font-size: 14pt;\">The application uses the index.html file as starting point \u2014 the default configuration.<br>\n<\/span><span style=\"font-size: 14pt;\">When pointed to localhost:4200 (or another port), the routing service will redirect to the default address using the router&#8217;s empty declaration that points to HomeComponent.<\/span><\/div>\n<div><span style=\"font-size: 14pt;\"><span style=\"font-size: 14pt;\"><br>\nThis is configured in the app-routing.module.ts file at:<br>\n<\/span><\/span>\n<pre class>const routes: Routes = [\n  {path: '', component: HomeComponent, pathMatch: 'full'}, \/\/ <span style=\"font-size: 14pt;\">router's empty declaration<\/span>\n   \/\/ ...\n  {path: '**', component: HomeComponent}  \/\/ <span style=\"font-size: 14pt;\">router's any other declaration<\/span>\n];\n<\/pre>\n<\/div>\n<div><\/div>\n<div><span style=\"font-size: 14pt;\">Important to highlight that the declaration order of <em>path<\/em> is important since it is read in sequence.<\/span><\/div>\n<div><span style=\"font-size: 14pt;\">All other path declarations go between replacing the ellipsis comment.<\/span><\/div>\n<div><\/div>\n<div><span style=\"font-size: 14pt;\">The HTML&#8217;s file of HomeComponent contains the initial page shown by the application, generating t<\/span><span style=\"font-size: 14pt;\">he output that it is returned by router&#8217;s sevice that renders this content replacing the <em>&lt;router-outlet&gt;&lt;\/router-outlet&gt; <\/em>elements in <em>app.component.html, <\/em>and by its turn returns the content that replaces <\/span><span style=\"font-size: 14pt;\"><em>&lt;app-root&gt;&lt;\/app-root&gt;<\/em> element in the index.html file.<\/span><\/div>\n<div><span style=\"font-size: 14pt;\"><br>\nThat way, the index.html file contains the common features shared with all the application&#8217;s pages.<br>\nSimilarly, the app.component.html file also shares<em>, <\/em>but unlike index.html, the app.component.html may add extra processing resources using its app.component.ts file.<\/span><\/div>\n<div>\n<div><\/div>\n<\/div>\n<div><span style=\"font-size: 14pt;\">When the user clicks a card defined in home.component.html, the routing cycle will be repeated using the chosen path.<\/span><\/div>\n<div><span style=\"font-size: 14pt;\">Each path maps to its respective module.<\/span><\/div>\n<div><\/div>\n<h2><span class=\"ez-toc-section\" id=\"IMPLEMENTING_NAVBAR_BOOTSTRAP_COMPONENT\"><\/span>#IMPLEMENTING NAVBAR BOOTSTRAP COMPONENT<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 14pt;\">The home.component.html requires a navbar.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Unfortunately, it is not possible to use Bootstrap&#8217;s dynamic features, like opening and closing events, straight from its library.<br>\nThe first issue that you notice is that navbar fails.<br>\nDynamic features requires Ng-bootstrap behind the scene that it is used to implement a dynamic bootstrap component in the Angular world.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Run the commands to create a component module and its component:<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><em>ng g module components<\/em><\/span><\/p>\n<p><em><span style=\"font-size: 14pt;\">ng g c components\/navbar<\/span><\/em><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 14pt;\">Replace the component module created above replacing it with the respective code from <a href=\"https:\/\/github.com\/alsdias\/it4us_angular_10_bootstrap.git\">Github<\/a> from &#8220;<em>features\/step02<\/em>&#8221; branch.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Why is the component replaced and not just copied?<\/span><\/strong><\/p>\n<p><span style=\"font-size: 14pt;\">We need to run the commands to create it because of the additional registering actions performed during this operation, then we may replace contents.<\/span><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"REGISTERING_THE_COMPONENT\"><\/span>#REGISTERING THE COMPONENT<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div>\n<div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 14pt;\">Edit <em>app.module.ts<\/em> and register the module and the component.<br>\nA module is imported and a component decrared.<\/span><\/p>\n<div>\n<div><\/div>\n<div><span style=\"color: #808000;\">import&nbsp;{&nbsp;ComponentsModule&nbsp;}&nbsp;from&nbsp;&#8216;.\/components\/components.module&#8217;;<\/span><\/div>\n<\/div>\n<pre class>@NgModule({\n  declarations: [\n    AppComponent,\n    HomeComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    NgbModule,\n    SteptwoModule,\n    <span style=\"color: #808000;\"><strong>ComponentsModule<\/strong><\/span>\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\n\n<\/pre>\n<p><span style=\"font-size: 14pt;\">If the component module is not registered, the selector element is not recognized generating error message.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 14pt;\">Now edit <em>app.component.html<\/em> and add the navbar selector:<\/span><\/p>\n<\/div>\n<div><span style=\"color: #808000;\">&lt;app-navbar&gt;&lt;\/app-navbar&gt;<\/span><\/div>\n<div>&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/div>\n<\/div>\n<p><span style=\"font-size: 14pt;\">Remember that everything added to app.component.html will be shared with all pages.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Navbar_closed\"><\/span>#Navbar closed<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-4368\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_closed.jpg\" alt width=\"1000\" height=\"492\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_closed.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_closed-300x148.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_closed-768x378.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-4368 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20492%22%3E%3C%2Fsvg%3E\" alt width=\"1000\" height=\"492\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20492%22%3E%3C%2Fsvg%3E 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_closed.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_closed-300x148.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_closed-768x378.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_closed.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Navbar_Opened\"><\/span>#Navbar Opened<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-4369\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_opened.jpg\" alt width=\"1000\" height=\"487\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_opened.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_opened-300x146.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_opened-768x374.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-4369 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20487%22%3E%3C%2Fsvg%3E\" alt width=\"1000\" height=\"487\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20487%22%3E%3C%2Fsvg%3E 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_opened.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_opened-300x146.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_opened-768x374.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_initial_page_navbar_opened.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h4><\/h4>\n<h2><span class=\"ez-toc-section\" id=\"IMPLEMENTING_STEP_TWO_PAGE\"><\/span>#IMPLEMENTING STEP TWO PAGE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"PAGE_DEFAULT_CONTENT\"><\/span>#PAGE DEFAULT CONTENT<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-size: 14pt;\">When a component is created, by default you get a &#8220;component works&#8221; text like shown below.<\/span><\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-4371\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_page_initial.jpg\" alt width=\"1000\" height=\"497\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_page_initial.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_page_initial-300x149.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_page_initial-768x382.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-4371 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20497%22%3E%3C%2Fsvg%3E\" alt width=\"1000\" height=\"497\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20497%22%3E%3C%2Fsvg%3E 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_page_initial.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_page_initial-300x149.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_page_initial-768x382.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_steptwo_page_initial.jpg\"><\/p>\n<h3><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"IMPLEMENTING_STEPTWO_PAGE_CONTENT_USING_BOOTSTRAP\"><\/span>#IMPLEMENTING STEPTWO PAGE CONTENT USING BOOTSTRAP<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 14pt;\">Now, the easiest part.<br>\n<\/span><span style=\"font-size: 14pt;\">To add Bootstrap code is a very simple operation.<br>\nIn this page, it was used the <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/examples\/jumbotron\/\">Jumbotron<\/a> example from <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/examples\/\">Boostrap site<\/a>.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">The trick is that you copy just part of the code, since the basic structure is already defined by index.html, app.component.html, etc.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Open the <em>steptwo.component.html<\/em>&nbsp; at <a href=\"https:\/\/github.com\/alsdias\/it4us_angular_10_bootstrap.git\">Github<\/a> from &#8220;<em>features\/step02<\/em>&#8221; branch and copy its content to past to your project&#8217;s page.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Notice that it was used just the new code to be used in the page, discarding the scaffolding code.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">This is really good because templates reduce maintenance.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">This is the page you get from the tutorial.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-4376\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_angular10bts_steptwo_page.jpg\" alt width=\"1000\" height=\"466\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_angular10bts_steptwo_page.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_angular10bts_steptwo_page-300x140.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_angular10bts_steptwo_page-768x358.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-4376 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20466%22%3E%3C%2Fsvg%3E\" alt width=\"1000\" height=\"466\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20466%22%3E%3C%2Fsvg%3E 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_angular10bts_steptwo_page.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_angular10bts_steptwo_page-300x140.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_angular10bts_steptwo_page-768x358.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/it4us_angular10bts_steptwo_page.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=4244\"><span style=\"font-size: 14pt;\">Back to index&nbsp;<\/span><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">&lt;<a href=\"https:\/\/ultering.com\/it4us\/?p=4252\">Previous <\/a>&nbsp;&nbsp;<a href=\"https:\/\/ultering.com\/it4us\/?p=4336\">Next &gt;<\/a><\/span><\/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>Back to index&nbsp; &lt;Previous &nbsp;&nbsp;Next &gt; Code download IMPORTANT NOTE The procedures described here details how the application was created. Follow them if you have created your application from scratch, otherwise it is not necessary since it is already done. In both cases, the procedures are useful to understand the details. &nbsp; #DOWNLOAD Download the &#8230; <a href=\"https:\/\/ultering.com\/it4us\/?p=4284\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> &#8220;ANGULAR 10: Step Two &#8211; Angular 10\/Bootstrap Modules and View Setup&#8221;<\/span> &raquo;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","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,193,26],"tags":[],"class_list":["post-4284","post","type-post","status-publish","format-standard","hentry","category-angular","category-bootstrap","category-javascript"],"_links":{"self":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/4284","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=4284"}],"version-history":[{"count":6,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/4284\/revisions"}],"predecessor-version":[{"id":4525,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/4284\/revisions\/4525"}],"wp:attachment":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}