Forem: Dzhavat Ushev

Change the position of Command Palette and Quick Inputs panels in VS Code

Dzhavat Ushev — Fri, 07 Feb 2025 14:56:56 +0000

VS Code released the January 2025 (v1.97) release yesterday, and it’s again packed with a lot of good stuff. One small but welcome change is that the position of the Command Palette and Quick Inputs panels can be customized! Who doesn’t love customization, right?

Until now these panels always opened at the top. You can reposition them now. There are a few options:

Top
Center
Custom position

You can set the position via the “Customize Layout” picker in the top bar, or you can open one of the panels and start dragging it around. The new position will persist accross reloads.

Thanks for reading. Hope you learned something new. See you in another post 😊

Downloading the same file 102+ times

Dzhavat Ushev — Wed, 08 Jan 2025 21:23:14 +0000

Have YOU ever tried downloading the same file 102+ times in your favorite browser? Do you know what happens on the 102nd time? 🙃

I do. The answer is ... it depends 😋 It varies between browsers and it’s a bit of a surprise.

Before I show you the screenshots, let me first tell you a short story about how I ended up in the “lets-download-this-file-102-times” rabbit hole so bear with me.

I work as a software developer and one day I got a message from a colleague asking something about a new feature. She sent me a link to an issue. There was a screenshot that caught my attention. It looked very much like the one below.

At the time the file’s name was hardcoded to “Report.zip”. So seeing “Report.zip”, “Report (1).zip” or “Report (42).zip” was to be expected. Instead of a counter, I was suprised to see a timestamp. Where did that come from? It was absolutely not in the code. My colleague didn’t manually add it either. Something was not right. And from here on the rabbit hole got deeper and deeper. 🐰

“A browser setting!” - I thought. It was rulled out quite quickly because she didn’t remember changing any settings. We were looking in Edge because that’s the browser she uses. Besides, such a setting does not exist, I later found out.

“Well, then maybe the browser added it automatically. But at what point?” I started searching on Google, going through different web pages, StackOverflow posts and forums. The more I searched, the more curious I became to figure this out. Then finally - FINALLY - a reply to a Reddit post gave me a pretty strong hint.

But was that still the case? There was only one way to find out. 🚀

Fired up Edge and started downloading.

1, 2, 3, ... 10, ... 42, ... 99 times.

Then something magical 🪄 happened the 102nd time! Instead of bumping a number, Edge added a timestamp 😯 Bingo! 🎉 The mystery was solved. That explained it.

So to make this more scientific, and for the purpose of this post, I decided to repeat the exercise in other browsers. Here are some screenshots.

Edge

Chrome

Firefox

Firefox just continues with bumping the counter. No timestamp here. Also note that there’s no space between the file’s name and the counter in parenthesis, as is the case in Edge/Chrome.

Update 2025-01-14

After publishing this post I got curious about the behaviour in Edge/Chrome. Since both browsers are Chromium-based, which is open source, I could, in theory, just look it up in the code. I didn’t know what to look for. So I asked on Bluesky. Kevin Doyon replied with a link to a method which is responsible for generating a unique filename. Using the “Blame” button at the top of the file revealed where each line of code came from. That led me to this commit which describes why the timestamp is added to the filename.

Seems like this is the end of it. Finally peace 🕊️

What a TIL!

Thanks for reading thus far. Hope you learned something new. See you in another post 😊

P.S. If you want to try it yourself, I’ve prepared a zip with an empty text file. Go ahead and download it. 102 times, of course.

Or you can quickly put together a simple demo by linking to a local file.

<a href="./fancy.zip" download>Download</a>

Creating an empty commit in Git

Dzhavat Ushev — Sun, 31 Mar 2024 14:00:00 +0000

Does this sounds familiar - a Continuous integration (CI) pipeline is stuck and you need to push a new commit to restart it?

So now you’re looking for a place where you can make a dummy change like deleting/adding an empty line, adding/deleting a dot in a comment - any change, so you can make a new commit and push it upstream.

“There must be a way to create empty commits” you tell yourself but you’re too busy looking for a place to make that dummy change instead of searching for a solution to your problem.

Well, there is a better way!

Git allows you to create an empty commit by simply adding the --allow-empty flag to the commig command. Here 👇

