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 video...
You will learn how to utilize form elements and form controls in an Angular application, and access the values that a user enters into those controls in our component.
Forms are an important part of interacting with a user. The form element and the various input elements are used in most applications. We'll see how Angular adds additional functionality, directives, and events to allow us to work with forms. Through the use of (ngModel) binding, we can create a JavaScript object that contains all of the data on a form. Through the use of a template ref variable on the form in the format of #formName="ngForm" we can access this data in events. The standard event we listen to is the ngSubmit event on the form. Typically we access the data through (ngSubmit)="handleSubmit(formName.value)" which will pass all of the form data into this event handler.