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. 💥
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…
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?
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.
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…
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.
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…
Hunting for an Angular book that will help you rocket your Angular expertise?
Fortunately there are oodles of options to choose from and stacks of Angular books for beginners, for intermediates and experts.
The best part is that there are some henkity-cool choices — Angular books written by top-notch consultants, ex-Googlers, etc…
Not to mention that some of the books out there even have reviews from the folks on the Angular team.
But sorting through all the options to find the perfect one for YOU can be overwhelming.
That’s why I put together a list of the best Angular books…
Some web apps act like a dying cow.
And would you believe it? These silly-jiggy-jaggy-dancing spinners seem to think they’ll hypnotize us into patiently waiting those extra 6.8 seconds!
It’s like waiting on a turtle for a horse ride.
Say, can’t we do better?
How can we find the HTTP requests in our Angular application that are slowing the show? Once we’ve uncovered the bottle-necks we can fix them and make your HTTP requests zip.
We could then connect our Angular app to a monitoring service like Application Insights and get alerts for turtle-performance.
Why just imagine it! About the…
Why is it such common scenario?
The project you’re sweating over is becoming a smashing success and you’re ready to be done… but all of a sudden at the last minute there’s this change to that form that must happen NOW!
Sigh. 😿
And the demands of your boss or client are clutching you tighter and tighter.
These kinds of scenarios are way too common. So how about a proactive approach that will allow us to dynamically render an Angular form? And make our form roll with the punches that way we can take it easy?
How about we build…