Anatomy of an Angular Component: Template, Styles, and Logic

Explore the three essential parts that make up an Angular component: the Template (HTML) that defines the visual structure, the Styles (CSS) that control the appearance, and the Logic (TypeScript component class) that handles data and functionality.

⚙️

Welcome! Let's build an Angular component from scratch, piece by piece.

/* Preparing the workshop... */

The Template: Structure (HTML)

The Template is the face of your component. Written in HTML, it defines the structure and layout of the view. It's not just static; it can include Angular-specific syntax like data binding (`{{ '}}'}`) and directives (`*ngIf`, `*ngFor`) to create dynamic and responsive user interfaces.

The Styles: Appearance (CSS)

The Styles, written in CSS, Sass, or other preprocessors, provide the visual appearance. Angular encapsulates styles by default, meaning the styles you write for one component won't accidentally leak and affect others. This is achieved through `styleUrls` in the component decorator.

The Logic: Behavior (TypeScript)

The Logic is the brain. It's a TypeScript class that contains the component's data (properties) and behavior (methods). It interacts with the template to display information and responds to user events like clicks or input.

Putting It All Together: The @Component Decorator

These three parts are linked together by the `@Component` decorator in the TypeScript class. The `templateUrl` points to the HTML file, and `styleUrls` points to an array of stylesheet files. This separation keeps the code organized, maintainable, and easy to debug.

Practice Zone

Interactive Test 1: Identify the Parts

Drag the description to the correct part of an Angular component.

Arrastra en el orden correspondiente.

Arrastra las opciones:

Defines the HTML structure

Provides the visual appearance

Contains functionality and data

Completa el código:

Template______

Styles______

Logic______

Unlock with Premium

Interactive Test 2: Complete the Component

Rellena los huecos en cada casilla.

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

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

Unlock with Premium

Practice Example: Write Component Logic

Create a simple Angular component class with a `title` property and a `greet()` method that returns a string.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

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

@Component({
  selector: 'app-greeting',
  template: '<h1>{{ title }}</h1><p>{{ greet() }}</p>'
})
export class GreetingComponent {
  title = 'Welcome!';

  greet(): string {
    return 'Hello from the component logic!';
  }
}

Unlock with Premium

Knowledge Check

What are the three fundamental parts of an Angular component?

Unlock with Premium

Components in a Real Angular App

In a real application, components are nested to build complex UIs. A parent component can pass data to a child component, and a child can emit events back up to the parent.

1. Parent to Child: Input Binding

A parent component can pass data to a child using property binding (`[]`). The child component must declare a property with the `@Input()` decorator to receive this data.

// Parent Component Template
<app-child [message]="parentMessage"></app-child>

// Child Component Logic
import { Input } from '@angular/core';

export class ChildComponent {
  @Input() message: string;
}

2. Child to Parent: Output and Event Emitters

A child can communicate with its parent by emitting events. It uses a property decorated with `@Output()` and an `EventEmitter`. The parent listens for this event with event binding (`()`).

// Child Component Logic
import { Output, EventEmitter } from '@angular/core';

export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit("Hello from child!");
  }
}

// Parent Component Template
<app-child (messageEvent)="receiveMessage($event)"></app-child>

Practical Takeaway: This parent-child communication is fundamental to building modular and scalable Angular applications. Data flows down, and events bubble up.

Component Glossary

Component: The fundamental building block of an Angular application, consisting of a template, styles, and logic.
Decorator: A special kind of declaration that can be attached to a class, method, or property. `@Component` is a decorator.
templateUrl: A property in the `@Component` decorator that specifies the path to the component's HTML template file.
styleUrls: A property in the `@Component` decorator that specifies an array of paths to CSS files for the component.
Selector: A CSS selector that identifies how the component is used in a template. For example, a selector of `'app-root'` means you can use `<app-root></app-root>` in your HTML.