Angular

Create a component using a predefined template

WebStorm 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 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. WebStorm 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 WebStorm, 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. For more information, refer to Templates with multiple files.

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 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. WebStorm 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. WebStorm 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.

1. To call the Related Symbol popup with a list of related files, perform one of the following actions:

   • Press Ctrl+Alt+Home.

   • Select Navigate | Related Symbol from the main menu.

   • Right-click any area in the editor and select Go To | Related Symbol.

   In a TypeScript component file, the popup also lists all the symbols that were imported into this file.

   

2. To open a file, select it and press Enter. Alternatively, use the numbers associated with each file type:

   1. The TypeScript file with the component class

   2. Template

   3. Tests

   4. Styles

1. Select File | New from the main menu or press Alt+Insert in the Project 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.

   

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

2. From the list, select the relevant schematic. Start typing the name of the schematics, the list shrinks as you type.

   

3. In the dialog that opens, specify the name of the schematic to be generated and additional options, if necessary. WebStorm shows the description of the schematic and provides code completion and description for available options.

   

1. Press Ctrl+Alt+S to open settings and then select Languages&Frameworks | TypeScript | Angular.

   Alternatively, click the Language Services widget on the status bar, select Angular TypeScript, and click .

   

2. Specify the service to get coding assistance for .ts files from. That can be WebStorm integration with the TypeScript Language Service or only the internal WebStorm parser and code inspections.

   • By default, the Auto option is selected so WebStorm automatically enables integration with the TypeScript Language Service and Angular Language Service in any appropriate context. As a result, type evaluation is performed based on the data from the TypeScript Language Service while internal WebStorm inspections are also applied.

   • Select the Disabled option to get coding assistance based only on the data from the internal WebStorm parser and inspections.

3. Select the Use types from server checkbox to evaluate types of symbols based on the data from the Angular Language Service.

   By default, the checkbox is cleared, so type evaluation, resolution, code inspections and refactorings are based on the type information from the WebStorm internal TypeScript engine.

   This default behavior may result in performance issues and in bugs in type resolution because the type evaluation algorithm that the WebStorm internal TypeScript engine uses differs from the algorithm of the Angular Language Service. Selecting the checkbox may help avoid these problems.

Configure parameter hints

1. Open the Settings dialog (Ctrl+Alt+S) and go to Editor | Inlay Hints.

2. Expand Angular HTML template under Parameter names.

3. Specify the context in which you want parameter hints shown by selecting the corresponding checkboxes.

   The preview shows how the changes you make in the settings affect the code appearance.

4. For some methods and functions, WebStorm does not show parameter hints in any context. Click Exclude list... to view these methods and functions, possibly enable parameter hints for them, or add new items to the list.

5. To hide parameter hints for any value type in any context, clear the Angular HTML template checkbox under Parameter names.

View the list of Angular-specific inspections and configure them

1. In the Settings dialog (Ctrl+Alt+S) , go to Editor | Inspections.

2. Expand the Angular node.

3. Configure inspection profiles and severity, disable and suppress predefined inspections, and create custom ones as described in Code inspections.

Install Angular Material

• Open the embedded Terminal (Alt+F12) and type ng add @angular/material.

• Add "@angular/material": "^16.2.11" under dependencies in your package.json and run npm install.

• In the main menu, go to File | New | Angular Dependency, then select @angular/material from the list and follow the steps of the wizard that starts.

  

Learn more from Getting Started on the Angular Material official website.

1. In the Settings dialog (Ctrl+Alt+S) , go to Editor | Color Scheme | Angular Template.

2. Select the color scheme, accept the highlighting settings inherited from the defaults or customize them as described in Colors and fonts.

Create an npm run/debug configuration

1. Go to Run | Edit Configurations. Alternatively, select Edit Configurations from the Run widget on the toolbar.

   

   In the Edit Configurations dialog that opens, click the Add button () on the toolbar and select npm from the list.

2. In the Configuration tab of the Run/Debug Configurations: npm dialog that opens, specify the location of the package.json, the Node.js interpreter, and the package manager to use.

   In the Command field, select run from the list and then select the script to run from the Scripts list. Most likely it will be the default start script but you can configure another one in your package.json, for example, to run the application on a custom port.

   

3. Optionally:

   To open the application in the browser, update the configuration as follows: in the Browser / Live Edit tab, select the After launch checkbox, select the browser to open the application in, and specify the URL address at which the application wil run.

   If you are going to debug the application, select Google Chrome or another Chromium-based browser.

   

Run an application

1. From the list in the Run widget on the toolbar, select a run configuration of the type npm. This can be the autogenerated Angular CLI Server configuration or a custom one that you created yourself as described above.

2. Click .

   

3. Wait till the application is compiled and the development server is ready.

   The Run tool window or the Terminal shows the URL at which your application is running. If your application was generated with @angular/cli, the default URL is http://localhost:4200/. Click this link to view the application.

   

   Alternatively, enable WebStorm to open the application on start as described above.

Run and debug an Angular application with a single npm run/debug configuration

1. Set the breakpoints in your code.

2. Create an npm configuration as described above.

3. In the Configuration tab of the Run/Debug Configurations: npm dialog that opens, specify the location of the package.json, the Node.js interpreter, and the package manager to use.

   In the Command field, select run from the list and then select the script to run from the Scripts list. Most likely it will be the default start script but you can configure another one in your package.json, for example, to run the application on a custom port.

   

4. In the Browser / Live Edit tab, select the After launch checkbox, select Google Chrome or another Chromium-based browser from the list, select the with JavaScript debugger checkbox, and then specify the URL at which your application will run.

   

5. Click Run.

   To re-run the configuration, select it from the list in the Run widget and click next to it.

   WebStorm runs the application in the development mode and at the same time launches a debugging session.

   

6. When the first breakpoint is hit, switch to the Debug tool window and proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.

Start debugging with a JavaScript Debug run/debug configuration

1. Set the breakpoints in your code.

2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.

   The Run tool window or the Terminal shows the URL at which your application is running. Copy this URL to specify it later in the JavaScript Debug configuration.

   

3. Create a JavaScript Debug configuration. To do that, go to Run | Edit Configurations in the main menu, click , and select Javascript Debug from the list.

   If you generated your application with Angular CLI, as described above, WebStorm has already created a JavaScript Debug run/debug configuration with the default name Debug Application and the default URL http://localhost:4200. Select this run/debug configuration from the list under the JavaScript Debug node.

   

4. In the Run/Debug Configurations: JavaScript Debug dialog that opens, specify the name of the configuration and the URL address at which the application is running in the development mode. You can copy this URL in the Run tool window or in the Terminal, as described above.

   

5. Click Debug.

   To re-run the configuration, select it from the list in the Run widget and click next to it.

   

6. When the first breakpoint is hit, switch to the Debug tool window and proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.

1. Set the breakpoints in your code.

2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.

3. The Run tool window or the Terminal shows the URL at which your application is running. If your application was generated with @angular/cli, the default URL is http://localhost:4200/. Hold Ctrl+Shift and click this URL link. WebStorm starts a debugging session with an automatically generated Angular Application configuration of the type JavaScript Debug.

   

   Alternatively, select the autogenerated Angular Application configuration from the list and click the Debug button next to the list.

   If you launched your application in the development mode from the New Terminal, you can just click the Start debugging in browser button next to the link.