How does the Component directive define Angular components

Question

With the help of code and example tell me, how does the @Component directive define Angular components?

Answer 1

The @Component decorator defines a component by providing metadata that tells Angular how to process and render it.

Syntax:

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

@Component({

  selector: 'app-example',  // Defines the component's HTML tag

  templateUrl: './example.component.html',  // External template file

  styleUrls: ['./example.component.css']  // External stylesheets

})

export class ExampleComponent {

  title = 'Hello Angular';

}