Angular 12 – Complete Beginner’s Guide 2021 [Step by Step]

Front End Web Development, Component, Service, Route, Module, Decorator, HTTPClient, Typescript, Angular.js successor


The course is created to learn Angular 12 and the detailed planning needed for creating an Angular application. Which will help you to create applications from scratch & maintainable for increasing the scale of it as well. The course covers the below things.

  • Planning for angular application
  • Components
  • Services & Dependency Injection
  • Directives
  • Modules
  • Traditional Vs Modern Approach
  • DB Setup
  • Data Binding
  • File Structure
  • Pipes
  • Course project
  • Best Practices
  • and many more

How learning will be simpler & clear with Project?

I tried to introduce all concepts by giving first a practical solution & then understanding in depth. I hope it will help you to know the concepts better. The complete course project is made available in resource sections so if you have some issues in implementation, you can refer to that.

In addition to this also discussed a lot about advantages, disadvantages and alternate ways for same solutions. Which will help you to understand in more detail with a broader perspective.

How you can clarify your doughts while going through the course

Feel free to visit the Questions and Answers sections, If it is not answering your question, write your question in the question and answer section so that we can assist you in all possible ways.

I wish you the best of luck for your upcoming Angular learning journey with me.


Overall a Good course.. But It would have been better if the instructor could speak a bit louder or get a good quality mic. There is a lot of BG Noise. Otherwise a good course. Thanks Navin.

It’s good course. He is trying do his best. If you have some Angular knowledge (very basic), take this course, it will help you a lot. But, there is no challenge this course like after showing any section and tell us to do another section which exactly match with that coding experience. And, that’s why I gave 4.5 star. But overall, its a nice course. Thanks a lot.

Muy buena elección. Parece un curso completo y muy didáctico, enseñar desde la práctica siempre es la mejor forma de enseñar.

I can not understand the 40th part. Why didn’t you use id in Post model? Won’t it work? I think you are making it complex.

Everything was good.. But one most important thing, in any angular application is making use of observables like subject, behavioral subject, which are missing in this course and also you haven’t mentioned anything about sign up option and log in which is most desirable. Please make sure that you add those things too in your course to have a better learning experience.

Very informative, knowledgeable and easy to understand . All over the good course for learn Angular .

The Concepts explained by Mr. Navin Bala Sir in this learning course and hands-on experience with a project was really Outstanding !!!!! He has a great interactive way of explain concepts & he promptly solves any query/doubts through-out the course . Indeed a great Teacher.!!!

Great course! The content was easy to understand and the presenter explained things very well. The only nitpick I have is that authentication wasn’t implemented. But other than that, great course!

Yes, before even starting the project the instructor took his time to explain all the necessary components and modules as if teaching beginners and made it so simple to understand the coreconcept. This is great learning experience.

Great mentor i can suggest for learning Angular, Explaining very great manner. great learning experience with mentor recommended for all.

Each and every concepts found great clear explanation. Thanks a lots. I never thought I will be this much soon be learning Angular.





Understanding Angular

SPA – Single Page Application

Angular Versions

Understanding Typescript

Setup & Config


Creating First Project

First Project

Understanding File Structure in Detail

Writing Hello World App

String Interpolation

Creating Languages App


Installation of Extensions [Optional but very Useful]

Adding New Language

[*ngFor] Displaying List of Languages

[*ngIf] Displaying Conditional Message

Delete First Element

Understanding Course Project

Let’s Start

Understanding Components

Finalizing Components Needed For Project

Creating Course Project

Create Project

Adding Header Component

Adding Remaining Components

Downloading and Running Project

Working On Header Component

Placing Header Component

Adding Menu

Customizing Menu

Working On Post List Component

Placing Post List Component

Displaying Post Component

Improving Post Component

Creating Post Model

Array of Posts Objects

Use of @Input() Decorator

Displaying Post With Input Data

@Input() In Depth

Introducing Services


Connecting Component With Service

Enhancing Post Service

this Keyword [Knowledge]

Getting Post List From Service

Delete Post

Identifying Bug In Delete Post

Solving Delete Post Bug

Introducing Routing


Adding New Routes

Working With routerLink

Redirecting Route

Form Handing

Designing Form

Need Of Form Handling

Connecting With FormGroup

FormGroup Object In Depth


Restricting Form Submission

Applying CSS For Validation Errors

Adding Post


Programmatic Navigation

Adding Image Preview [Improvement]

Editing Post, Route Params and More


Adding Param for Route

Reading Route Param

Displaying Post Data to Edit


Adding editMode

Adding New Feature [Like Post]


Displaying Likes

Adding Like Button

Introducing Backend


Adding Save and Fetch Option

Planning Backend Connectivity Structure

Adding Back End Service

Working On saveData()

Firebase – Database

Creating Firebase Database

RESTApi Communication

Sending Request

Working on Save option in Header


Getting Data From Back-end

Working On Fetch Option in Header

Next Challenge

Adding New Service Method In Post Service


Automating Data Fetch

Understanding In Detail

Understanding Component In Detail

Understanding Module In Detail

Understanding Pipe

Helpful Resourses

Official Docs For Older Versions

Source link

Check Today's 30+ Free Courses on Telegram!

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock