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

# Using A  Component

#### prerequisites

* [ ] Created a Component
* [ ] Imported Component into ***app.module.ts***

{% tabs %}
{% tab title="Demo Component" %}
{% code title="" %}

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

@Component({
  selector: "my-component",
  template: ` 
    <h1> My Component </h1>
    
   `,
  styles: [['h1 { font-weight: normal; }']]   
})

export class MyComponent {}
```

{% endcode %}
{% endtab %}
{% endtabs %}

The selector for the above component would be\
&#x20;**\<my-component> \</my-component>.**   This is defined by the selector property on **line 4**. &#x20;

#### Using the Component

We can reuse any component by placing its selector in another components HTML. A selector is just like \<div>\</div> or \<img> but in our case it will place all the html for that component.

{% tabs %}
{% tab title="app.component.html" %}

```
<my-component></my-component>
```

{% endtab %}
{% endtabs %}