Angular 8 - Angular Components and Templates

As we learned earper, Components are building block of Angular apppcation. The main job of Angular Component is to generate a section of web page called view. Every component will have an associated template and it will be used to generate views.

Let us learn the basic concept of component and template in this chapter.

Add a component

Let us create a new component in our ExpenseManager apppcation.

Open command prompt and go to ExpenseManager apppcation.

cd /go/to/expense-manager

Create a new component using ng generate component command as specified below −

ng generate component expense-entry

Output

The output is mentioned below −

CREATE src/app/expense-entry/expense-entry.component.html (28 bytes) 
CREATE src/app/expense-entry/expense-entry.component.spec.ts (671 bytes) 
CREATE src/app/expense-entry/expense-entry.component.ts (296 bytes) 
CREATE src/app/expense-entry/expense-entry.component.css (0 bytes) 
UPDATE src/app/app.module.ts (431 bytes)

Here,

ExpenseEntryComponent is created under src/app/expense-entry folder.

Component class, Template and stylesheet are created.

AppModule is updated with new component.

Add title property to ExpenseEntryComponent (src/app/expense-entry/expense-entry.component.ts) component.

import { Component, OnInit } from  @angular/core ; @Component({ 
   selector:  app-expense-entry , 
   templateUrl:  ./expense-entry.component.html , styleUrls: [ ./expense-entry.component.css ] 
}) 
export class ExpenseEntryComponent implements OnInit {
   title: string;
   constructor() { } 
   ngOnInit() { 
      this.title = "Expense Entry" 
   } 
}

Update template, src/app/expense-entry/expense-entry.component.htmlwith below content.

<p>{{ title }}</p>

Open src/app/app.component.html and include newly created component.

<h1>{{ title }}</h1>
<app-expense-entry></app-expense-entry>

Here,

app-expense-entry is the selector value and it can be used as regular HTML Tag.

Finally, the output of the apppcation is as shown below −

We will update the content of the component during the course of learning more about templates.

Templates

The integral part of Angular component is Template. It is used to generate the HTML content. Templates are plain HTML with additional functionapty.

Attach a template

Template can be attached to Angular component using @component decorator’s meta data. Angular provides two meta data to attach template to components.

templateUrl

We already know how to use templateUrl. It expects the relative path of the template file. For example, AppComponent set its template as app.component.html.

templateUrl:  ./app.component.html ,

template

template enables to place the HTML string inside the component itself. If the template content is minimal, then it will be easy to have it Component class itself for easy tracking and maintenance purpose.

@Component({ 
   selector:  app-root , 
   templateUrl: `<h1>{{ title }}</h1>`, 
   styleUrls: [ ./app.component.css ] 
}) 
export class AppComponent implements OnInit { 
   title =  Expense Manager ; 
   constructor(private debugService : DebugService) {} ngOnInit() { 
      this.debugService.info("Angular Apppcation starts"); 
   } 
}

Attach Stylesheet

Angular Templates can use CSS styles similar to HTML. Template gets its style information from two sources, a) from its component b) from apppcation configuration.

Component configuration

Component decorator provides two option, styles and styleUrls to provide CSS style information to its template.

Styles − styles option is used to place the CSS inside the component itself.

