Angular Basics (v18) 
84 lessons
•9 hours
•
5/5 (482 ratings)
Angular Basics (v18)
Modern Angular v16 best-practices and patterns from years of evolution. Scalable architecture, immutable data structures, state services and brand new Standalone Components. Build an app start-to-finish whilst fast-tracking your Angular skills.
11
Chapters84
Lessons9
Hours
Closed Captions in English
Immutable State Updates • 12:01
Fantastic course. Everything you could ever wish for in a fundamentals course on Angular. This course asks the question "why?" and responds with the answers!
Ryan Woodcox
JavaScript DeveloperAngular Basics is the clearest, and best produced Angular course on the market! Clear, concise, packed with best practices and skilled me up very quickly.
Kyle Hebert
JavaScript DeveloperHands down the best courses available for Angular! Just follow along, you'll fall in love with Angular. Daunting concepts aren't scary anymore, they're a breeze.
Vatsal Pande
Full-Stack Engineer, eBayThe best resource for anyone wanting to get started with Angular, and go way beyond. The content has been well thought out, everything fits together perfectly.
Anish Benjamin
JavaScript DeveloperTodd does an immense job breaking concepts down into something far simpler. I strongly recommend Ultimate Courses to anyone looking to improve their understanding of web fundamentals knowledge and beyond!
Houssein Djirdeh
Web Engineer, GoogleThis is the best Angular training I have come across so far. It perfectly explains the basics and shows how to organize code to the fullest.
Radek Marčan
Full Stack Developer, SiemensHere's what's inside...
Everything you need, structured and ready to go.
Introduction
Component Architecture, State and One-Way Data Flow
Readme Setup Instructions
06:26 Project Setup and Walkthrough
07:12 Understand Angular Bootstrapping
Template Essentials
06:59 Interpolation and Expressions
07:37 Property Binding Syntax
11:21 Event Binding Syntax
05:17 Template Ref Variables
Component Architecture
06:54 Create a Child Feature Module
05:12 Create a Smart Container Component
08:28 Use the NgOnInit Lifecycle Hook
06:18 Create and Render a Dumb Component
06:33 Pass State to Dumb Components via @Input
Styles and CSS Encapsulation
Pipes
05:00 Use a Pipe to Format Currency
Rendering Flows
02:37 Use <ng-container> for Virtual Elements
04:33 Use the NgIf, Else and Then Syntax
05:44 NgIf Syntax with <ng-template>
05:18 NgFor and Iterating Collections
04:36 Access NgFor Index, Odd and Even Variables
08:36 Use NgSwitch for Case Rendering
03:35 Advanced NgSwitch Syntax with <ng-template>
Template Forms and Validation
07:35 Create a Form Container and Dumb Component
03:43 Use NgForm with a Template Ref Variable
05:02 <input> Binding with NgModel
07:53 Radio Button Binding with NgModel
01:34 Textarea Binding with NgModel
05:47 Add Validation Constraints and Form Status
07:11 NgModel Template Refs and Validation States
07:38 Show Error Messages on Validation Change
06:57 Form Submit with NgSubmit
02:31 Disable Submit and Safety Check Submissions
04:07 Control NgModel Writes with ngModelOptions
03:54 Trigger a Form State and Validation Reset
03:00 Show Visual Feedback on Form Submission
08:07 Emit Form Payload to Smart Container via @Output
State Management and Services
03:57 Create an @Injectable Service
07:39 Share State in Components via Services
05:40 Class Methods as State Selectors
07:16 Immutable State Creation
05:12 Immutable State Deletions
Services and API Requests
04:57 Configure and Proxy a Local HTTP Server
09:45 Read Data with HttpClient GET
10:37 Store State with Observable Pipes
09:13 Update Data with HttpClient PUT
05:39 Delete Data with HttpClient DELETE
11:10 Error Handling with catchError() and throwError()
02:46 Retry Failed Requests with retry()
07:35 Set HttpHeaders and RequestOptions
Routing and Navigation
08:39 Root Module Routes with forRoot()
02:58 Create Nested Child Routes
04:02 Redirect Routes to New Paths
02:40 Handle 404 Not Found Routes with Wildcards
06:14 Declarative Navigation with routerLink Directives
08:14 Pass Custom Data to Routed Components
05:20 Programmatic Navigation with Router.navigate()
Standalone Components
07:19 The Idea Behind Standalone Angular
05:35 Bootstrap a Standalone Component instead of NgModule
05:58 Providing a Route Config via “importProvidersFrom”
03:49 Import NgModules into Standalone Components
04:32 Lazy-Load Component-Less Route Configs
10:14 Providing Standalone Directives, Components and Pipes
04:33 Code Split and Lazy-Load at the Component Level
03:44 Scoped or Component-Level Providers and “providedIn”
Get the complete package...
Everything you need to start mastering Angular today
Expert knowledge
Built by Google Developer Experts, there's no better place to learn.
All the best practices
Design patterns, battle-tested techniques, architecture and performance.
Stream or download
Learn at home at your own pace, download for offline viewing.
Level up your career
Nail that interview or promotion with skills that will set you apart.
StackBlitz Embeds
Access full source code, and experiment live in the browser.
Private Slack Group
Exclusive access to our members-only community (7,000+ members).
Angular Basics (v18)
Angular Master Bundle
Angular Kickstart Bundle
30-day money back guarantee
If you're disappointed for whatever reason, you'll get a full refund (but I'm sure you won't need it).
Location discounts and students
Not-so-good exchange rate? (i.e. India/Brazil). Student?
Email us for a coupon for your country or student ID.
•
