Angular Icon Get 73% off the Angular Master bundle

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs

Angular Basics (v18) Angular Icon

84 lessons

9 hours

Star Icon Star Icon Star Icon Star Icon Star Icon

5/5 (482 ratings)

Angular Basics (v18)

Star Icon Star Icon Star Icon Star Icon Star Icon

5/5 (482 reviews)

Todd Motto

with Todd Motto

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

Chapters

84

Lessons

9

Hours
Closed Captions Icon

Closed Captions in English

Free Lesson Arrow Icon
Course Thumbnail
Play Icon

Immutable State Updates 12:01

Star Icon Star Icon Star Icon Star Icon Star Icon
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

Ryan Woodcox

JavaScript Developer
Star Icon Star Icon Star Icon Star Icon Star Icon
Angular 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

Kyle Hebert

JavaScript Developer
Star Icon Star Icon Star Icon Star Icon Star Icon
Hands 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

Vatsal Pande

Full-Stack Engineer, eBay
Star Icon Star Icon Star Icon Star Icon Star Icon
The 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

Anish Benjamin

JavaScript Developer
Star Icon Star Icon Star Icon Star Icon Star Icon
Todd 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

Houssein Djirdeh

Web Engineer, Google
Star Icon Star Icon Star Icon Star Icon Star Icon
This 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

Radek Marčan

Full Stack Developer, Siemens

Here's what's inside...

Everything you need, structured and ready to go.

#1

Introduction

12:52

The Missing Introduction to Angular

Play →

Component Architecture, State and One-Way Data Flow

Readme

Setup Instructions

06:26

Project Setup and Walkthrough

07:12

Understand Angular Bootstrapping

#2

Template Essentials

06:59

Interpolation and Expressions

07:37

Property Binding Syntax

11:21

Event Binding Syntax

05:17

Template Ref Variables

#3

Component Architecture

06:54

Create a Child Feature Module

05:12

Create a Smart Container Component

08:28

Use the NgOnInit Lifecycle Hook

06:00

Type Definitions with Interfaces

Play →
06:18

Create and Render a Dumb Component

06:33

Pass State to Dumb Components via @Input

#4

Styles and CSS Encapsulation

10:59

Scoped Styles in Components

04:52

Style a Host Element

05:28

View Encapsulation: Shadow DOM and Emulated

06:29

Set Inline Styles with Style Bindings

06:19

Complex Inline Styles with NgStyle

Play →
04:55

Set Classes with Class Bindings

05:16

Complex Classes with NgClass

Play →
#5

Pipes

05:00

Use a Pipe to Format Currency

#6

Rendering Flows

05:29

Use NgIf for Conditional Rendering

Play →
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:38

Improve NgFor Performance with TrackBy

Play →
04:36

Access NgFor Index, Odd and Even Variables

05:45

Advanced NgFor Syntax with <ng-template>

Play →
08:36

Use NgSwitch for Case Rendering

03:35

Advanced NgSwitch Syntax with <ng-template>

#7

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

07:15

<select> and <option> Rendering and Binding

Play →
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

04:30

Style Invalid Input Fields Globally

Play →
06:57

Form Submit with NgSubmit

02:31

Disable Submit and Safety Check Submissions

07:45

Trigger Validation Messages On Submit

Play →
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

10:36

One-Way Data Binding to NgModel

Play →
#8

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

12:01

Immutable State Updates

Play →
05:12

Immutable State Deletions

#9

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

07:37

Branch off an Observable to Access State

Play →
07:18

Create Data with HttpClient POST

Play →
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()

04:57

Use retryWhen() to Delay Retries

Play →
07:35

Set HttpHeaders and RequestOptions

#10

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

07:48

Lazy-Loading Feature Modules

Play →
06:14

Declarative Navigation with routerLink Directives

06:47

Dynamic Route Params and ActivatedRoute

Play →
08:14

Pass Custom Data to Routed Components

05:20

Programmatic Navigation with Router.navigate()

#11

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

Google Developer Experts Icon

Expert knowledge

Built by Google Developer Experts, there's no better place to learn.

Trophy Icon

All the best practices

Design patterns, battle-tested techniques, architecture and performance.

Stream Icon

Stream or download

Learn at home at your own pace, download for offline viewing.

Code Terminal Icon

Level up your career

Nail that interview or promotion with skills that will set you apart.

StackBlitz Icon

StackBlitz Embeds

Access full source code, and experiment live in the browser.

Slack Icon

Private Slack Group

Exclusive access to our members-only community (7,000+ members).

Angular Basics (v18)

129

/user

189

Save 32%

$

ADD TO CART
MasterCard Icon PayPal Icon VISA Icon Amex Icon

EU customers: price excludes VAT

Angular Kickstart Bundle

199

/user

258

Save 23%

$

ADD TO CART
MasterCard Icon PayPal Icon VISA Icon Amex Icon

EU customers: price excludes VAT

Moneyback Icon

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).

Discount Icon

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.