> 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/creating-a-component.md).

# Creating a Component

How to create a component with Angular CLI

Luckily we do not have to write the boilerplate code from the previous section to create a component angular will do that for us. If you have the angular CLI installed we can use it **generate** a component and all its **boilerplate** code.

ng generate component  \<component-name>

{% code title="BASH Command" %}

```
ng generate component my
// both commands will do the same thing
$ ng g my
```

{% endcode %}

{% hint style="info" %}
When creating a component with the Angular CLI we do not need to add **component** to the name, it will do it for use.  For example:\
$`ng generate my` \
will generate a file named my.component.ts  that has the class MyComponent;
{% endhint %}

### Importing a Component to app.module.ts

After we create a component we must register it in ***app.module.ts*****,** if you use the CLI to generate the component is should add it for you to the ***app.module.ts***  imports list and declarations array,  but it best practice to check after each time.&#x20;

{% hint style="warning" %}
Always confirm something works in programming  before moving on.  There are times when things do not work as advertised.
{% endhint %}

{% tabs %}
{% tab title="app.module.ts" %}

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MyComponent } from './my.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, MyComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

```

{% endtab %}

{% tab 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 {
   constructor(){}
}
```

{% endtab %}
{% endtabs %}

#### App.module.ts Explanation

**Line 6:**  we are importing the MyComponent from ***./my.component.ts*****.** This is a relative file path, what does one dot mean again? Same folder or different folder? &#x20;

**Line 9** my.component.ts - You will see **export class MyComponent**, this is what is being imported in the ***app.module.ts***

**Line 10: Declarations** is an array of all components, notice **AppComponent** and **MyComponent** are here.