What is a component in Angular? How do you create one?

A component controls one part of the screen, called a view. It has four parts:

• A TypeScript class that holds the application logic.
• An HTML template that defines the view.
• CSS styles that define its appearance.
• Metadata from the @Component decorator, which tells Angular how to process the class.

To create one, run ng generate component example or write the class by hand.

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

@Component({
  selector: 'app-example',
  template: '<h1>{{title}}</h1>',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title = 'Hello World';
}

The selector is the tag other templates use, here <app-example>. Components are standalone by default, so another component uses this one by adding ExampleComponent to its imports array.