Drag-n-drop in Angular as Observable

Observables are really fantastic and I learned to love them. The concept may be intimidating at first, especially the whole RxJS landscape. But it definitely pays off. Implementing drag and drop using Observables is actually quite simple and super handy. Here is my implementation. I also write for my future self, to save myself time. …

Jest vs “import statement outside a module”

Jest can be very helpful framework when testing your application. Until it isn’t. Sometimes it gets in the way, and to configure it properly can be quite tricky. Problematic use case So, you have just learned that it is better to use specific imports instead of the { destruct } syntatx. Why? Because it makes …

Do not throw Error in constructors

Suppose that you need to instantiate a class, which takes some dependencies as parameters in constructor. I am mostly using Angular, so those dependencies are some injectable services in my case. Something like this: What do you think will happen if you try to instantiate this class? What will happen with that Error? How will …

Problem with NGCC

NGCC stands for Angular Compatibility Compiler, which recompiles various npm packages to Ivy format. Most of the time it “just works”, expect when it does not. There are configuration options for ngcc, which you can specify in ngcc.config.js file in root folder of your project. But sometimes this seems not enough. Sometimes the same code …

Debugging NestJS app in NRWL NX workspace

Debugging can save you ton of time. But sometimes to set up debugging configuration correctly can be a nightmare. There are several common gotchas which may trick you. Code is in Typescript, but NodeJS in debugger does not understand its syntax. You use combination of .ts and .js files with import or export statement Debugger …

Working with Angular i18n inside NRWL NX workspace

Angular v10 has great support for localization using the i18n attributes. I will not describe it, because that is already described in detail on official Angual site. What I found missing was how to integrate it with NRWL NX approach. Problems encountered For starters, the workspace.json has different structure than angular.json, so some parts are …

Angular animation trap

Animations in Angular.io are a nice feature. But their error messages can be quite misleading. When you forgot to define the animations array in the @Component annotation, then Angular will report following error message: “Found the synthetic property @detailExpand. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application That is clearly misleading, because the error …

Input fields with dynamic width in Angular

Have you ever typed text into small input field and did not see the whole text at once? It can be really frustrating. Textareas can be natively resized in most browsers today, but plain old input fields can not. To address this I have written small Angular directive. See it in action in the video …

Useful Typescript / Angular code snippets

Below are some useful code snippets I wrote. I use them as a reference, because they when I occasionally need them, I never know them by heart. Hope this will help you too. If so, let me know in the comments. Convert enum to array Set all controls in Angular dynamic form to readonly Get …

Delayed hover event in Angular

Use case: Display tooltip only after user has been hovering for some time already. If he leaves sooner, then do not display anything. Technologies Angular, RxJs, Ngx UntilDestroy Authors David Votrubec and Luďek Cakl Implementation The logic behind is that we combine two streams. One stream is for the mouseenter event, and the other is …