Angular Tutorial for Beginners - Learn Angular 14 Frontend Development

In this 2-hour-long Angular 14 Tutorial we will cover the most important topics about software development using Angular. During this Angular course, we will create a task-list application which is also using an Angular Material component. If you are searching for a great video to get started with Angular, you have come to the right place.

While developing the course application you will learn about Angular components, angular modules, angular services and even about angular routing. This Angular tutorial will get you started in frontend development. Enjoy!

We'll make sure to make a Developer out of you in no time!

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

So, what is Angular?
Angular is a platform for building mobile and desktop web applications.
It is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.
Build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile, and native desktop.

What is TypeScript?
TypeScript is JavaScript with syntax for types.
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.
TypeScript is a free and open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. It is designed for the development of large applications and transpiles to JavaScript.

Make sure to check out the video to learn everything about it!

#coding #angular #typescript

[joaovictormsantos]

Awesome, thank you, you are straight to the point, that's what is needed, keep doing it!

[Balawi]

This is the best tutorial for Angular beginners I've seen so far, straight to the point!, thank you for sharing this course.

[ecommercewithjay]

Just finished watching this tutorial and thank you. Very helpful and will continue by creating small micro apps in angularJS while reading the API docs for angularJS and typescript.

[shantkumarbiradar]

One of the best angular tutorial for beginners. Thank you :)

[btvbharat]

Thank you so much for sharing your experience with us. God bless you .

[Karthikng]

Thanks a lot, this is a good kickstart.

[alittlegreyhair]

Thank you for your hard work creating the Angular tutorial. Clearly explained throughout. I have made a ton of notes!

[youyouRio]

Great ! Awesome tutorial for beginners

[natlinux]

Hallo Jannick,
mal wieder ein super Tutorial von dem ich, wie gewohnt, viel gelernt haben. Gerne mehr davon. Was ich nicht verstanden habe, warum sollte ich mehrerer Module haben? Bzw. sollte ich für jede Komponente ein Modul haben? Ich nutze zur Zeit das Tamplate von VisualStudio 2022 dort, ist alles auch das Routing in der App-Modul.ts.
Währe schön wenn du Zeit findest dies kurz zu erklären. Vielen Dank dafür.

[tutorialsEU]

In this 2-hour-long Angular 14 Tutorial we will cover the most important topics about software development using Angular. During this Angular course, we will create a task-list application which is also using an Angular Material component. If you are searching for a great video to get started with Angular, you have come to the right place.

While developing the course application you will learn about Angular components, angular modules, angular services and even about angular routing. This Angular tutorial will get you started in frontend development. Enjoy!

We'll make sure to make a Developer out of you in no time!

[illumi]

More of angular projects and/or .net projects please

[SmartP]

I want to learn Angular as frontend to an ecommerce app I want to create with spring boot

[yogeshpoonia]

Can you make a full long playlist for Angular

[tkanel]

Something is wrong with your site's login. It doesn't accept pass and doesn't send recover emails today.

[robertkoch]

Danke fürs Tutorial! Du bist Deutscher oder? Den deutschen Akzent beim Englisch sprechen kann man vor einem anderen Deutschen einfach nicht verstecken 🤣

[jacoa.imthorn]

Try to count the number of times this guy says "for sure" in this video. ;-)

[kamal.hussain]

@tutorialsEU, I am stuck at the Remove Task activity, getting this error:

Error: - error TS7006: Parameter 'task' implicitly has an 'any' type.

26 this.tasks= this.tasks.filter(task=> task != existingTask)

My code appears to be same as what I see in the video, so not sure how to fix it.
Could you help guide about this? and also if you could share the source code as well.