Angular Fundamentals

What is Angular?

Angular is a full-featured, TypeScript-based web framework by Google. Unlike React (a library), Angular is an opinionated framework that includes routing, forms, HTTP client, and dependency injection out of the box.

Component Structure

Every UI is built from components — a TypeScript class, an HTML template, and optional styles.

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

@Component({
    selector: "app-hello",
    template: `<h1>Hello, {{ name }}!</h1>`,
})
export class HelloComponent {
    name = "Angular";
}

Template Binding

<!-- Interpolation -->
<p>{{ title }}</p>

<!-- Property binding: component to DOM -->
<img [src]="imageUrl" />

<!-- Event binding: DOM to component -->
<button (click)="save()">Save</button>

<!-- Two-way binding (requires FormsModule) -->
<input [(ngModel)]="username" />

Built-in Directives

<!-- Conditional rendering -->
<div *ngIf="isLoggedIn">Welcome!</div>

<!-- List rendering -->
<li *ngFor="let item of items; let i = index">
    {{ i + 1 }}. {{ item.name }}
</li>

<!-- Dynamic CSS -->
<div [ngClass]="{ active: isActive, error: hasError }"></div>

Services & Dependency Injection

import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" })
export class DataService {
    getData() { return []; }
}

export class MyComponent {
    constructor(private dataService: DataService) {}
}

Component Communication

// Receive data from parent
@Input() title: string = "";

// Emit event to parent
@Output() selected = new EventEmitter<string>();
this.selected.emit("value");

// Parent template:
// <child [title]="myTitle" (selected)="onSelected($event)"></child>

Key Decorators

Decorator	Purpose
@Component	Defines a component
@Injectable	Marks a class as injectable service
@NgModule	Declares a module
@Input()	Receives data from parent
@Output()	Emits events to parent
@Pipe	Defines a template transformation