Components

Lesson content

What is a Component? A component is the basic building block of an Angular application. It controls a section of the user interface and combines: TypeScript logic HTML template CSS styles Component metadata Component Example import { Component } from '@angular/core'; @Component({ selector: 'app-product', standalone: true, template: ` <h2>{{ productName }}</h2> <button (click)="buyProduct()">Buy</button> ` }) export class ProductComponent { productName = 'Keyboard'; buyProduct() { console.log('Product purchased'); } } Component Parts @Component() – Adds component metadata selector – Defines the custom HTML element standalone – Makes the component independent of an NgModule template – Defines the component UI styles – Defines component-specific styling Class – Contains data and methods Using the Component <app-product></app-product> Component Flow Component Class ↓ Component Data ↓ Template ↓ User Interface ↓ User Action ↓ Component Method Real-Life Example E-commerce Application ├── Header Component ├── Product List Component ├── Product Card Component ├── Cart Component └── Footer Component Best Practice Keep components focused on presentation and user interaction. Move reusable business logic and API calls into services. Key Point Component = TypeScript Class + Template + Styles + Metadata.