AI Features
Log In
0% completed
All Lessons
Free Lessons (5)
Getting Started
Why Angular Still Matters
Introduction to the Course
Building Our First Angular Application
Overview
Getting Started with Angular
Setting Up the Angular CLI Workspace
Structure of an Angular Application
Summary: Building Our First Angular Application
Quiz: Building Our First Angular Application
Introduction to TypeScript
Overview
The History of TypeScript
Types in TypeScript
Dynamic Typing with No Type
Functions, Lambdas, and Execution Flow
Common TypeScript Features
Classes in TypeScript
Interfaces in TypeScript
Inheritance and Decorators in TypeScript
Advanced Types and Modules
Summary: Introduction to TypeScript
Quiz: Introduction to TypeScript
Challenge: TypeScript Inheritance
Solution: TypeScript Inheritance
Organizing Applications into Modules
Overview
Introducing Angular Modules
Grouping Application Features into Modules
Organizing Modules by Type
Summary: Organizing Applications into Modules
Quiz: Organizing Applications into Modules
Enabling User Experience with Components
Overview
Creating Our First Component
Creating Standalone Components
Interacting with the Template
Styling the Component
Component Intercommunication
Listening for Events Using an Output Binding
Local Reference Variables in Templates
Deciding on a Change Detection Strategy
Performing Component Initialization
Detecting Input Binding Changes
Summary: Enabling User Experience with Components
Quiz: Enabling User Experience with Components
Challenge: Toggle Visibility Functionality
Solution: Toggle Visibility Functionality
Enrich Applications Using Pipes and Directives
Overview
Introducing Directives
Iterating Through Data
Introduction to Pipes and Creating Interfaces
Working with Pipes in Angular
Building Custom Pipes
Change Detection With Pipes
Displaying Dynamic Data
Property Binding and Responding to Events
Toggling Templates Dynamically
Summary: Enrich Applications Using Pipes and Directives
Quiz: Enrich Applications Using Pipes and Directives
Challenge: Adding a Header Using Angular Directives
Solution: Adding a Header Using Angular Directives
Managing Complex Tasks with Services
Overview
Introducing Angular DI
Providing Dependencies Across the Application
Sharing Dependencies through Components
Sandboxing Components with Multiple Instances
Restricting DI Down the Component Tree
Overriding Service Implementation
Summary: Managing Complex Tasks with Services
Quiz: Managing Complex Tasks with Services
Being Reactive Using Observables and RxJS
Overview
Strategies for Handling Asynchronous Information
Observables in a Nutshell
Reactive Programming in Angular
The RxJS Library
Higher-Order Observables
Subscribing to Observables
Unsubscribing from Observables
Summary: Being Reactive Using Observables and RxJS
Quiz: Being Reactive Using Observables and RxJS
Challenge: Click Logger Functionality
Solution: Click Logger Functionality
Communicating with Data Services over HTTP
Overview
Strategies for Handling Asynchronous Information
Setting Up a Backend
Fetching Data Through HTTP
Fetching Data through HTTP GET request
Modifying Data Through HTTP
Updating Product Price
Removing a Product
Authentication and Authorization with HTTP
Authorizing User Access
Authorizing HTTP Requests
Summary: Communicating with Data Services over HTTP
Quiz: Communicating with Data Services over HTTP
Challenge: Implement Authorization
Solution: Implement Authorization
Navigating through Application with Routing
Overview
Introducing the Angular Router
Configuring the Router
Configuring Routing in our Application
Creating Feature Routing Modules
Handling Unknown Route Paths
Navigating Imperatively to a Route
Passing Parameters to Routes
Reusing Components Using Child Routes
Filtering Data Using Query Parameters
Preventing Navigation Away from a Route
Lazy-Loading Routes
Protecting a Lazy-Loaded Module
Summary: Navigating through the Application with Routing
Quiz: Navigating through the Application with Routing
Challenge: Implement Navigation System Using Routing
Solution: Implement Navigation System Using Routing
Collecting User Data with Forms
Overview
Introducing Forms to Web Apps
Using Reactive Patterns in Angular Forms
Providing Form Status Feedback and Creating Nested Form
Creating Elegant Reactive Forms
Modifying Forms Dynamically
Manipulating Form Data
Summary: Collecting User Data with Forms
Quiz: Collecting User Data with Forms
Challenge: Create a Simple Task Manager Application
Solution: Create a Simple Task Manager Application
Introduction to Angular Material
Overview
What Are Material Design and Angular Material
Adding Angular Material to Our Application
Adding Core UI Controls
Form Controls: Input
Form Controls: Autocomplete
Form Controls: Select & Checkbox
Form Controls: Datepicker & Navigation Toolbar
Layout
Creating a Simple Dialog
Configuring a Dialog
The Table Component
Sort Table & Pagination
Integration Controls
Introducing the Angular CDK
Summary: Introduction to Angular Material
Quiz: Introduction to Angular Material
Challenge: Add Angular Material UI Components
Solution: Add Angular Material UI Components
Project
Build a Card Memory Game in Angular
Unit Test an Angular Application
Overview
Why Do We Need Unit Tests?
Introducing Unit Tests in Angular
Testing With Dependencies
Spying on the Dependency Method
Testing Asynchronous Services
Testing with Inputs and Outputs
Testing Services
Testing Pipes and Directives
Testing Forms
Summary: Unit Test an Angular Application
Quiz: Unit Test an Angular Application
Challenge: Create Unit Tests
Solution: Create Unit Tests
Bringing an Application to Production
Overview
Building an Angular Application
Building for Different Environments
Limiting the Size and Optimizing the Application Bundle
Summary: Bringing an Application to Production
Quiz: Bringing an Application to Production
Handling Errors and Application Debugging
Overview
Handling Application Errors
Creating a Global Error Handler
Debugging Angular Applications: Console API & Breakpoints
Debugging Angular Applications: DevTools
Summary: Handling Errors and Application Debugging
Quiz: Handling Errors and Application Debugging
Wrap Up
Conclusion
Appendix
Angular CLI: Setup on the Local Machine
VS Code Tooling
Installing Angular Material
Deploying an Angular Application
Project
Build a Music Player Application Using Angular
Home
Courses
Learning Angular
Challenge: Add Angular Material UI Components
Complete the challenge of adding Angular Material UI components in the application.
We'll cover the following...
Problem statement
Requirements
Expected output
Playground
Problem statement
...