Why components are the building blocks in Angular

Introduction

Components help break a big app into small, easy parts. Each part does one job well.

Building a user profile section that shows user info and settings.

Creating a navigation menu that appears on many pages.

Making a reusable button that looks and works the same everywhere.

Separating a form into parts like input fields and submit button.

Organizing a dashboard with charts and lists as separate pieces.

Syntax

Angular

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

@Component({
  selector: 'app-example',
  template: `<p>Hello from example component!</p>`,
  styles: [`p { color: blue; }`]
})
export class ExampleComponent {}

The @Component decorator tells Angular this is a component.

selector is the HTML tag to use this component.

Examples

A simple header component showing a title.

Angular

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

@Component({
  selector: 'app-header',
  template: `<header><h1>My App</h1></header>`
})
export class HeaderComponent {}

A button component with custom style.

Angular

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

@Component({
  selector: 'app-button',
  template: `<button>Click me</button>`,
  styles: [`button { background-color: green; color: white; }`]
})
export class ButtonComponent {}

Sample Program

This component shows a welcome message. You can use <app-greeting> in HTML to show it.

Angular

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

@Component({
  selector: 'app-greeting',
  template: `<p>Welcome to Angular components!</p>`,
  styles: [`p { font-weight: bold; font-size: 1.2rem; }`]
})
export class GreetingComponent {}

Important Notes

Components keep code organized and easy to fix or change.

Each component has its own template (HTML) and styles (CSS).

Use components to reuse UI parts and avoid repeating code.

Summary

Components split apps into small, manageable pieces.

They have their own HTML, CSS, and logic.

Using components makes apps easier to build and maintain.