Using A Component

prerequisites

• Created a Component

• Imported Component into app.module.ts

Demo Component

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

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

export class MyComponent {}

The selector for the above component would be <my-component> </my-component>. This is defined by the selector property on line 4.

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.

app.component.html

<my-component></my-component>