> For the complete documentation index, see [llms.txt](https://softstack-factory.gitbook.io/mean-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softstack-factory.gitbook.io/mean-stack/angular/wk3/untitled/component-boiler-plate.md).
# Component Boiler Plate
Breakdown and explanation of Angular's Component Boilerplate
**What is Boiler Plate?**
{% hint style="info" %}
**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.**
{% code title="index.html" %}
```markup
```
{% endcode %}
{% endhint %}
### Component Boilerplate Breakdown
{% tabs %}
{% tab title="Import" %}
{% code title="my.component.ts" %}
```typescript
import { Component } from "@angular/core";
@Component({})
export class MyComponent {}
```
{% endcode %}
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**
{% endtab %}
{% tab title="Selector" %}
{% code title="my.component.ts" %}
```typescript
import { Component } from "@angular/core"; (
@Component({
selector: "my-component"
})
export class MyComponent {}
```
{% endcode %}
**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.
{% code title="Any HTML file" %}
```markup
```
{% endcode %}
The selector is reusable just like **\\
selector.** The selector will place any all the entire template of the component with one selector.
{% endtab %}
{% tab title="Template" %}
{% code title="my.component.ts" %}
```typescript
import { Component } from "@angular/core"; (
@Component({
selector: "my-component",
template: `
....
Hello World
Some more HTML
......
`
})
export class MyComponent {}
```
{% endcode %}
**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
{% endtab %}
{% tab title="TemplateURL" %}
{% code title="my.component.ts" %}
```typescript
import { Component } from "@angular/core"; (
@Component({
selector: "my-component",
templateURL: './my.component.html'
})
export class MyComponent {}
```
{% endcode %}
**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**.
{% endtab %}
{% tab title="Styles" %}
{% code title="my.component.ts" %}
```typescript
import { Component } from "@angular/core"; (
@Component({
selector: "my-component",
templateURL: './my.component.html'.
styles: [['h1 { font-weight: normal; }']]
})
export class MyComponent {}
```
{% endcode %}
**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
```typescript
styles: [['h1 { font-weight: normal; }']]
```
Versus styleURL
```css
styleURL: './my.component.css'
```
{% endtab %}
{% endtabs %}
## 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.*