How to apply Angular's latest router feature to dramatically simplify your code — When building Angular apps it's good practice to update the title of the tab on every successful navigation. Adding a page title improves accessibility and user experience. So far, you had to build this feature yourself, however, in Angular 14, this feature is provided by the framework. Let’s take a…

Explore alternate approaches to the deprecated::ng-deep Angular API to avoid legacy code and hard to debug side effects — Style encapsulation is one of many great Angular features. Style encapsulation ensures that component styles don’t leak out and affect the rest of the page.

How to configure an astonishing IDE in less than 5 minutes — VS Code has become the defacto standard editor for many frontend developers. One of the most extraordinary things about VS code is that it's extendable. Countless plugins help improve your development experience. But, precisely, this insane amount of plugins makes it hard to configure your VS code the right way…

How to generate, bootstrap, and lazy load Angular standalone components. — In version 14, Angular will release an impressive new feature named standalone components. Standalone components allow us to write Angular applications without NgModules. Why standalone components? Standalone components means no NgModules. NgModules are often confusing for new Angular developers. It’s an additional Angular-specific concept and there’s often confusion between Angular…

Explore all possible approaches to style projected content as well as their advantages and downsides. — ng-content is an important concept to create reusable and flexible components. With the help of ng-content content can be projected by a parent component into a predefined slot. In some cases, you want to apply some styles to the projected content. It doesn’t sound too hard. Does it? Well, it’s…

best practices, anti-patterns, ng-deep, global styles, mixins, CSS vars, and CSS part, all covered in one article! — Angular is inspired by the core concepts of web components. Therefore it uses components and the core ideas of Shadow DOM. For historical reasons, by default, Angular provides its own implementation of Shadow DOM. However, we can still use the encapsulation property on the components class decorator to switch to…

In Angular, components styles can be encapsulated. There are three different encapsulation strategies available. None, Emulated and ShadowDom. None is probably the least interesting. It just disables encapsulation completely. But what is the difference between Emulated and ShadowDom?Let’s find out! What is Shadow DOM? Before we dive into the differences between encapsulation Emulated and…

My tips on how to create a creative and productive environment at home — Home office doesn't work. How many times have I heard that phrase from a project manager? No, we don't trust you if you work from home and therefore we expect you in the office to see you working is what they meant. I am aware that there are jobs and…

How to set up a perfect code editor in less than 10 minutes — As developers, we spent countless hours reading and writing code. Usually, we do that with an integrated development environment. We spend a major amount of our time looking at the IDE, so why not take 10 minutes to configure our IDE to look astonishing? In this blog post, I share…