Compress your component view in Angular with IntelliJ File Nesting

Jonathan Turnock
Aug 14, 2019 · 2 min read

A nifty feature of the Jetbrains IDE tools is the file nesting. You may have seen on occasion that the IDE will compress files of the same name into a tree with the parent at the top and the children below. Say for example when js is minified the .min.js file can be displayed in a tree display under the main .js file.


We can use this to our advantage when working with Angular by compressing the file tree’s which can become quite populated in a large project.

Looking at this home-page component we can see a rather cluttered native view with the .html, .scss, .spec.ts and .ts all on the same level.

Unified homepage component tree

We could instantly improve the situation by adding .spec.ts to the .ts children and therefore decluttering the whole project, but I have taken it a step further here and added a .component.html parent with a .component.scss as the child.

File Nesting with .spec.ts added to the .ts parent and a new .component.html parent added with a .component.scss child

File Nesting leaving a rather neat view of the Project Pane

The File nesting dialog is available from the Project Pane.

Jonathan Turnock

Written by

☕️Java 🍃 Spring 🐍Python 🐳Docker — Experienced Full Stack Java, Python, Angular and Electron developer.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade