Core Angular Concepts in Angular

Core Angular Concepts is the second chapter of the free Angular tutorial. It builds on components and templates with the tools you use in almost every Angular template.

What each lesson covers:

  • Directives: Structural directives (*ngIf, *ngFor, *ngSwitch), the modern control flow blocks @if, @for and @switch, the attribute directives ngClass and ngStyle, best practices, and a first custom directive.
  • Pipes: Formatting dates, currency, numbers, percentages and text with built-in pipes, chaining pipes, passing parameters, and writing a custom pipe.
  • Event Handling: Click, keyboard, input and change events, the $event object, passing parameters to handlers, and preventing default browser behavior.
  • Component Communication: Passing data from parent to child with @Input(), sending events from child to parent with @Output() and EventEmitter, and best practices.
  • Component Lifecycle Hook: Every lifecycle hook from ngOnChanges to ngOnDestroy, when Angular calls each one, and how to use them safely.

Every practice block runs real Angular in your browser, in TypeScript or JavaScript. Each lesson ends with exercises that check what your app displays, so any correct answer passes. Work through the lessons in order, because each one uses the template syntax from the chapter before it.

Lessons in this section

  1. Directives

    What directives are, the structural directives *ngIf, *ngFor and *ngSwitch, the modern @if, @for and @switch blocks, the attribute directives ngClass and ngStyle, best practices, and a first custom directive.

  2. Pipes

    What pipes are and why to use them, the built-in date, currency, number, percent, case and json pipes, chaining pipes, pipe parameters, and writing a custom pipe.

  3. Event Handling

    How Angular handles click, keyboard, input and change events, reading the event object, passing parameters to handlers, and preventing the browser's default behavior.

  4. Component Communication

    How parent and child components exchange data: @Input() for data going down, @Output() with EventEmitter for events going up, two-way binding between components, and best practices.

  5. Component Lifecycle Hook

    The stages of a component's life and the hooks Angular calls at each one, from ngOnChanges and ngOnInit to the content and view hooks and ngOnDestroy, with best practices.