Component Boiler Plate

Breakdown and explanation of Angular's Component Boilerplate

What is Boiler Plate?

BOILER PLATE: In computer programming, boilerplate code or just boilerplate are sections of code that have to be included in many places with little or no alteration. When using languages that are considered verbose, the programmer must write a lot of code to accomplish only minor functionality For example EVERY HTML file will have something like the below code no matter the website. Our components will have Boilerplate Code as well.

index.html

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">  
</head>

  <body></body>
  
</html>

Component Boilerplate Breakdown

my.component.ts

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

@Component({})

export class MyComponent {}

Importing the component class from @angular/core so we can create an instance of the component class. Other imports from Angular Core will sometimes be included here as well.z

Line 3: This lets you create an Angular Component using some defaults and the @ Component decorator

Line 5: Lastly the component is exported so we can import it into the app.module.ts

my.component.ts

import { Component } from "@angular/core"; (

@Component({
  selector: "my-component"
})

export class MyComponent {}

Line 4: Now we are using the component decorator to create a component with the selector value "my-component". This is how angular can use the and create a custom selector in our code. This is what makes components reusable and powerful.

Any HTML file

<my-component></my-component>

The selector is reusable just like <div></div> selector. The selector will place any all the entire template of the component with one selector.

my.component.ts

import { Component } from "@angular/core"; (

@Component({
  selector: "my-component",
  template: ` 
     ....
     <h1> Hello World </h1>
     <p> Some more HTML  </p>
     ......
  `
})

export class MyComponent {}

Line: 5: Template is just property of Component Decorator, and it defines the components HTML. It can be a template literal using ES6, backticks `` or a file path URL relative to the component.ts

my.component.ts

import { Component } from "@angular/core"; (

@Component({
  selector: "my-component",
  templateURL: './my.component.html'      
})

export class MyComponent {}

Line 5: Component's can use a file instead of a literal template. In this case templateURL is a relative file path to a file named my.component.html using either the template literal or templateURL is common place, best practice however is if the HTML code is longer than 10 lines create a separate file for it and use templateURL.

my.component.ts

import { Component } from "@angular/core"; (

@Component({
  selector: "my-component",
  templateURL: './my.component.html'.
  styles: [['h1 { font-weight: normal; }']]   
})

export class MyComponent {}

Line 6 : styles using defining the literal style for the component, just like template and templateURL we have the same options here for the styles of our component. styles would contain all your CSS rules for the component where as styleURL would have a string that is a filepath to the CSS file, for example:

Literal style in the component

styles: [['h1 { font-weight: normal; }']]

Versus styleURL

styleURL: './my.component.css'

Recap

All components have boilerplate that we do not have to write or memorize. The key points to focus on are that each component has a selector that we can use in our HTML and each component must have this boilerplate code work as long as being imported into the app.module.ts. More on that in the next page.

PreviousComponents & Data Binding NextCreating a Component

Last updated 5 years ago