⚙️ Angular Components

? Quick Overview

In Angular, components are the core building blocks of the application UI. Every screen, header, button group, or reusable UI section is typically built as a component.

Each Angular component is made up of three main parts:

TypeScript class → Handles data and logic.
HTML template → Describes how the UI looks.
CSS styles → Controls the appearance of the template.

?️ Building Block of Angular UI

? Key Concepts

Component: A self-contained UI block with its own logic, template, and styles.
@Component decorator: Tells Angular that a class is a component and provides metadata.
Selector: Custom HTML tag used to insert the component into templates (e.g., <app-root>).
Template: Inline HTML or external HTML file that defines the view.
Styles: Inline styles or separate CSS files applied only to that component (scoped styling).
Reusability: Components can be used multiple times across the app to avoid repetition.

? Syntax & Theory

The basic structure of an Angular component uses the @Component decorator from @angular/core and a TypeScript class:

? View Component Syntax

// Basic Angular component structure
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<h2>Example Component</h2>',
  styles: ['h2 { color: purple; }']
})
export class ExampleComponent {
  message = 'Hello from ExampleComponent!';
}

Here is what each part means:

selector: The tag name you will use in HTML to display this component.
template: Inline HTML content (you can also use templateUrl for an external file).
styles: Inline CSS rules (or styleUrls for external CSS files).
ExampleComponent: The class that holds data and logic for the component.

? Basic Component Example

Let’s look at a simple root component that Angular creates by default in a new project.

? View app.component.ts

// app.component.ts (root component)
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Welcome to Angular Components</h1>',
  styles: ['h1 { color: darkblue; }']
})
export class AppComponent {
  title = 'My Angular App';
}

?️ Live Output (Conceptual)

When the application runs, Angular finds the <app-root> tag in index.html and replaces it with the component’s template:

The browser displays: “Welcome to Angular Components” in dark blue.
The AppComponent class can expose properties (like title) that are used in the template.

?️ Creating a Custom Component (Angular CLI)

You can generate new components using the Angular CLI. This automatically creates all the required files and updates the module declarations for you.

? View CLI Commands

// Generate a new component using Angular CLI
ng generate component my-component
// Shorthand command
ng g c my-component

These commands create a folder my-component/ with four files:

my-component.component.ts → TypeScript logic (class + decorator)
my-component.component.html → Template (view)
my-component.component.css → Styles (scoped CSS)
my-component.component.spec.ts → Testing file (unit tests)

? Example: Custom Greeting Component

Now let’s build a small reusable component that greets the user by name.

? View Greeting Component Files

// my-component.component.ts (logic + metadata)
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  name = 'Student';
}

<!-- my-component.component.html (template) -->
<h2>Hello, {{ name }}! Welcome to Angular.</h2>

/* my-component.component.css (styles) */
h2 {
  color: teal;
  font-weight: 600;
}

?️ How This Renders

When you place the component’s selector inside another template (for example, in app.component.html):

<!-- app.component.html -->
<h1>My Angular App</h1>
<app-my-component></app-my-component>

Angular will render:

A main heading: “My Angular App”
Below it, a teal subheading: “Hello, Student! Welcome to Angular.”
If you update name in MyComponent, the message updates automatically on the screen.

✅ Tips & Best Practices

Use clear, meaningful names for components, such as user-profile, navbar, or product-card.
Group related components into feature folders (e.g., users/, auth/, dashboard/).
Prefer external HTML and CSS files (templateUrl and styleUrls) for better readability on larger components.
Keep components focused on presentation and simple logic; move complex logic and data handling into services.
Always ensure new components are properly declared in the appropriate Angular module.
Double-check the selector name you use in HTML matches the one defined in the @Component decorator.

? Try It Yourself

Create a component named greeting that displays your own name and a welcome message.
Add the <app-greeting></app-greeting> selector multiple times in app.component.html to see how components are reusable.
Style your greeting component with a unique background color and font style in its CSS file.
Add a new property like courseName to the component class and bind it in the template using interpolation.
Experiment by changing the selector name and updating it wherever the component is used.