Getting Started
  • Course Introduction
  • What is Angular?
  • Angular vs Angular 2 vs Angular 8
  • CLI Deep Dive & Troubleshooting
  • Project Setup and First App
  • Editing the First App
  • The Course Structure
  • How to get the Most out of the Course
  • What is TypeScript?
  • A Basic Project Setup using Bootstrap for Styling
  • Where to find the Course Source Code
The Basics
  • Module Introduction
  • How an Angular App gets Loaded and Started
  • Components are Important!
  • Creating a New Component
  • Understanding the Role of AppModule and Component Declaration
  • Using Custom Components
  • Creating Components with the CLI & Nesting Components
  • Working with Component Templates
  • Working with Component Styles
  • Fully Understanding the Component Selector
  • Practicing Components
  • [OPTIONAL] Assignment Solution
  • What is Databinding?
  • String Interpolation
  • Property Binding
  • Property Binding vs String Interpolation
  • Event Binding
  • Bindable Properties and Events
  • Passing and Using Data with Event Binding
  • Important: FormsModule is Required for Two-Way-Binding!
  • Two-Way-Databinding
  • Combining all Forms of Databinding
  • Practicing Databinding
  • [OPTIONAL] Assignment Solution
  • Understanding Directives
  • Using ngIf to Output Data Conditionally
  • Enhancing ngIf with an Else Condition
  • Styling Elements Dynamically with ngStyle
  • Applying CSS Classes Dynamically with ngClass
  • Outputting Lists with ngFor
  • Practicing Directives
  • [OPTIONAL] Assignment Solution
  • Getting the Index when using ngFor
Course Project - The Basics
  • Project Introduction
  • Planning the App
  • Installing Bootstrap Correctly
  • Setting up the Application
  • Creating the Components
  • Using the Components
  • Adding a Navigation Bar
  • Alternative Non-Collapsable Navigation Bar
  • Creating a "Recipe" Model
  • Adding Content to the Recipes Components
  • Outputting a List of Recipes with ngFor
  • Displaying Recipe Details
  • Working on the ShoppingListComponent
  • Creating an "Ingredient" Model
  • Creating and Outputting the Shopping List
  • Adding a Shopping List Edit Section
  • Wrap Up & Next Steps
Debugging
  • Understanding Angular Error Messages
  • Debugging Code in the Browser Using Sourcemaps
  • Using Augury to Dive into Angular Apps
Components & Databinding Deep Dive
  • Module Introduction
  • Splitting Apps into Components
  • Property & Event Binding Overview
  • Binding to Custom Properties
  • Assigning an Alias to Custom Properties
  • Binding to Custom Events
  • Assigning an Alias to Custom Events
  • Custom Property and Event Binding Summary
  • Understanding View Encapsulation
  • More on View Encapsulation
  • Using Local References in Templates
  • @ViewChild() in Angular 8
  • Getting Access to the Template & DOM with @ViewChild
  • Projecting Content into Components with ng-content
  • Understanding the Component Lifecycle
  • Seeing Lifecycle Hooks in Action
  • Lifecycle Hooks and Template Access
  • @ContentChild() in Angular 8
  • Getting Access to ng-content with @ContentChild
  • Wrap Up
  • Practicing Property & Event Binding and View Encapsulation
  • [OPTIONAL] Assignment Solution
Course Project - Components & Databinding
  • Introduction
  • Adding Navigation with Event Binding and ngIf
  • Passing Recipe Data with Property Binding
  • Passing Data with Event and Property Binding (Combined)
  • Make sure you have FormsModule added!
  • Allowing the User to Add Ingredients to the Shopping List
Directives Deep Dive
  • Module Introduction