File Template for Angular components in Webstorm

angular-file-template-for-webstorm

import { ChangeDetectionStrategy, Component } from '@angular/core';
#set($componentName = "")
#foreach($str in $NAME.split("-"))
  #set($str = $str.substring(0,1).toUpperCase()+$str.substring(1))
  #set($componentName = $componentName + $str)
#end
@Component({
  selector: 'app-${NAME}',
  templateUrl: './${NAME}.component.html',
  styleUrl: './${NAME}.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
})
export class ${componentName}Component {

}

This way you can create the folder where all the files will be stored.

${NAME}/${NAME}.component

This way you can the complete folder for the component.

Create child templates for the Angular component.

One for HTML and Use the same File Name than the component in a "html" extension file

<div class="app-${NAME}">
</div>

And one for SCSS

.app-${NAME}{

}

Now when you create a file of angular

It creates the full folder.

import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrl: './test-component.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
})
export class TestComponentComponent {

}