obenjiro / vscode-arrr Goto Github PK

Currently ARRR generates:

• .component.html
• .component.css
• .component.spec.ts
• .component.ts

All files are generated with default preferences. But if Angular schematics is custom, generated files should be different.
My request is to use schematics, defined in angular.json.
For example, we use these options for components:

          ...
          "changeDetection": "OnPush",
          "export": false,
          "flat": false,
          "inlineStyle": false,
          "inlineTemplate": false,
          "skipImport": false,
          "skipTests": true,
          "style": "scss",
          "viewEncapsulation": "Emulated",
          "displayBlock": true
          ...

First of all I really like the extension and I think it will be very useful for a lot of people!

Description

Right now it doesn't give you the option to choose the declaring NgModule. Most of the time I want to extract into a SharedModule, it would be really nice if I would have the option to choose where I create the component.

Some ideas

• just a simple input ( introduces potential typos )
• select from a dropdown ( sort to closest first if possible )

Step to reproduce the problem:

1. ng new demo1 --routing --style=css && cd demo1
2. Open VSCode with the demo1 project
3. Edit src\app\app.component.html
4. Select <div class="content" role="main"> whole section and run Extract Angular Component.

Actual result:

<app-main [title]="title" [selection]="selection"></app-main>

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent {
  @Input() title;
  @Input() selection;
  constructor() { }
}

The selection should not treat as a input because it's an template reference variable within the selection.

Expected result:

<app-main [title]="title"></app-main>

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent {
  @Input() title;
  constructor() { }
}

Unable to create component using hyphen. When I do, an error message from VSCode appears in the bottom right and says "Illegal Characters In Path."

It would be nice to have the option to name new components with a hyphen.

If the declaring module is not AppModule it would be nice to have the option to export by the declaring module

I writing lol-kek in HTML and in the current component module, i am importing the component Kek module

When I try to extract the following html I get *.component.undefined instead of the css/scss.

  <mat-form-field>
    <input
      formControlName="number"
      matInput
      placeholder="Enter a number"
      i18n-placeholder
      type="number"
    />
  </mat-form-field>

File structure:

In the component class the styleUrl is there correctly:

import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-number-input',
    templateUrl: './number-input.component.html',
    styleUrls: ['./number-input.component.css']
})
export class NumberInputComponent {
    
    constructor () {}
}

When I do Extract Angular Component and choose the path (Windows), I got an Illegal characters in path. error.

This is awesome. I have one question about the "decisions" when transforming this

<app-card *ngFor="let task of tasks" cdkDrag><ion-icon cdkDragHandle [src]="iconsService.getIconPath('drag')"> </ion-icon>
   <div class="content">    
      <p>{{task.title}}</p>    
      <p>{{task.instructions}}</p>    
   </div>    
   <app-delete-card-button></app-delete-card-button>    
</app-card>

Into this:

<app-drag-task [tasks]="tasks" [iconsService]="iconsService" [task]="task"></app-drag-task>

Would it be possible to keep the ng-for in the new component, and remove the task array?

For projects that use SCSS or others, it would be nice for the extension to check the angular.json file and see what type of CSS file is being used, and create that type of file instead.