git commit -m "chore: empty commit" --allow-empty

Your job is done. 🎉

Thanks for reading. See you in the next post 😎

Thanks to my colleague Morten Hansen for showing me this tip.

Photo by Kate Trysh on Unsplash

Incremental migration to Angular’s new control flow syntax

Dzhavat Ushev — Wed, 28 Feb 2024 20:49:02 +0000

Angular v17 introduced a new control flow syntax that is built into the framework. The new syntax is about so-called “blocks” which are available in the template out of the box - meaning you don’t have to import anything to use them. These blocks are @if, @else if, @else, @for, @empty, @switch, @case and @default. I’m not going to explain them in details here. You can read more about each block in the official documentation.

The new syntax is currently in developer preview. Once it becomes stable, it’ll most likely become the recommended way to handle control flow in the template, thus deprecating the NgIf, NgFor and NgSwitch directives.

But despair not! Both options will be available for at least a few major versions, so nothing is going away overnight. You have planty of time to plan the migration.

Speaking of which, the Angular team has an official schematic to help you migrate 🎉

It’s also quite easy to run ...

# Using Angular CLI
ng g @angular/core:control-flow

# Using Nx
nx g @angular/core:control-flow

The command proceeds to ask for a path to be migrated. The default is ./ (root) but you can set it to whatever you want. So you can either migrate the whole workspace at once or incrementally — step-by-step — one folder, feature or domain at a time.

Important: The schematic works amazingly well but you should absolutely go through the changes afterwards to be sure that everything is at it should.

Now go ahead and start using the new syntax. It’s great, I promise.

Thanks for reading. See you in the next post 😎

Photo by Nadine Shaabana on Unsplash

Lazy-loading the animations package in Angular

Dzhavat Ushev — Mon, 08 Jan 2024 22:19:16 +0000

We recently upgraded Angular to v17 at work. One of the first things we did after the upgrade was to lazy-load the animations package. This shaved 62.48 kB (16.51 kB gzipped) off off the main bundle. Not bad for changing two lines of code!

Here’s how to do it in your app:

// ...
- import { provideAnimations } from '@angular/platform-browser/animations';
+ import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

