Getting Started
- Course Introduction
- What is Angular?
- Join our Online Learning Community
- Angular vs Angular 2 vs Latest Angular Version
- 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?
- Optional: TypeScript Quick Introduction
- A Basic Project Setup using Bootstrap for Styling
- About the Course Code / Code Snapshots
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
- Creating a New App 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
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
