What is The Component in Angular

A Component in Angular is a class that controls a specific part of the screen, called the view.
It could be something large and always visible, like a navigation bar, or something tiny and feature specific like a single custom-made control.

Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per element in a template

Let’s discuss with the bellow example

 

So above image, there is a Header, Menus, and Content available, now consider all three as a separate component like header.component.ts, menus.component.ts, and content.component.ts and this all component have HTML files as well so that can display in UI.

For Example

//header.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'header-app',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})

export class HeaderComponent implements OnInit {
  constructor() { }
  ngOnInit() {}
}

//header.component.html
<div class="container">
      <h1>Header Component</h1>
</div>

so above code, there is .ts and .html file for a header that we call as a component and that component included in route and in the module of angular