Pebellslearn by building
RoadmapsMatrixCoursesSandboxSign in

Course details

Angular

Learn how an Angular app is put together, from the CLI and components to bindings, control flow, directives and pipes. Every lesson adds to one small plant-care app, so each idea lands on something you already know.

Ready to learn6 sections · 23 lessons
Start learning

Course curriculum

Introduction to Angular3 lessons

Meet Angular and how it differs from the older AngularJS, see how components, services and the router divide the work, and create the Greenhouse project with the Angular CLI.

  1. Angular and Its History12 min
  2. How an Angular App Is Built12 min
  3. Setting Up a New Project15 min
Components5 lessons

Take a component apart, style it without leaks, give it its own imports, pass data down and events up between parent and child, and reach into templates with viewChild and contentChild.

  1. Anatomy of a Component12 min
  2. Templates, Styles and Encapsulation12 min
  3. Standalone Components and Imports12 min
  4. Parent and Child: Inputs and Outputs15 min
  5. ViewChild and ContentChild15 min
Understand Binding4 lessons

Learn the four binding shapes: interpolation to print values, property and attribute binding to set them, event binding to react to the user, and two-way binding to keep a field and a signal in sync.

  1. Interpolation and the Four Bindings12 min
  2. Property and Attribute Binding12 min
  3. Event Binding and Template Statements12 min
  4. Two-way Binding12 min
Templates and Directives3 lessons

Read the older star directives and what the star really means, change how elements look with attribute directives and class bindings, and write your own reusable directive.

  1. Structural Directives12 min
  2. Attribute Directives12 min
  3. Writing a Custom Directive15 min
Template Syntax and Lifecycle5 lessons

Learn when Angular calls a component's lifecycle hooks, then control the template with @if, @for, @switch, name values with @let and postpone heavy parts with @defer.

  1. The Component Lifecycle15 min
  2. @if, @else if and @else12 min
  3. @for, track and @empty12 min
  4. @switch, @case and @default12 min
  5. @let and @defer15 min
Pipes3 lessons

Format dates, money, percentages and text with the built-in pipes, chain them without precedence surprises, and write your own pure pipe that Angular runs only when it must.

  1. Common Built-in Pipes12 min
  2. Chaining Pipes and Precedence12 min
  3. Custom Pipes and Pure Change Detection15 min