Angular 19 | Chapter 3 | User Interfaces & Components

 

3. # User Interfaces & Components

In Angular, User Interfaces (UIs) and Components go hand-in-hand, but they represent different concepts:

🧑‍💻 User Interfaces (UIs)

A User Interface is simply what the user sees and interacts with on the screen — the layout, buttons, text boxes, icons, navigation bars, etc.

In Angular, you build the UI using components. So think of the UI as the end result, and components as the building blocks.

🧩 Components

A Component in Angular is the core building block of the UI. It controls a piece of the screen and defines how it looks and how it behaves.

Each component has:

1. HTML template – defines the UI
2. TypeScript class – defines the logic
3. CSS/SCSS – defines the style

 

🧱 Example: Simple Component

Let’s say we’re building a "user card" UI. The component might look like this: 

user-card.component.ts

import { Component } from '@angular/core'; @Component({   selector: 'app-user-card',   templateUrl: './user-card.component.html',   styleUrls: ['./user-card.component.css'] })   export class UserCardComponent {   name = 'Alice';   age = 30; }

user-card.component.html

<div class="card">   <h2>{{ name }}</h2>   <p>Age: {{ age }}</p> </div>

user-card.component.css

.card {   border: 1px solid #ccc;   padding: 10px;   border-radius: 8px; }

        

         Then you can use it in another template like this:     
         <app-user-card> </app-user-card> 

🧠 Summary

Term	Meaning	Example
User Interface (UI)	What the user sees and interacts with	Buttons, menus, cards, forms
Component	A reusable block that controls a piece of the UI (view + logic)	<app-user-card></app-user-card>