Angular 14 Tutorial - Building a Task-List Application with Angular Material

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Embark on a comprehensive 2-hour Angular 14 tutorial designed for beginners, covering essential topics in frontend development. Create a task-list application using Angular Material components while learning about Angular components, modules, services, and routing. Explore TypeScript fundamentals, one-way and two-way data binding, event handling, and local references. Dive into creating and styling custom components, implementing Angular modules, and integrating Angular Material. Master Angular routing, including parameterized routes, to build a fully functional web application. By the end of this tutorial, gain the skills to develop dynamic and responsive user interfaces using Angular 14.

Syllabus

00:00 - Getting started with Angular 14
02:20 - Setup Angular Development Environment
06:51 - Additional learning resources
08:58 - Creating a new Angular project
11:22 - Starting your Angular application
13:58 - Discover the template and clean the component
17:52 - Create basic UI for the task-list application
26:04 - TypeScript tutorial
32:30 - What is an angular component
34:20 - Angular one-way data binding
36:33 - Using Angular loop to display data
41:42 - Angular event binding
45:17 - Local references
48:05 - Adding a new task
51:42 - Removing a task
56:50 - Mark task as done
58:54 - Create an angular/typescript class
1:05:12 - Single class binding
- 1:19:19 Undoing a done task
1:19:19 - Creating an Angular component
1:27:10 - Adding a header and introduction to Angular modules
1:31:36 - Creating an Angular module
1:35:30 - Create a calendar module and component
1:38:25 - Add Angular material package
1:42:42 - Style Angular Material calendar
1:50:28 - Angular routing
1:57:14 - Angular two-way data binding
1:59:51 - Parameterized routes
02:04:38 - Next steps