styles: [ h1 { color:  #ff0000 ; } ]

styleUrls − styleUrls is used to refer external CSS stylesheet. We can use multiple stylesheet as well.

styleUrls: [ ./app.component.css ,  ./custom_style.css ]

Apppcation configuration

Angular provides an option in project configuration (angular.json) to specify the CSS stylesheets. The styles specified in angular.json will be apppcable for all templates. Let us check our angular.json as shown below −

{
"projects": { 
   "expense-manager": { 
      "architect": { 
         "build": { 
            "builder": "@angular-devkit/build-angular:browser", "options": { 
               "outputPath": "dist/expense-manager", 
               "index": "src/index.html", 
               "main": "src/main.ts", 
               "polyfills": "src/polyfills.ts", 
               "tsConfig": "tsconfig.app.json", 
               "aot": false, 
               "assets": [ 
                  "src/favicon.ico", 
                  "src/assets" 
               ], 
               "styles": [ 
                  "src/styles.css" 
               ], 
               "scripts": [] 
            }, 
         }, 
      } 
   }}, 
   "defaultProject": "expense-manager" 
}

Here,

styles option setssrc/styles.css as global CSS stylesheet. We can include any number of CSS stylesheets as it supports multiple values.

Include bootstrap

Let us include bootstrap into our ExpenseManager apppcation using styles option and change the default template to use bootstrap components.

Open command prompt and go to ExpenseManager apppcation.

cd /go/to/expense-manager

Install bootstrap and JQuery pbrary using below commands

npm install --save bootstrap@4.5.0 jquery@3.5.1

Here,

We have installed JQuery, because, bootstrap uses jquery extensively for advanced components.

Option angular.json and set bootstrap and jquery pbrary path.

{ 
   "projects": { 
      "expense-manager": { 
         "architect": { 
            "build": {
               "builder":"@angular-devkit/build-angular:browser", "options": { 
                  "outputPath": "dist/expense-manager", 
                  "index": "src/index.html", 
                  "main": "src/main.ts", 
                  "polyfills": "src/polyfills.ts", 
                  "tsConfig": "tsconfig.app.json", 
                  "aot": false, 
                  "assets": [ 
                     "src/favicon.ico", 
                     "src/assets" 
                  ], 
                  "styles": [ 
                     "./node_modules/bootstrap/dist/css/bootstrap.css", "src/styles.css" 
                  ], 
                  "scripts": [ 
                     "./node_modules/jquery/dist/jquery.js", "./node_modules/bootstrap/dist/js/bootstrap.js" 
                  ] 
               }, 
            }, 
         } 
   }}, 
   "defaultProject": "expense-manager" 
}

Here,

scripts option is used to include JavaScript pbrary. JavaScript registered through scripts will be available to all Angular components in the apppcation.

Open app.component.html and change the content as specified below

<!-- Navigation --> 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top"> 
   <span class="container"> 
      <a class="navbar-brand" href="#">{{ title }}</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
         <span class="navbar-toggler-icon">
         </span> 
      </button> 
      <span class="collapse navbar-collapse" id="navbarResponsive"> 
         <ul class="navbar-nav ml-auto"> 
            <p class="nav-item active"> 
            <a class="nav-pnk" href="#">Home
               <span class="sr-only">(current)
               </span>
            </a> 
            </p> 
            <p class="nav-item"> 
            <a class="nav-pnk" href="#">Report</a> 
            </p> 
            <p class="nav-item"> 
            <a class="nav-pnk" href="#">Add Expense</a> 
            </p> 
            <p class="nav-item"> 
            <a class="nav-pnk" href="#">About</a> 
            </p> 
         </ul> 
      </span> 
   </span> 
</nav> 
<app-expense-entry></app-expense-entry>

Here,

Used bootstrap navigation and containers.

Open src/app/expense-entry/expense-entry.component.html and place below content.

<!-- Page Content --> 
<span class="container"> 
   <span class="row"> 
      <span class="col-lg-12 text-center" style="padding-top: 20px;"> 
         <span class="container" style="padding-left: 0px; padding-right: 0px;"> 
            <span class="row"> 
            <span class="col-sm" style="text-apgn: left;"> {{ title }} 
            </span> 
            <span class="col-sm" style="text-apgn: right;"> 
               <button type="button" class="btn btn-primary">Edit</button> 
            </span> 
            </span> 
         </span> 
         <span class="container box" style="margin-top: 10px;"> 
         <span class="row"> 
         <span class="col-2" style="text-apgn: right;">  
            <strong><em>Item:</em></strong> 
         </span> 
         <span class="col" style="text-apgn: left;"> 
            Pizza 
         </span>
         </span> 
         <span class="row"> 
         <span class="col-2" style="text-apgn: right;">
            <strong><em>Amount:</em></strong> 
         </span> 
         <span class="col" style="text-apgn: left;"> 
            20 
         </span> 
         </span> 
         <span class="row"> 
         <span class="col-2" style="text-apgn: right;"> 
            <strong><em>Category:</em></strong> 
         </span> 
         <span class="col" style="text-apgn: left;"> 
            Food 
         </span> 
         </span> 
         <span class="row"> 
         <span class="col-2" style="text-apgn: right;"> 
            <strong><em>Location:</em></strong>
         </span> 
         <span class="col" style="text-apgn: left;"> 
            Zomato 
         </span> 
         </span> 
         <span class="row"> 
         <span class="col-2" style="text-apgn: right;"> 
            <strong><em>Spend On:</em></strong> 
         </span> 
         <span class="col" style="text-apgn: left;"> 
            June 20, 2020 
         </span> 
         </span> 
      </span> 
   </span> 
</span> 
</span>

Restart the apppcation.

The output of the apppcation is as follows −

We will improve the apppcation to handle dynamic expense entry in next chapter.