Angular

Create a component using a predefined template

JetBrains Rider provides predefined live templates for creating Angular components, such as a-component, a-component-inline, and a-component-root.

For more information about live templates, refer to Live templates.

To view a full list of predefined templates, open the Settings/Preferences dialog (Ctrl+Alt+S) , go to Editor | Live Templates, and expand the Angular node.

1. In the editor, press Ctrl+J, select the appropriate template (for example, a-component) from the list, and then press Enter.

2. JetBrains Rider generates a component stub, places the caret at a field with canvas, and waits for you to specify the component name there. As you type the component name, the name of the selector and the template URL are filled in automatically in accordance with the Angular Style Guide.

3. If necessary, make the new component standalone using the inspection pop-up.

   

Learn how to customize a template with variables from Using and Creating Code Snippets in WebStorm Blog.

Create a component folder

In JetBrains Rider, you can create a bunch of files for an Angular component in one action and even place them all in a separate folder. To do that, you need to use a file template with several child templates. When you create a file from the parent template, the related files from the child templates are generated automatically.

Suppose you want to create an example folder with a bunch of component files, for example, example.component.ts for logic, example.component.html for the template, and example.component.css for styles. You can create a file template with two parent templates so all the three files will be generated at once and placed in a separate folder.

1. In the Settings/Preferences dialog (Ctrl+Alt+S) , select Editor | File and Code Templates.

2. First create a template for a TypeScript component file:

   1. In the Files tab, click the Add button () on the toolbar.

      

      A new, Unnamed, template is added to the list.

   2. In the right-hand pane, specify the template name, let it be Angular Component, and component.ts as the file extension.

   3. In the File name field, type $NAME/$NAME.

   4. Optionally, add a code template, for example:

      /* * Created by ${USER} on ${DATE} */ import { Component } from '@angular/core';

   

   Click Apply.

3. Create a child template for the related HTML file:

   1. Select the parent template Angular Component and click the Create Child Template File button on the toolbar.

      

      A child template is added below the Angular Component template.

   2. In the right-hand pane, type $NAME/$NAME in the File name field and specify the component.html extension.

   

   Click Apply.

4. Create a child template for the related Style Sheet.

   1. Select the parent template Angular Component and click on the toolbar. A child template is added below the Angular Component template.

   2. In the right-hand pane, type $NAME/$NAME in the File name field and specify the component.css extension.

5. Click OK to save the templates.

6. Create the component files.

   From the context menu of the folder where you want to store the component files, select New | Angular Component. In the dialog that opens, specify the name that will be used for the folder and for the component files in it (example in this example).

   

Extract a component from a template

The Extract Angular component refactoring works by running ng generate component, taking schematic preferences inside your angular.json file into account.

1. In an HTML template file, select the code fragment that you want to extract into an Angular component.

2. From the context menu of the selection, choose Refactor | Extract Component.

   Alternatively, press Ctrl+Alt+Shift+T and select Extract Component from the Refactor This popup.

   

3. In the dialog that opens, specify the name of the new component.

Create signals

1. Write the function you need. JetBrains Rider runs an inspection and highlights the new function as unresolved.

2. Hover over the highlighted function and click the Create signal '<function name>' link in the popup.

   

   Alternatively, place the cursor at the highlighted function, press Alt+Enter, and select Create signal '<function name>'.

   

3. JetBrains Rider brings you to the component TypeScript file where a stub of the new signal is generated. Fill in the placeholders as necessary.

Configure highlighting for Angular signals

1. Press Ctrl+Alt+S to open settings and select Editor | Color Scheme | Angular Template.

2. Select Signal in the list and click the color indication next to Foreground.

   

3. Select the color you prefer and click Apply.

• In an Angular HTML template, select a code fragment, press Ctrl+Alt+T, and then select the enclosing code from the list.

  

1. Select File | New from the main menu or press Alt+Insert in the Explorer tool window Alt+1, and then select Angular Dependency.

2. From the list, select the library to add. The list shows the libraries that can be definitely installed with ng add. To install a package that is not on the list, scroll to its end and double-click the Install package not listed above link, then specify the package name in the dialog that opens.

3. Follow the steps of the wizard.

   The example below illustrates adding Angular Material to a project.