bootstrapApplication(AppComponent, {
  providers: [
-   provideAnimations(),
+   provideAnimationsAsync(),
    // ...,

    // to disable animations
    // provideAnimationsAsync("noop"),
});

The 1.75 MB main bundle (😱) is a story for another day 😊

Done with the changes already? Nice! Should we call it a day? Well, .. not so fast!

Lazy-loading the animations comes with a couple of side-effects!

The main one is that during bootstrap, animations will not be applied until after the package has loaded. The second one is that you must remember to only import from @angular/animation in lazy-loaded components. Importing anything from @angular/animation in an eagerly-loaded component will disable the lazy-loading of this package.

If you want to learn more about the side-effects, how to check if lazy-loading works correctly, and how this feature was implemented, check out this excellent post from Matthieu Riegler.

See you in the next post 🙂

Photo by Elly Johnson on Unsplash

Lint rule for self-closing tags in Angular

Dzhavat Ushev — Mon, 13 Nov 2023 17:09:25 +0000

Self-closing tags were introduced in Angular v15.1. This added a small but welcomed improvement to the developer experience (DX) when working with components. This feature allows us to use self-closing tag syntax for components without content or components where the content might be optional.

As a refresher, the self-closing tag syntax looks like this:

<!-- Normal syntax -->
<my-component></my-component>

<!-- Self-closing tag syntax -->
<my-component />

After upgrading to Angular v15.1 at work, we started using the self-closing tag syntax here and there but not consistently. There wasn’t really a way to enforce it with a tool, so it was up to the developer to remember it.

Until I recently discovered that angular-eslint had added a new lint rule in v16.2 called prefer-self-closing-tags that can be used to enforce this syntax partially or throughout a project.

Since we had the angular-eslint package already in our package.json, the configuration was as simple as adding the rule to an ESLint config file.

A couple of things worth mentioning about our project setup is that we have a monorepo managed by Nx, where we have two main apps and more than hundred libs (all of which have their own ESLint configs that inherit from root). We ended up adding the lint rule to the root ESLint config.

The configuration itself ended up like this:

{
  ...
  "files": ["*.component.html"],
  "extends": ["plugin:@nx/angular-template"],
  "rules": {
    "@angular-eslint/template/prefer-self-closing-tags": ["error"]
  }
  ...
},

The *.component.html pattern used in the files array is intentionally like that because we wanted to only target the templates of Angular components and not “regular” HTML files.

Every Angular project has a main index.html that is a regular HTML file where a top-level Angular component is included, i.e. <my-app></my-app>. Writing <my-app /> here would mean invalid HTML according to the specification because custom components, which Angular components are, cannot be self-closing. So the pattern above aims to avoid that file from being checked for self-closing tags.

But how are self-closing tags still allowed in the Angular components? Wouldn’t that be invalid too? Well, the Angular compiler still transforms them to their normal syntax during build. So writing <my-component /> becomes <my-component></my-component> after build.

Another thing you probably noticed is that the pattern ends with .html. This targets HTML files but what about inline templates? No worries! Even though the pattern specifically targets HTML files, angular-eslint checks for self-closing tags in inline templates too.

The best part about this lint rule is that it supports autofix. This means that - after adding the config - you can run your lint command with a --fix flag. angular-eslint will find all places where self-closing tags can be used, then it will fix your code automatically. You only need to review the changes. Awesome!

If you’re using Prettier in your project, make sure to be on v2.8.2 (or later) so Prettier also formats self-closing components correctly.

Self-closing tags in Angular improve the DX by allowing us to write less code. Let Angular do the rest for you.

You now know how to enforce self-closing tags in your Angular project using ESLint. Go ahead and start using them.

See you in the next post 🙂

Thanks to Lars Gyrup Brink Nielsen for reviewing the post.

Photo by Agence Olloweb on Unsplash.

“ViewEncapsulation” in Angular

Dzhavat Ushev — Tue, 03 Oct 2023 12:14:19 +0000

Ah, ViewEncapsulation!

It’s what keeps you asleep through the night! Or does it? 😊

Let’s refresh our knowledge about ViewEncapsulation.

`ViewEncapsulation.Emulated`

By default, all Angular components come with something called “style encapsulation”. It means that a component “encapsulates” its own styles so they only apply to elements within its scope. Styles defined in one component will not have an effect on the elements in another component.

Angular achieves this by adding a specific attribute to the component’s host element and applying the same attribute to all the CSS selectors provided via Component#styles or Component#styleUrls. (taken from Angular’s docs)

Considering a component to be an independent unit, this is the expected behaviour. You don’t want your components to “leak” styles that affect “outside” elements.

The above is done by setting the Component.encapsulation option to ViewEncapsulation.Emulated (or not setting it at all since that’s the default value).

Looking at the DevTools in the Figure 1 below, you can see that the my-app component has a _nghost-ng-<id> attribute. The same <id> is also added to the _ngcontent-ng-<id> attribute present on all child elements.

Note that the <id> is auto-generated by Angular and you should not rely on it being the same every time. So don’t style elements with _ngcontent-ng-abc123!

`ViewEncapsulation.None`

View encapsulation can be turned off on a component by setting the Component.encapsulation option to ViewEncapsulation.None.

But beware! Turning view encapsulation off means that all of the component’s styles now apply globally. They will no longer be scoped to the component, and can therefore affect any HTML element in the application.

You can see that by inspecting the component’s elements in DevTools.

Figure 2 above shows us that the _nghost-ng-<id> attribute is no longer present on the my-app component, nor on any child elements. Styles added to h1 will now “leak” from the component and affect any other h1s on the page. Had there been another h1 on the page, even in a completely different component, the color: tomato style would be applied to it.

There are valid reasons for turning encapsulation off, e.g. styling 3rd party components, or because parts of a component are dynamically created/moved to some other part of the DOM, e.g. a modal that is created as a child to body. Whatever the case, beware that the styles you add to a component might have an effect on unrelated elements!

But what if you want to disable view encapsulation on a component but still keep some, or all of its styles scoped to the component?

You can achieve this by nesting the styles under the component’s selector, i.e.

my-component {
  h1 {
    color: tomato;
  }
}

`ViewEncapsulation.ShadowDom`

Component.encapsulation can take a third value - ViewEncapsulation.ShadowDom but so far I’ve never used it in my apps. Once set, it uses the browser’s native Shadow DOM API to encapsulate CSS styles, ... (taken from Angular’s docs).

It looks like this in DevTools:

I don’t have experience with ShadowDom, so I’ve included it only for reference. You can decide for yourself whether it makes sense to use it in your apps.

Well, that’s it! I hope you learned something new about style encapsulation in Angular.

See you in the next post 👋

Photo by ian dooley on Unsplash

Overview over Angular’s repositories

Dzhavat Ushev — Wed, 16 Nov 2022 18:52:41 +0000

I’ve been working with Angular for around 6 years now. It’s a great framework that I enjoy working with. It’s also quite a broad framework that includes a lot of things. The ecosystem around it is pretty big as well.

A lot of times while working on a task, I go to Angular’s main repo and look at the source code to get a sense of how a particular feature works. I do that for Angular Material too. It’s quite exciting being able to do that. This gives one a feeling of mastery over one’s tools.

I wondered how many [official] Angular repos and packages are there?

In this post I’d like to create some kind of an overview over the many Angular repos and what they contain. The aim is to get an overview, of course, but also to see how far Angular stretches, and appreciate the work done by the Angular’s team and all of the amazing contributors.

Main Angular repo (link)

Contains the following packages:

It also contains:

aio - documentation for the https://angular.io website
examples - small examples used in the API docs
devtools - Angular DevTools browser extension
integration - end-to-end and integration tests that mimic how Angular works

Angular Components repo (link)

Contains the following packages:

@angular/cdk-experimental - experimental components for Angular CDK
@angular/cdk - main Angular CDK package
@angular/google-maps - Angular Google Maps component
@angular/material-date-fns-adapter - Angular Material date-fns Adapter
@angular/material-experimental - Experimental components for Angular Material
@angular/material-luxon-adapter - Angular Material Luxon Adapter
@angular/material-moment-adapter - Angular Material Moment Adapter
@angular/material - main Angular Material package
@angular/youtube-player - Angular YouTube Player component

It also contains:

guides - guides found in Guides page on Angular Material

Angular Components website repo (link)

The Angular app for the https://material.angular.io website.

Angular Components Docs repo (link)

Auto-generated docs content used in the https://material.angular.io website.

Angular CLI repo (link)

Contains the following packages:

@angular/cli - main Angular CLI package
@angular/create - create an Angular CLI workspace
@angular/pwa - a schematic for adding Progress Web App (PWA) support to an Angular app
@angular-devkit/architect
@angular-devkit/architect-cli
@angular-devkit/benchmark - Angular Devkit Benchmark. Note: Not stable
@angular-devkit/build-angular
@angular-devkit/build-webpack
@angular-devkit/core
@angular-devkit/schematics
@angular-devkit/schematics-cli
@ngtools/webpack - Angular Compiler Webpack Plugin
@schematics/angular - Schematics specific to Angular

Angular Universal repo (link)

Contains the following packages:

Angular Language Service repo (link)

Angular extension for Visual Studio Code.

ng-packagr repo (link)

Compile and package Angular libraries in Angular Package Format (APF).

AngularFire repo (link)

The official Angular library for Firebase.

Angular Upgrade Guide (update.angular.io) repo (link)

An interactive guide to updating the version of Angular in your apps.

NGCC Validation repo (link)

Angular Ivy library compatibility validation project.

Angular Contributor Code of Conduct repo (link)

A code of conduct for all Angular projects.

Angular Flex-Layout repo (link)

Note: Deprecated. Under LTS support.

Protractor repo (link)

Note: Deprecated. End of development as of Angular v15.

What a list 😮 The Angular team is doing an awesome job maintaining these repos, working on new features, fixing bugs and moving Angular forward.

Thanks to Lars Gyrup Brink Nielsen for reviewing this post.

Resources to get started with Nx

Dzhavat Ushev — Thu, 10 Nov 2022 17:12:16 +0000

You know the old saying “Ask me once, I’ll share a tweet. Ask me twice, I’ll share a tweet. Ask me a third time, I’ll share a blog post”? (ok, it’s not an old saying — I came up with it two days ago 😅). Anyway, I was asked a couple of times on Twitter about getting started with Nx, so I thought I’d write a post collecting all sorts of links, resources, courses, people to follow, etc. that I can share next time someone asks 😎

Note: I’ll try to update the post as I discover new stuff, so send them my way if something’s not in the list bellow.

Official Nx website

Blogs

GitHub repos

Nx Console

Nx Cloud

Plugins

Nx Plugin Directory

Video

Nx YouTube Channel

Courses

Free

Paid

Books

Community

People to follow

Community members

Fully expand PR status checks on GitHub

Dzhavat Ushev — Tue, 01 Nov 2022 21:56:23 +0000

One thing I absolutely love about working on the Web is that I can literally tweak any web page according to my preferences.

You know, I can build a browser extension that changes colors, font sizes, improves accessibility, moves boxes, removes things I don’t need, etc. I can also write my own bookmarklet for doing the same.

This is what I did recently after patiently enduring what I consider to be an annoying limitation on the PR (Pull Request) status checks list on GitHub.

PR status checks is a list of checks that show the status of all pipeline runs related to a PR. They are usually the last section on the PR page right before the “merge” button and the comment section.

What annoys me about this list is that it can’t be fully expanded. There’s a toggle to either hide all checks or show them but the list has a set height that limits how many items can be shown at a time. And sometimes the list can be quite long. If a run fails, it becomes quite annoying to scroll up and down to find what has failed.

So I built my own bookmarklet that simply removes the height and thus the list expands fully. Needless to say, I use it all time now 😎

Here’s a video 👇

In case you want to use it too, here’s the source code:

javascript: (() => {
  document.querySelector(
    '.merge-status-list.js-updatable-content-preserve-scroll-position'
  ).style.maxHeight = 'none';
})();

Happy coding 😉

Remember to enjoy it

Dzhavat Ushev — Tue, 25 Oct 2022 20:07:56 +0000

It’s always been important to me to enjoy whatever I’m doing. Whether it’s work, a side project, writing on this blog, recording videos, going for a run or learning new stuff, simply enjoying it is the single most important factor that keeps me motivated.

I don’t recall exactly when but a few months ago an idea popped up in my head - I wanted to decorate the wall above my desk with the quote “Remember to enjoy it” as a little reminder that I must enjoy whatever I’m doing. And to make it extra special, I wanted to cut each letter out of wood.

So I got to work making small progress over time but enjoying it nonetheless (see 😉).

I found a nice font on the Internet and printed each letter in the desired size. I transferred the letters on a piece of wood and used a jigsaw to cut them. Then I used small wood files to smoothen the edges. Finally I applied a couple of coats of dark stain to make the letters darker.

And finally today I put the letters on the wall using double-sided tape. It’s beautiful. I like it a lot 🙂

Auto-expand menu using Angular Material

Dzhavat Ushev — Wed, 14 Sep 2022 14:31:25 +0000

This post is going to be a bit longer than usual so bear with me 🙂

I was working on a task at work where one of the requirements was to make a menu auto-expand whenever the user navigates to a sub-page that is part of a menu group. To give you a visual idea, take a look at the following video:

Pages 3 and 4 are grouped under "Nested menu" and the menu auto-expands when the user navigates to one of those pages.

Looks nice, doesn't it? 😎

In this post I'll show you how I built it. It's not hard to achive but there's one disclaimer.

The disclaimer: The solution I'm going to share in this post is specific to our components architecture. If you want to achieve the same in your project, the final solution might be different. So let me tell you a bit more about our setup before diving into the code.

Components architecture

The application I'm working on is made up of two parts:

Application specific components
Design System components

Design System components

As you might've guessed it, the Design System consists of small components focused on particular UI needs. They are used in the application.

As part of the Design System, we've got components like nav-list and nav-list-item, and an expand-on-active-link directive where the real magic happens 🪄

`nav-list-item` component

This component is a wrapper around mat-list-item from Material and has two requirements:

Should support internal links
Should support external links

The component class has a link Input and some logic that decides whether the link is internal or external. That's not important for this post but you can see it in the final GitHub repo.

Here's its template at this point:

<!-- nav-list-item.component.html -->
<a
  *ngIf="isExternalLink; else internalLink"
  mat-list-item
  mat-ripple
  [href]="link"
  [attr.target]="target"
  ><ng-container *ngTemplateOutlet="templateContent"></ng-container
></a>

<ng-template #internalLink>
  <a mat-list-item mat-ripple [routerLink]="link" routerLinkActive="active"
    ><ng-container *ngTemplateOutlet="templateContent"></ng-container
  ></a>
</ng-template>

<ng-template #templateContent>
  <ng-content></ng-content>
</ng-template>

`nav-list` component

nav-list is a wrapper around mat-nav-list from Material. The component has an expandable Input property that, when set to true, places a mat-nav-list (and its projected content) inside a mat-expansion-panel, otherwise it displays mat-nav-list directly.

Here's its template at this point:

<!-- mat-nav-list.component.html -->
<ng-container *ngIf="expandable; else navListTemplate">
  <mat-expansion-panel class="mat-elevation-z0">
    <mat-expansion-panel-header>
      <mat-panel-title>{% raw %}{{ title }}{% endraw %}</mat-panel-title>
    </mat-expansion-panel-header>
    <ng-container *ngTemplateOutlet="navListTemplate"></ng-container>
  </mat-expansion-panel>
</ng-container>

<ng-template #navListTemplate>
  <mat-nav-list><ng-content></ng-content></mat-nav-list>
</ng-template>

We'll come back to the expand-on-active-link directive later.

Application specific components

The application specific components is where components from the Design System are used.

`sidebar-nav` component

The component simply puts nav-list and nav-list-item together. Its template is as follows:

<!-- sidebar-nav.component.html -->
<nav-list>
  <nav-list-item link="/page-1">Page 1</nav-list-item>
  <nav-list-item link="/page-2">Page 2</nav-list-item>
  <nav-list-item link="https://angular.io/">Angular</nav-list-item>
</nav-list>

<nav-list [expandable]="true" [title]="'Nested menu'">
  <nav-list-item link="/page-3">Page 3</nav-list-item>
  <nav-list-item link="/page-4">Page 4</nav-list-item>
</nav-list>

From the code above, the first nav-list displays a list of links while the second nav-list displays an expandable list of links grouped under the "Nested menu" title. Demo time ⌚

The expandable menu must be opened manually. Any highlighted menu item is hidden until the menu is expanded which can be confusing for the user. We want to fix that by adding auto-expand capabilities. Let's see how.

Making the menu auto-expand

First let's define some requirements:

An expandable menu should automatically expand when the user navigates to a sub-page that is part the menu.
An already expanded menu should stay open when the user navigates to another top level page.

There are probably a few solutions here. One could be to listen for the NavigationEnd router event and somehow figure out which nav-list to expand based on routes. Another could be to listen for the isActiveChange event on each routerLink and expand the closest nav-list. This is the approach I used.

So there are a few changes that needs to be made.

Modifying the `nav-list-item` component

Remember how this component supports internal and external links? Well, each internal link uses the routerLink directive, which conveniently has an isActiveChange Output property that emits true every time a link becomes active and false when it becomes inactive. For now we’ll simply forward the emitted value to another Output property on the nav-list component class. We’ll see why later.

So the component class and its template now look like this:

<!-- nav-list-item.component.html -->
<!-- ... -->
<a [routerLink]="link" (isActiveChange)="isActive.emit($event)" ...>...</a>

// nav-list-item.component.ts
@Component({
  // ...,
  selector: 'nav-list-item',
})
export class NavListItemComponent {
  // ...

  @Output() isActive = new EventEmitter<boolean>();
}

Modifying the `nav-list` component

What we want to do here is query the template for all the projected nav-list-item components. We can use the @ContentChildren decorator for that.

// nav-list.component.ts
@Component({
  // ...
  selector: 'nav-list',
})
export class NavListComponent {
  // ...

  @ContentChildren(NavListItemComponent)
  navListItemComponents: QueryList<NavListItemComponent> | null = null;
}

Once we have all nav-list-item components we're going to send them to a custom directive (shown below) that will listen for the isActive event on each link within a sub-menu and expand the related mat-expansion-panel component in case any of the links emit true.

Let's modify the nav-list template first, then we'll look at the custom directive.

<!-- nav-list.component.html -->
<!-- ... -->
<mat-expansion-panel
  expandOnActiveLink
  [navListItemComponents]="navListItemComponents"
  ...
>
  <!-- ... -->
</mat-expansion-panel>

As you can see, a custom expandOnActiveLink directive is added only on the mat-expansion-panel. The directive has one Input called navListItemComponents which takes a list of nav-list-item components.

`expand-on-active-link` directive

Here's the power of Angular's directives. When you add a directive to a component, you can inject an instance of that component in the directive's constructor. We're going to use that for our advantage.

The plan is to inject an instance of MatExpansionPanel in the directive and use its open method to expand the panel whenever one of the projected nav-list-item components emits true from its isActive Output.

Let's first see the directive, then we'll talk about the code:

// expand-on-active-link.directive.ts
@Directive({
  selector: '[expandOnActiveLink]',
  exportAs: 'expandOnActiveLink',
  standalone: true,
})
export class ExpandOnActiveLinkDirective implements AfterContentInit {
  @Input()
  navListItemComponents: QueryList<NavListItemComponent> | null = null;

  constructor(private panel: MatExpansionPanel) {}

  ngAfterContentInit(): void {
    const navListItems = this.navListItemComponents?.toArray();

    if (navListItems) {
      from(navListItems)
        .pipe(
          mergeMap((item) => item.isActive),
          filter((isActive) => isActive)
        )
        .subscribe(() => {
          // Looks like there's a bug in `mat-drawer` component
          // that prevents `mat-expansion-panel` from expanding
          // This littl' fella fixes it :)
          setTimeout(() => this.panel.open(), 0);
        });
    }
  }
}

A few things to note here. First, navListItemComponents are accessed in the ngAfterContentInit lifecycle hook because ContentChildren queries are set right before it. Second, the from function takes an array of nav-list-item components and sends each component to the mergeMap operator. mergeMap picks up the isActive Output property of each component and merges their events into a single stream. The filter operator afterwards makes sure that only true events will continue down the stream. At the end, the injected panel instance is used to open the MatExpansionPanel component. setTimeout is used because at the time of this writing, apparently there's a bug in Material that prevents mat-expansion-panel from expanding if it is placed inside a mat-drawer 🤷‍♂️.

Final demo

Wow, that was a lot! Here's a final StackBlitz demo. Also a GitHub repo.

Conclusion

I hope you liked this post. It's very specific to a particular component setup but an interesting challenge nonetheless.

Oh, but we're not done yet! This is the part where you come in. Do you have a suggestion for improving the solution? What can be done differently? Let me know on Twitter.

Forem: Dzhavat Ushev

Change the position of Command Palette and Quick Inputs panels in VS Code

Downloading the same file 102+ times

Edge

Chrome

Firefox

Update 2025-01-14

Creating an empty commit in Git

Incremental migration to Angular’s new control flow syntax

Lazy-loading the animations package in Angular

Lint rule for self-closing tags in Angular

“ViewEncapsulation” in Angular

ViewEncapsulation.Emulated

ViewEncapsulation.None

ViewEncapsulation.ShadowDom

Overview over Angular’s repositories

Main Angular repo (link)

Angular Components repo (link)

Angular Components website repo (link)

Angular Components Docs repo (link)

Angular CLI repo (link)

Angular Universal repo (link)

Angular Language Service repo (link)

ng-packagr repo (link)

AngularFire repo (link)

Angular Upgrade Guide (update.angular.io) repo (link)

NGCC Validation repo (link)

Angular Contributor Code of Conduct repo (link)

Angular Flex-Layout repo (link)

Protractor repo (link)

Resources to get started with Nx

Blogs

GitHub repos

Nx Console

Nx Cloud

Plugins

Video

Courses

Free

Paid

Books

Community

People to follow

Community members

Fully expand PR status checks on GitHub

Remember to enjoy it

Auto-expand menu using Angular Material

Components architecture

Design System components

nav-list-item component

nav-list component

Application specific components

sidebar-nav component

Making the menu auto-expand

Modifying the nav-list-item component

Modifying the nav-list component

expand-on-active-link directive

Final demo

Conclusion

`ViewEncapsulation.Emulated`

`ViewEncapsulation.None`

`ViewEncapsulation.ShadowDom`

`nav-list-item` component

`nav-list` component

`sidebar-nav` component

Modifying the `nav-list-item` component

Modifying the `nav-list` component

`expand-on-active-link` directive