Learning Angular - Components Anatomy

I continue my Angular journey and break down the components.ts file, an essential building block of Angular.

I will go over the anatomy of this file, reviewing the standard generated file, section by section and how they work.

You should have an understanding of what an Angular component file layout is, the essential parts, and allowed values for those parts.

This article will take you less than six minutes to read.

source and more information

Introduction

From learning how Angular boots up, I start seeing what is going on.

Components are important to Angular as every new Angular application created inserts a component: app-root in the index.html file with corresponding set of app.component.* files.

Let’s look at these sets of files:

• app.component.ts
• app.component.html
• app.component.css

Following Along

I am only using a blank application generated using: ng new test6.

If you want to follow along, do the following steps with Angular installed at the command prompt, run: ng new test6

app.component.ts

This is the contents of the app.component.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test';
}

This a typical Components TypeScript file, it has these sections:

• imports
• declarations
  • selector
  • template
  • style
• class

I will go over each in detail.

Imports

Each component.ts starts with an import section, specifically:

import { Component } from '@angular/core';

This imports the Component definition from Angular’s core library. The next section, the declarations, needs it to define how to connect to:

• selector - which element to connect the component to in the template
• template - what is the HTML layout
• style - what is the CSS definitions

Without this section, the @Component section would throw an error as JavaScript/TypeScript won’t be able to find the definition.

Declaration

Each component needs a @Component declaration, in our case:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

This configures how Angular should use the component in the application:

• selector - tells Angular what this component which element to bind to
• templateUrl - which HTML file to use
• styleUrls - which CSS files to use for the styles

Selector

The selector tells Angular where this component should appear in the component parent’s template.

In the generated file, the declaration has:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

This configures the selector to replace element app-root in the component’s parent with the component’s details.

This can be any CSS selector:

• element - app-root would replace: <app-root></app-root>
• attribute - [app-component] would replace: <div app-root></div>
• class - .app-root would replace: <div class="app-root"></div>

Class

The class part of the file is the section where your code will go into. In the file generated, the contents are:

export class AppComponent {
  title = 'test6';
}

This is where new code will go. The sample code automatically creates a variable and assigns the name of the project to it: title.

The sample app uses the title variable in the app.component.html file.

component.html file

The src/app/app.component.html file generated has the following content:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

The important section from the generated file is:

  <h1>
    Welcome to {{ title }}!
  </h1>

The value {{ title }} is from the AppComponent class defined in the src/app/app.component.ts file.

Defining Templates

A template is basically the HTML skeleton a component describes itself with. It’s the glue between the JavaScript/TypeScript and CSS. It gives a foundation for these two to work together through elements, classes, and attributes.

There are two ways to define to Angular which template to use, either a file or inline HTML.

Separate file

The generated app uses the following format to define templates:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

The line: templateUrl configures the component to use the HTML defined in another file, in this case, in the same directory and file named: app.component.html.

Inline

Angular has a configuration where the definition of the HTML is inline the same component file. To have basic text, this would be the configuration:

@Component({
  selector: 'app-root',
  template: `<p> App title: {{ title }} </p>`,
  styleUrls: ['./app.component.css']
})

The definition is template and the templateUrl is not set anymore. This is handy for components where HTML is scant.

Defining Styles

A style gives more precision in how a page will look in HTML. Styles give components more pizzaz than with just plain HTML.

Similar to template and templateUrls, style definition can be in a separate file or inline the same file.

Separate File

The default for a newly generated Angular app is to have styles defined in a separate file. The configuration is:

@Component({
  selector: 'app-root',
  templateUrls: './app.component.html',
  styleUrls: ['./app.component.css']
})

The line: styleUrls configures the component to use the styles defined in separate files, in this case, in the same directory and file named: app.component.css.

As this is an array element, multiple CSS files are available for the component.

Inline

Angular has a configuration where the definition of the styles are inline the same component file. To have a basic style, this would be the configuration:

@Component({
  selector: 'app-root',
  templateUrls: './app.component.html',
  styles: `p { color: red }`
})

style defines the CSS style for the component within a single line enclosed by the back-ticks.

This is useful for components where there are not any style needed.

Big Picture

Just to step out to go over anatomy of an Angular component:

• imports
  • get the correct library that implements the @Component
• @Components, declare:
  • what to bind the component to? use: selector
  • what HTML definition to use:
    • inline? use: template
    • in an HTML file? use: templateUrl
  • what CSS style definition to use:
    • inline? use: styles
    • in a CSS file? use: styleUrls
• class, declare:
  • what variables that can be access in the HTML definition through {{ }} parameters
  • do actual work!

Conclusion

Components are an essential building block for an Angular project. A component file has three basic parts:

• imports
• @Component declarations
• class definition

This is a quick tour of the parts of an Angular component file.