Angular embraces RxJS observables. Major features like the router, HTTP client, and reactive forms expose interfaces that either consume or return RxJS observables. Angular schematics and builders can handle observables to perform asynchronous operations. The common package delivers the famous
AsyncPipe for extracting values from observables in component templates. There is even a section dedicated to RxJS and observables in the documentation.
Considering everything, Angular has probably the most comprehensive integration with RxJS observables. Yet, it gets a little complicated once you observe the emitted values in your component class. Let’s create a component that refers to route data and params…
ABP Framework Angular UI has some built-in modules, each of which is a separate npm package. Every package has an exported module that can be loaded by the router. When loaded, these modules introduce several pages to the application via child routes.
To allow a degree of customization, we have an extensibility system, and this requires configuration. So, a question arises: How can we configure modules loaded by
loadChildren? It may look like a requirement specific to our use case, but I believe the method described here may help other subjects.
Here is a mere module that attaches a simple…
The new version, v10, of Angular has been published only hours ago and announced by this blog post. Although it may not appear as impactful as v9 (with Ivy and all), this release displays Angular team’s commitment to keep Angular up-to-date and relevant.
We found this very exciting and the timing was just right, because we are about to release ABP v3.0! So, we jumped into the details of what changed and how to migrate. Here is what we found.
Angular 9 was released with TypeScript 3.7 support. Soon TypeScript 3.8 was released and Angular v9.1 supported it. Not long…
Lately, we have started working on v3.0 of ABP Framework and our ultimate goal as the frontend team is to introduce solutions that improve developer experience. In this context, one of the things we are working on is migrating the current grid in Angular to the feature-rich ngx-datatable. Nevertheless, when we tried to implement it in the project, we have realized that the amount of code duplicated in each CRUD page was troublesome.
We have a ListService which makes it easier to work with remote pagination and sorting. It is a core feature and we are planning to keep…
Design patterns are proven, practical, and reusable solutions fit for tackling specific problems in software development. They not only help us avoid pitfalls in organizing our applications, but also provide a shared glossary to describe our implementation and understand each other as fellow developers. There are dozens of patterns already discovered and I am pretty sure you are using at least some of them, even if you do not identify them as a design pattern (Hello constructor pattern 👋).
It takes time to fully grasp concepts such as dumb/smart/stateful/stateless components, unidirectional data flow, content projection, views and DOM manipulation, and dependency injection in Angular. All that and probably some further information is necessary to build a consistent, scalable, and flexible component architecture. Then, just as you dig deeper and put what you learn into use, new questions and requirements arise. Should I really set this style up through an input property? …
Data-binding in Angular is awesome. Really. Just decorate a public property — or setter for that matter — on a component class with
@Input and after a quick
<app-child [prop]="parentProp"></app-child>, voila! The property on the parent component is bound and ready to consume at will. Emitting events are just as simple: Define an
EventEmitter decorate it with
@Output and emit it during an internal execution. So simple, so beautiful... Implementing two-way binding is a little more complicated…
I have been working on Angular (not AngularJS, not anymore) since it was at developer preview and have learnt a bit about best practices for that framework throughout all those years. It is quite a long list, arguably too long to cover in a single blog post. Thus, for my first article on Medium, I picked a single best practice that I find easiest to take on and most rewarding when applied: Extending Angular components from —kind of — abstract classes. This could also be one of the most underused/rated features of Angular, considering it is an object-oriented framework.