Join our newsletter!
Get exclusive content, resources, and more!
1-2 emails per week, no spam
Outline
-
Fundamentals of Angular - Getting Started
- Introduction
- How to Learn Angular 10x Faster
- Prerequisites
- Using the CLI
- Exercise: Creating an Angular App
- Introduction to an Angular Application
- Introduction to TypeScript Types
- TypeScript for Angular
- TypeScript Decorators
- Exercise: Using TypeScript
- Solution: Using TypeScript
- Introduction to Angular Components
- Data Binding
- Exercise: Displaying Data
- Solution: Displaying Data
- The Safe Navigation Operator
- Listening to Events
- Exercise: Listening to Events
- Solution: Listening to Events
- Exercise: Putting the Basics Together
- Solution: Putting the Basics Together
- Solution: Bonus - Putting the Basics Together
- Summary
-
Fundamentals of Angular - Organizing an Angular Application
- Introduction
- Modules & The App Module
- What are Services
- Creating Services with the CLI
- Exercise: Creating a Service
- Solution: Creating a Service
- Creating Basic Components with the CLI
- CLI Flags for Creating Components
- Exercise: Creating Components with the CLI
- Solution: Creating Components with the CLI
- Child Components
- Sending Data to a Child Component
- Exercise: Sending Data to a Child Component
- Solution: Sending Data to a Child Component
- Who Owns the Data?
- Communicating with Parent Components
- Container vs Presenter Components
- Exercise: Communicating with Parent Components
- Solution: Communicating with Parent Components
- Accessing Static Assets
- Styling Components
- The Styles Attribute
- Exercise: Styling Components
- Solution: Styling Components
- Best Practices
- Overview of Using Services & Components Together
- Using Services & Components Together in Practice
- Exercise: Putting it all together
- Solution: Creating Components & Services
- Solution: Wiring Everything Together
- Solution: Cleaning up Styles
- Building an App
- Summary
-
Fundamentals of Angular - Displaying Data
- Introduction
- Expressions
- Interpolation vs. Property Bindings
- Setting the Document Title
- Binding to Styles
- Exercise: Binding to Styles
- Solution: Binding to Styles
- Debugging a Template
- Binding to Classes
- Exercise: Binding to Classes
- Solution: Binding to Classes
- Displaying Lists of Data with ngFor
- Working with Items in an ngFor
- Using ngFor with Child Components
- Directives
- Exercise: Displaying a List
- Solution: Displaying a List
- Conditional Display with ngIf
- Conditional Display with ngSwitch
- Exercise: Conditional Display
- Solution: Conditional Display
- Using Pipes
- Common Pipes
- The Date Pipe
- Exercise: Using Pipes
- Solution: Using Pipes
- Exercise: Displaying Data
- Solution: Displaying Data
- Solution Bonus: Displaying Data
- Let's Code Together
- Summary
-
Fundamentals of Angular - Communicating with a Server
- Introduction
- What are Observables?
- Modifying Data in the Stream
- Exercise: Work with an Observable
- Solution: Work with an Observable
- Using Models
- Installing the Server
- Dealing with RESTful API's
- Making GET Requests in Angular
- Using Services with HTTP Requests
- Exercise: Make a GET Request
- Solution: Make a GET Request
- Using QueryString Parameters
- The Async Pipe
- Exercise: Using the Async Pipe
- Solution: Using the Async Pipe
- Making POST Requests
- Updating the Client after a Change
- Keeping Local Data in Sync
- Exercise: Making POST Requests
- Solution: Making POST Requests
- Making PUT Requests
- Making DELETE Requests
- Exercise: Communicating with a Server
- Solution: Communicating with a Server
- Summary
-
Fundamentals of Angular - Routing
- Introduction
- Modules Revisited
- Importing the RouterModule
- Creating a Simple Route
- Exercise: Basic Routing
- Solution: Basic Routing
- Route Redirects
- Exercise: Route Redirects
- Solution: Route Redirects
- Linking to Routes
- Exercise: Linking to Routes
- Solution: Linking to Routes
- Configuring Parameters in Routes
- Retrieving Current Route Parameters
- Linking to Parameterized Routes
- Exercise: Using Route Parameters
- Solution: Using Route Parameters
- Query Parameters in Links
- Retrieving Query Parameters
- Exercise: Using Query Parameters
- Solution: Using Query Parameters
- Wildcard Route
- Routing Table Priority
- Exercise: Routing Table Priority
- Solution: Routing Table Priority
- Navigating in Code
- Exercise: Navigating in Code
- Solution: Navigating in Code
- Exercise: Routing within an Application
- Solution: Routing within an Application
- Summary
- Fundamentals of Angular - Feature Modules
-
Fundamentals of Angular - Forms
- Introduction
- Template Ref Variables
- Using Forms
- Processing Form Data
- Exercise: Creating a Form
- Solution: Creating a Form
- Two-Way Binding
- Using Two-Way Binding for Editing
- Exercise: Two-Way Binding
- Solution: Two-Way Binding
- Radios and Checkboxes
- Select Elements
- Exercise: Using More Controls
- Solution: Using More Controls
- Understanding Control State
- Validation Overview
- Validation: Communicating with the User
- Exercise: Communicating with the User
- Solution: Communicating with the User
- Validation and the Component
- Exercise: Validation and the Component
- Solution: Validation and the Component
- Exercise: Creating a Complete Form
- Solution: Editing Reviews
- Solution: Creating Reviews
- Solution: Validation
- Summary
-
Fundamentals of Angular - Configuration & Production
- Introduction
- The angular.json File
- Running in Dev vs. Prod
- How to Proxy your Dev Server API Calls
- Exercise: Run a Project with a Proxy
- Environment Files
- Exercise: Use an Environment File
- Solution: Use an Environment File
- Building for Production
- Simple Deployment Example
- Optional Exercise: Deploy an App
- Summary
- Where to Go from Here
Outline
-
Fundamentals of Angular - Getting Started
- Introduction
- How to Learn Angular 10x Faster
- Prerequisites
- Using the CLI
- Exercise: Creating an Angular App
- Introduction to an Angular Application
- Introduction to TypeScript Types
- TypeScript for Angular
- TypeScript Decorators
- Exercise: Using TypeScript
- Solution: Using TypeScript
- Introduction to Angular Components
- Data Binding
- Exercise: Displaying Data
- Solution: Displaying Data
- The Safe Navigation Operator
- Listening to Events
- Exercise: Listening to Events
- Solution: Listening to Events
- Exercise: Putting the Basics Together
- Solution: Putting the Basics Together
- Solution: Bonus - Putting the Basics Together
- Summary
-
Fundamentals of Angular - Organizing an Angular Application
- Introduction
- Modules & The App Module
- What are Services
- Creating Services with the CLI
- Exercise: Creating a Service
- Solution: Creating a Service
- Creating Basic Components with the CLI
- CLI Flags for Creating Components
- Exercise: Creating Components with the CLI
- Solution: Creating Components with the CLI
- Child Components
- Sending Data to a Child Component
- Exercise: Sending Data to a Child Component
- Solution: Sending Data to a Child Component
- Who Owns the Data?
- Communicating with Parent Components
- Container vs Presenter Components
- Exercise: Communicating with Parent Components
- Solution: Communicating with Parent Components
- Accessing Static Assets
- Styling Components
- The Styles Attribute
- Exercise: Styling Components
- Solution: Styling Components
- Best Practices
- Overview of Using Services & Components Together
- Using Services & Components Together in Practice
- Exercise: Putting it all together
- Solution: Creating Components & Services
- Solution: Wiring Everything Together
- Solution: Cleaning up Styles
- Building an App
- Summary
-
Fundamentals of Angular - Displaying Data
- Introduction
- Expressions
- Interpolation vs. Property Bindings
- Setting the Document Title
- Binding to Styles
- Exercise: Binding to Styles
- Solution: Binding to Styles
- Debugging a Template
- Binding to Classes
- Exercise: Binding to Classes
- Solution: Binding to Classes
- Displaying Lists of Data with ngFor
- Working with Items in an ngFor
- Using ngFor with Child Components
- Directives
- Exercise: Displaying a List
- Solution: Displaying a List
- Conditional Display with ngIf
- Conditional Display with ngSwitch
- Exercise: Conditional Display
- Solution: Conditional Display
- Using Pipes
- Common Pipes
- The Date Pipe
- Exercise: Using Pipes
- Solution: Using Pipes
- Exercise: Displaying Data
- Solution: Displaying Data
- Solution Bonus: Displaying Data
- Let's Code Together
- Summary
-
Fundamentals of Angular - Communicating with a Server
- Introduction
- What are Observables?
- Modifying Data in the Stream
- Exercise: Work with an Observable
- Solution: Work with an Observable
- Using Models
- Installing the Server
- Dealing with RESTful API's
- Making GET Requests in Angular
- Using Services with HTTP Requests
- Exercise: Make a GET Request
- Solution: Make a GET Request
- Using QueryString Parameters
- The Async Pipe
- Exercise: Using the Async Pipe
- Solution: Using the Async Pipe
- Making POST Requests
- Updating the Client after a Change
- Keeping Local Data in Sync
- Exercise: Making POST Requests
- Solution: Making POST Requests
- Making PUT Requests
- Making DELETE Requests
- Exercise: Communicating with a Server
- Solution: Communicating with a Server
- Summary
-
Fundamentals of Angular - Routing
- Introduction
- Modules Revisited
- Importing the RouterModule
- Creating a Simple Route
- Exercise: Basic Routing
- Solution: Basic Routing
- Route Redirects
- Exercise: Route Redirects
- Solution: Route Redirects
- Linking to Routes
- Exercise: Linking to Routes
- Solution: Linking to Routes
- Configuring Parameters in Routes
- Retrieving Current Route Parameters
- Linking to Parameterized Routes
- Exercise: Using Route Parameters
- Solution: Using Route Parameters
- Query Parameters in Links
- Retrieving Query Parameters
- Exercise: Using Query Parameters
- Solution: Using Query Parameters
- Wildcard Route
- Routing Table Priority
- Exercise: Routing Table Priority
- Solution: Routing Table Priority
- Navigating in Code
- Exercise: Navigating in Code
- Solution: Navigating in Code
- Exercise: Routing within an Application
- Solution: Routing within an Application
- Summary
- Fundamentals of Angular - Feature Modules
-
Fundamentals of Angular - Forms
- Introduction
- Template Ref Variables
- Using Forms
- Processing Form Data
- Exercise: Creating a Form
- Solution: Creating a Form
- Two-Way Binding
- Using Two-Way Binding for Editing
- Exercise: Two-Way Binding
- Solution: Two-Way Binding
- Radios and Checkboxes
- Select Elements
- Exercise: Using More Controls
- Solution: Using More Controls
- Understanding Control State
- Validation Overview
- Validation: Communicating with the User
- Exercise: Communicating with the User
- Solution: Communicating with the User
- Validation and the Component
- Exercise: Validation and the Component
- Solution: Validation and the Component
- Exercise: Creating a Complete Form
- Solution: Editing Reviews
- Solution: Creating Reviews
- Solution: Validation
- Summary
-
Fundamentals of Angular - Configuration & Production
- Introduction
- The angular.json File
- Running in Dev vs. Prod
- How to Proxy your Dev Server API Calls
- Exercise: Run a Project with a Proxy
- Environment Files
- Exercise: Use an Environment File
- Solution: Use an Environment File
- Building for Production
- Simple Deployment Example
- Optional Exercise: Deploy an App
- Summary
- Where to Go from Here
In this exercise...
you will practice putting together everything you have learned to display data to the user.
Directions:
In the project linked below:
- Display the complete list of watch items.
- Fix all display issues by using pipes.
- Implement swapping items when the up or down arrow is clicked
- Have no up arrow on the first item
- Have no down arrow on the last item
- Items that are on sale (onSale property set to true) should be indicated using the bg-success class
- Set the document title to show the # of items in the watch list
- Bonus Challenge - Only show 4 movies and have a "show all" button that disappears after it is clicked.
Click the following link to open up the exercise: https://stackblitz.com/fork/angular-gn3kyo?file=src%2Fapp%2Fwatch-list-item%2Fwatch-list-item.component.html