Introduction When Angular was released in 2016, the only solution they had for creating forms was template-driven forms. A principle where directives in the template were used to create forms. In Angular 4 the core team introduced a new concept called reactive forms. It was a new way with a reactive API that exposed RxJS Observables when we wanted them. Pretty soon everyone was agreeing that reactive forms were the new way to go. The new best practice. Template-driven forms were even frowned upon and I have been advising companies to use Reactive forms for years. In Reactive forms, we would us ..read more

This article is a follow-up article of these previous articles (newest to oldest): Evolving from the SIP principle towards Observable state Observable component state in Angular Observable state for ui components in Angular Reactive input state for Angular ViewModels Reactive ViewModels for Ui components in Angular I also gave a talk at ng-be where I introduced everything in 25 minutes. You might want to check out this video before continuing. In this article, we will tackle ObservableState. We will discuss the API and why we wrote something like that. We will also cover some use cases on wh ..read more

Best Practices are mostly a matter of personal preference and can be countered by people with different opinions. That being said, the Best Practices in this article are based on a decade of working with Single Page applications and managing state. I have been on more than 100 Angular projects in the last 7 years and I have seen tons of different approaches and learned the mindset of hundreds and hundreds of different professionals. I have done flux, redux, state models, @ngrx/store, Akita, Ngxs, BehaviorSubjects, ObservableState, Signals… I have seen a lot of things and this article is about ..read more

What are Angular HostListeners? Angular HostListeners are decorators that we can use to attach an event listener to a certain component. In this example, we create an event listener where we listen to any click event happening on a HelloComponent. @Component({ ... }) export class HelloComponent { @HostListener('click', ['$event']) public clicked(e: MouseEvent): void { console.log('Host got clicked', e); } } In the previous example when we would click on this HelloComponent the console would log something like Host got clicked, PointerEvent{isTrusted: true} Usually ..read more

A few weeks ago we did a Twitter space together with Chau Tran. It was hosted by Daniel Glejzner and Pawel Kubiak We want to thank each of these people for what they are doing for the community. You guys are truly awesome!! You can find the recording of that space here: ? Just hosted incredible #Angular Job Interview space! Guests: GDE @Nartc1410 and @brechtbilliet - co-host @pawelkubiakdev! ? A gold mine of knowledge for those seeking Angular jobs or looking to hire engineers! We covered in-depth Angular topics!https://t.co/wKH7d8VRNe — Daniel Glejzner (@DanielGlejzner) April 7, 2023 In t ..read more

Angular Change Detection is hard, and there is not that much documentation about it. I even had to reverse-engineer the Angular source code to know what was going on, so I decided to write a book about it. You can check it here Bartosz WasiLew challenged us to make a video in under 5 minutes so we did. Before we present the video we like to list a few articles where we either explain Angular Change Detection or optimise for Change Detection: Angular Change Detection Cheat Sheet explained Angular performant drag and drop with RxJS Angular Change Detection Quiz explained Angular expressionhasch ..read more

Simplified Courses had the opportunity to give a talk at the awesome Belgian ng-be Angular conference. The topic of our choice was “Reactive Patterns in Angular Enterprise Solutions” where we tackle one of the biggest issues when it comes to Angular development. We tackled the fact that RxJS code can be pretty darn hard! Understanding RxJS as a technology is one thing. But code written with RxJS can be very complex. We have: Mapping operators Combination operators Different types of subjects Multicasting to avoid memory leaks Error handling In this talk, we will start from a template that co ..read more

This article is a follow-up article of the previous articles (newest to oldest): Evolving from the SIP principle towards Observable state Observable component state in Angular Observable state for ui components in Angular Reactive input state for Angular ViewModels Reactive ViewModels for Ui components in Angular In this article, we will tackle reusable global Observable state in Angular. Why not use a state management framework? Why aren’t we advocating for frameworks like @ngrx/store or ngxs? Because at Simplified Courses we are big believers in the KISS principle. We like to avoid: Boile ..read more

Lately, Twitter is blowing up when it comes to Angular Signals. A Signal is a reactive primitive that will be used to simplify reactive programming in Angular. Currently, most of the applications running in production heavily rely on RxJS or state management frameworks to achieve reactivity. Some developers even store all of the local component state and server responses in a store, to ensure a consistent way of reactive communication. This way the store becomes a communication tool and blocks direct access to the responses of our XHR calls from within our components. This results in boilerpla ..read more

Intro On our legacy blog (brecht.io) we wrote an article about using the SIP principle in Angular. The SIP principle is a reactive pattern that helps us to think reactively in technologies like Angular and RxJS. It results in us splitting up all the Observables into 3 different groups of Observables: S: Source Observables: The Observables that will emit based on user interaction. In other words, the events in our application we want to listen to. I: Intermediate Observables: These Observables will get calculated by listening to the source Observables and will be used to create our presentatio ..read more