Thursday, 17 April 2025

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>


By on

3 comments:

  1. Gabe Co Hadwin21 September 2026 at 09:34

    The article clearly distinguishes between a User Interface and an Angular component, explaining that the UI represents what users see and interact with, while components provide the building blocks used to create that interface. The simple user-card example makes this relationship easy to understand.

    The explanation of a component's three main parts—HTML template, TypeScript class, and CSS/SCSS—is particularly useful for beginners. The template handles the view, the class contains the component logic and data, and the stylesheet controls presentation, providing a practical foundation for an Angular Online Course.

    ReplyDelete
  2. Gabe Co Hadwin21 September 2026 at 09:34

    The UserCardComponent example also demonstrates Angular's interpolation syntax through {{ name }} and {{ age }}, while the selector allows the component to be reused as . This connection between component logic and templates is easier to understand when learning the TypeScript class structure through a TypeScript Online Course.

    ReplyDelete
  3. Gabe Co Hadwin21 September 2026 at 09:34

    The reusable component approach is one of the important ideas highlighted by the article. Instead of building an entire interface as one large block, Angular applications can divide the UI into focused components such as cards, menus, forms, and other reusable elements, providing a practical foundation for developing larger Angular Projects.

    ReplyDelete

Subscribe to: Post Comments (Atom)