Image for post
Image for post

Stop using endless *ngIfs! It’s time to start developing leaner and more maintainable components.

Almost every application has a authorization layer with multiple user roles. Each one of these has different layouts and business rules. Sometimes, these differences are large enough to become unfeasible work only with *ngIfs and ifs.

When you find yourself at a crossroads like that is tempting to create a parent component which has a ‘socket’ that turns component A on and component B off and vice versa. There are solutions more performatic, fine and maintainable than the first one.

First you need to understand dependency injection

Before get along with the code…


Image for post
Image for post

You spend almost 10 times more time reading code than writing it. It’s time to focus on your code’s quality over only making it do what you need it to do.

Clean code still a trending topic even when the homonymous book was published more than a decade ago. And it’s trending because is relevant. In this article, I’ll list some of the rules described on the book. That way, you’ll become a better developer and your team mates occasionally will start following your good example.

A function does one thing

The most efficient way to make maintainable code is stick to this first rule…


Image for post
Image for post

If you don’t understand at least the basics, the 101, the bread and butter of RxJS, you’re leaving a lot of helpers behind. You’re wasting your time and energy! Let me explain:

Angular was grounded in RxJS paradigms and “lifestyle”. You won’t see Promises been handled very often on a file generated by CLI or on Angular documentation, because Observables can do everything Promise could and even more.

To understand that bold statement, we need to differentiate what is a pull system and a push one. A pull systems is when a data consumer determines when it gets new data…


Image for post
Image for post

A quick study about NgDoBootstrap and APP_INITIALIZER

DoBootstrap and APP_INITIALIZER are two deeper features from Angular that isn’t important in the I’m-just-figuring-out-how-to-do-anything-here steps, but as soon as you start to make more decisions and want to polish your application, you could you those concepts as a more efficient software and leaner code.

To not put the cart before the horse, let me explain what bootstrapping means in programming, mainly is a sequence of actions which are essential to it, so, the application can work properly. In Angular context, all application bootstrapping is centered at root NgModule, named AppModule by default. You can see it at the @NgModule…


Image for post
Image for post

First of all, I tried to be the more Angular vanilla as possible, so, the only dependency on this feature is ngx-bootstrap.

To elucidate the concepts and techniques used, let me explain briefly: first we need a service to manage all request upload state including a Subject which register the progress changes. Why a subject and not a simple property? We can subscribe a subject, that way, the progress bar works without any Angular lifecycle besides OnInit where we will subscribe to.

On top of that, we’ll create a dumb component so it can be more cohesive and practical on…


Image for post
Image for post

What is Infinite Scroll?

If you got here, I’m sure you already know what Infinite Scroll is, but as a polite Medium author I indeed will explain it. Infinite Scroll is a technique mostly used at social networking sites lowering the interaction cost in relation to paginated pages, in other words, users navigates over a massive chunk of content instead of content divided on smaller chunks. …

Gustavo Veloso

Problem solver since 2017

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store