AngularNYC | AngularNYC - Firebase-Angular-Material stack - Nir Kaufman - 05/31/2017 @Angularnyc | Uploaded July 2017 | Updated October 2024, 4 hours ago.
FAM stands for Firebase, Angular & Material Design, all you need to bring your next idea from scratch to success in no time! During this session, we will walk through each layer of this stack by live coding a simple app all the way to deployment. Get ready for your next stack!
Nir is GDE (Google Developer Expert) in web technologies and Angular, worldwide conference speaker, workshop mentor, Angular evangelist, and tech community leader. He works as Head of the Angular department at 500Tech, a top front-end consultancy based in Tel Aviv and NYC.
LEVEL - BEGINNER
LIVE DEMO
goo.gl/sdpJzE
CODE
github.com/angular-reactive-forms-book
CONTENTS
0:05 - INTRO
1:09 - SLIDES
3:51 - ANGULAR CLI
5:34 - ANGULAR MATERIAL
5:44 - Overview of Angular material
6:14 - Setup Angular material
6:24 - Install Angular material and animations
9:23 - Import animations and modules
10:09 - Install toolbar
11:39 - BUILDING UI
12:38 - Tweaking CLI defaults
14:22 - Overview of webstorm IDE integration with Angular CLI
15:05 - Generating module and components
16:45 - Setup routes
18:11 - Webstorm integration question
18:52 - Router outlet
19:17 - Test router outlets
20:00 - Building forms
21:07 - Missing module import common error
22:06 - Tweaking inputs look
24:17 - Material UI responsiveness question
25:00 - Finishing Register component
27:45 - FIREBASE QUICKSTART
29:00 - Firebase config object
23:30 - Install Firebase SDK
30:10 - Question: why don't we use Angular Fire
30:49 - Question: current Angular Fire version and Firebase security
31:52 - Overview of Firebase
33:00 - Starting building auth with Firebase
34:00 - Advanced auth
35:00 - Auth UI part
36:16 - Register UI part
36:48 - Question: where email and username params come from
37:17 - Send password reset email
38:28 - Test service
38:52 - ANGULAR FORMS
38:56 - Overview of Angular form types
39:36 - Implementing Reactive form
42:43 - Error: form element has no binding to forms controller instance
43:36 - Implementing binging
45:21 - Angular Reactive Forms book
45:46 - Finishing register form
46:34 - An attempt to create a user
47:16 - Question: use catch() instead of then()
47:47 - Second attempt to create a user
48:20 - Firebase user management
48:41 - Building recover form
50:49 - Test recover form
52:28 - Question: Advantage of using Angular forms over direct model binding
52:58 - Question: How Firebase handles registration with existing email?
54:22 - Adding database functionality
57:29 - Creating new accounts entity
59:42 - Building Accounts List component
1:02:38 - Pulling data from Firebase DB
1:04:33 - Error: can’t iterate Object
1:05:48 - Error: mdIcon is not registered
1:06:49 - Test register functionality
1:07:57 - Event reference overview
1:08:42 - SETUP FIREBASE HOSTING
1:09:29 - Init project
1:12:11 - Deploy project
1:14:32 - Adding new changes to the build
1:15:41- SUMMARY
1:16:00 - Firebase
1:16:44 - Covalent as addition to Angular Material
1:18:35 - Question about Firebase hosting config
1:19:02 - Question: Howto configure https for Firebase hosting
1:20:14 - Question: Howto config environment variables
1:21:38 - Question: what types of Firebase events did the app subscribe to
RESOURCES
Angular Reactive Forms book by Nir Kaufman
leanpub.com/angular-forms
Angular CLI
cli.angular.io
Angular Material 2
material.angular.io
Covalent UI Platform
teradata.github.io/covalent
NOTE
This video is actual for Angular Material 2.0.0-beta.6 Later versions could have breaking changes.
FAM stands for Firebase, Angular & Material Design, all you need to bring your next idea from scratch to success in no time! During this session, we will walk through each layer of this stack by live coding a simple app all the way to deployment. Get ready for your next stack!
Nir is GDE (Google Developer Expert) in web technologies and Angular, worldwide conference speaker, workshop mentor, Angular evangelist, and tech community leader. He works as Head of the Angular department at 500Tech, a top front-end consultancy based in Tel Aviv and NYC.
LEVEL - BEGINNER
LIVE DEMO
goo.gl/sdpJzE
CODE
github.com/angular-reactive-forms-book
CONTENTS
0:05 - INTRO
1:09 - SLIDES
3:51 - ANGULAR CLI
5:34 - ANGULAR MATERIAL
5:44 - Overview of Angular material
6:14 - Setup Angular material
6:24 - Install Angular material and animations
9:23 - Import animations and modules
10:09 - Install toolbar
11:39 - BUILDING UI
12:38 - Tweaking CLI defaults
14:22 - Overview of webstorm IDE integration with Angular CLI
15:05 - Generating module and components
16:45 - Setup routes
18:11 - Webstorm integration question
18:52 - Router outlet
19:17 - Test router outlets
20:00 - Building forms
21:07 - Missing module import common error
22:06 - Tweaking inputs look
24:17 - Material UI responsiveness question
25:00 - Finishing Register component
27:45 - FIREBASE QUICKSTART
29:00 - Firebase config object
23:30 - Install Firebase SDK
30:10 - Question: why don't we use Angular Fire
30:49 - Question: current Angular Fire version and Firebase security
31:52 - Overview of Firebase
33:00 - Starting building auth with Firebase
34:00 - Advanced auth
35:00 - Auth UI part
36:16 - Register UI part
36:48 - Question: where email and username params come from
37:17 - Send password reset email
38:28 - Test service
38:52 - ANGULAR FORMS
38:56 - Overview of Angular form types
39:36 - Implementing Reactive form
42:43 - Error: form element has no binding to forms controller instance
43:36 - Implementing binging
45:21 - Angular Reactive Forms book
45:46 - Finishing register form
46:34 - An attempt to create a user
47:16 - Question: use catch() instead of then()
47:47 - Second attempt to create a user
48:20 - Firebase user management
48:41 - Building recover form
50:49 - Test recover form
52:28 - Question: Advantage of using Angular forms over direct model binding
52:58 - Question: How Firebase handles registration with existing email?
54:22 - Adding database functionality
57:29 - Creating new accounts entity
59:42 - Building Accounts List component
1:02:38 - Pulling data from Firebase DB
1:04:33 - Error: can’t iterate Object
1:05:48 - Error: mdIcon is not registered
1:06:49 - Test register functionality
1:07:57 - Event reference overview
1:08:42 - SETUP FIREBASE HOSTING
1:09:29 - Init project
1:12:11 - Deploy project
1:14:32 - Adding new changes to the build
1:15:41- SUMMARY
1:16:00 - Firebase
1:16:44 - Covalent as addition to Angular Material
1:18:35 - Question about Firebase hosting config
1:19:02 - Question: Howto configure https for Firebase hosting
1:20:14 - Question: Howto config environment variables
1:21:38 - Question: what types of Firebase events did the app subscribe to
RESOURCES
Angular Reactive Forms book by Nir Kaufman
leanpub.com/angular-forms
Angular CLI
cli.angular.io
Angular Material 2
material.angular.io
Covalent UI Platform
teradata.github.io/covalent
NOTE
This video is actual for Angular Material 2.0.0-beta.6 Later versions could have breaking changes.
