The Angular CLI.

Just exactly what is it? And what is its purpose?

Maybe a better question is what can you do with the Angular CLI?

This Angular CLI guide will teach you everything you need to know about the Angular CLI. We’re going to cover how to install the Angular CLI, the different Angular CLI versions, how to use the Angular CLI to create components and the whole bang.

Yes buddy! I’m going to show you how to grab the Angular CLI by the horns and make it obey your orders. 🥳

What is the Angular CLI?

The Angular CLI is a tool that…

Angular pipes hardly ever cause performance problems worth bating an eye at.

And just to make sure you’re aware, it’s much more common that an Angular application’s performance can be drastically improved by tweaking change detection options or making sure that ngFor is using a trackBy function.

But in any case, if you’re looking to shave a few milli-seconds and squeeze everything you can and pull all the levers you got to make your Angular application perform, then this is how to make your Angular pipes run really fast. 💥

Before we dive to deep let’s clarify a few things.

None of what I’m going to teach you in this…

Angular has this cool thing called Zone.js that triggers change detection anytime a DOM event occurs.

And in case you weren’t aware, Zone.js is the engine that powers an Angular application. If you want to learn more about how it works, I explain that in this article.

Angular also has another thumpin-cool feature known as ngFor. Just hand it an array of information to render and watch it whiz! 😏

I mean… it’s a nifty Angular feature… that was built to make you coooooh and aaaaah… until you start abusing it. And then it SNAPS and POPS and blows up…

Need to create a generic repository for your .NET Core web API project?

There are oodles of design patterns.

Some of these design patterns are floating about on antique blogs full of mad logic. They’re ridiculous enough to make the entire modern cloud rub its belly in roars of laughter.

Other design patterns are worth their dough.

And one of these is the repository pattern.

Of all the design patterns that I’ve studied and used when creating .NET Core applications, the repository pattern has never failed me.

And I’m tickled that you’re here to learn how to create and use a generic repository.

Did you know that Angular change detection has limits?

And if you’re not wise, it’ll get sluggish and sour and make you look like a bad developer.

So how about we pop the hood on Angular’s engine?

And learn how to detect and fix change detection issues?

How does Angular Change Detection work?

Angular uses a library widely known as Zone.js to detect DOM events. These DOM events are mouse clicks, keyboard press and so forth.

When Zone.js detects a DOM event, it checks the data bindings and updates the incorrect ones that way the data show to the user is always fresh.

And that is…

Any Angular developer worth their dough uses the power of Typescript to create data models for their HTTP requests.

What do I mean?

I mean that instead of doing this…

getAllApps(): Observable<any[]> { 
   return this.httpClient.get<any[]>(this.appsUrl); 
}

…you do something like this. Where App is a data model that you cast HTTP responses too.

getAllApps(): Observable<App[]> { 
   return this.httpClient.get<App[]>(this.appsUrl); 
}

In fact, the Angular docs has an entire section about using typed responses. You can check it out here.

Introducing the problem

So, you’ve got a small project with a few interfaces or models that you cast too. Not bad, my friend.

But as…

Want a savvy understanding about lazy-loaded modules and preloading strategies?

Here’s the complete guide that will teach you everything you need to know about Angular’s preloading strategies.

Angular has this hunky-dory-whiz-bang-cool feature called the Angular module.

But what is it?

Angular modules are chunks of code that can be imported into various parts of your application. A module can contain grouped pieces of components, services and other functionality, each focused on a feature area, specific domain, workflow, etc…

And why are they cool?

They’re cool because Angular modules bring modular super-powers to web applications. And to the best of my…

Ghost animations and Angular.

So… how do you create and use a Ghost animation in your Angular application?

In this article, I’m going to give you the code, demos, screenshots and whole shebang on how to create a basic Ghost table animation that you can adapt for your Angular project.

Creating the Ghost Table

With the help of Angular’s amazing CLI we’ll create a new component called ghost-table. Here’s how you do it.

ng generate component ghost-table

Give it a few seconds to whirl its magic.

Important Note To keep this article as simple as possible I’ve opted to use an Angular component. However, I do not recommend…