Disclaimer and Introduction

The first time I was introduced to Angular, I watched some articles and videos of the framework and now coming back to them seems a little odd. I find it strange that most resources for beginners out there are too.. oversimplified and don’t give an idea on what is best practice and real project advice.

That’s why a lot of people entering in the field with this framework are a little surprised on how actual Angular looks like.. and Angular could be very beautiful and under-appreciated in my personal opinion.

But I want to put the disclaimer here because what I consider a good practice, another developer could have another opinion.

In fact, I could say that this article is also a reference to myself and the way I prefer to handle the framework.

This article by any means is not a complete guide.

THIS IS NOT A TUTORIAL OR LEARNING MATERIAL, BUT A GUIDANCE ON WHAT IS IMPORTANT AND SHOULD BE LEARNED!

With that clear, let’s start!

Folder structure

I have an article on the subject.

My preferred way to structure the project is by feature based structure.

Every logically separated functionality / feature should be in its own folder with subcomponents, subservices and pipes/directives.

Dividing the logic means easier maintainability, navigating and easier developing flow.

Shared logic could be extracted to another module / stand alone components /.

You can read the article here:

HTML templates

This topic is very connected to the second one I am going to talk about Observables and RxJS.

In my templates I really love to use *ngIf and *ngTemplateOutlet directives. I usually assign variables in the templates with the async pipe and use the object directly.

I am subscribing and unsubscribing in the template.

That is something I usually don’t like in the beginner articles. Although http requests don’t require unsubscribing by default, not mentioning at all unsubscribing itself is kind of problematic.

I know it’s a complex topic and not something that could be taught in 5 minutes, but people should at least mention it.

Another thing to mention is to extract what could be extracted in pipes and directives.

I usually use pure for specific transformation.

An example could be a filter pipe.

Let’s give the overview here:

RxJS and TS files

Learning to think declaratively is key here!

When I approach a problem, I always consider what is my entry point for the screen. And I plan everything in Observables in advance.

Since I have an article on that topic as well, I am not going to dive a lot here.

The plan is simple - use declarative approach as much as possible. I usually extract more complex logic in the service and use it “declaratively” in the Ts file.

Learning RxJS is one of the best single things you can use.

To be honest, I have found myself in a situation where I implement RxJS with other frameworks. It's just an incredible library!

Preparing the correct data with RxJS pipes and passing it to the template with custom made pipes makes Angular very beautiful.

The article about Observables could be found here:

Change Detection Strategy

When I create a component, the first thing I do is change the change detection strategy.

OnPush is my default way.

Since in Angular, the change detection is very aggressive, we are provided with a way to limit the conditions on which it is run.

Using OnPush strategy with RxJS and pure pipes means insanely optimized applications.

Interceptors

What is an Angular application without HTTP requests?

In Angular, interceptors allow us to modify the outgoing request, handle errors, add headers and transform the response before it reaches the application.

I love it for catching errors and handling logic there.

If you find yourself in a situation where you want to send specific information with every request, maybe you need that.

It could be used perfectly for transforming data as well.

Conclusion

I love this framework. The more I study it, the more I understand how a proper front end should be handled.

I have worked with other frameworks and when it comes to serious applications, Angular is the only choice for me. Not React, not Vue..

For something small maybe Svelte, but Angular is insane!

Learning more of the concepts above is a great starting point for becoming great in Angular.

Use it as a guide and jumping point to learning resources.

Thanks for reading!