Passing data into components with @Input | Ultimate Courses

Autoplay
Autocomplete

Previous Next and Complete

Angular Fundamentals

Architecture, setup, source files

Angular Architecture overview 04:54
Setup instructions
Source files
v4-v6 Changelog

ES5 to ES6 and TypeScript refresher

Refresher video overview
Classes, Spread operator, Arrow functions, Immutability 10:24
Understanding import and exports 02:33

Getting started

Installing our project 01:35
First component with @Component 06:45
Root module with @NgModule 05:33
Bootstrapping Angular 02:32

Template fundamentals

Interpolation and expressions 03:28
Property binding 05:27
Event binding 06:07
Two-way databinding 04:39
Template #ref variables 02:28

Rendering flows

ngIf, * syntax and <ng-template> 06:11
ngFor and iterating collections 07:42
ngClass and className bindings 05:47
ngStyle and style bindings 03:28
Pipes for data transformation 08:08
Safe navigation operator 05:23

Component Architecture and Feature Modules

Smart and dumb components overview 01:41
One-way dataflow overview 03:30
Feature modules with @NgModule 04:07
Creating a container (smart) component 11:11
ngOnInit lifecycle hook 02:51
Presentational (dumb) components 06:22
Passing data into components with @Input 06:27
Dynamic @Input values with *ngFor 05:29
Emitting changes with @Output and EventEmitter 15:58
Immutable state changes 06:21
ngOnChanges lifecycle hook 07:05

Services, Http and Observables

Data Services and Dependency Injection 08:18
Understanding @Injectable 04:13
Http data fetching with Observables 09:13
Http put, delete with immutable state 08:13
Custom Headers and RequestOptions 02:26
Http Promises alternative 02:25
Observable.catch error handling 01:58

Template-driven Forms, Inputs and Validation

Forms container component 08:57
Form stateless component 08:03
ngForm and ngModel 06:37
Binding to radio buttons 08:26
Binding to checkboxes 02:06
<select> option rendering, and ngValue 09:59
Form validation and error states 09:55
Dynamically disabling submit 01:51
ngSubmit and stateless @Output 07:13

Component Routing

Base href and RouterModule 01:03
Root module routes and outlet 05:08
Wildcard routes for 404 handling 02:00
Understanding routerLink 02:14
Styling active routes 04:48
Dynamic navigation with ngFor 03:29
Feature-module routes with forChild() 04:02
Child and dynamic routes 03:01
Route params, data-fetching with switchMap 05:41
Imperative routing API 07:35
Hash location strategy 02:00
Applying redirects 00:56

Finished

Congratulations!

Passing data into components with @Input

Todd Motto Google Developer Expert

Join us on Slack!