# Angular > **TL;DR** > Available only in IntelliJ IDEA with the Ultimate subscription: [download](https://www.jetbrains.com.cn/en-us/idea/download/) to try or [explore the features](https://www.jetbrains.com.cn/en-us/products/compare/?product=idea&product=idea-ult). > > > > > > Required plugins: > > > > `JavaScript and TypeScript` -  the plugin is bundled with IntelliJ IDEA and enabled by default. > > > > `Angular and AngularJS` -  install the plugin on the Settings | Plugins page, tab Marketplace. The plugin is available only in IntelliJ IDEA with the Ultimate subscription. [Angular](https://angular.io/) is a popular framework for building cross-platform applications. IntelliJ IDEA provides support for Angular and helps you on every step of the development process – from creating a new Angular app and working on the components to debugging and testing it. ## Before you start Procedure: 1. Download and install [Node.js](http://nodejs.org/#download). 2. Make sure the JavaScript and TypeScript plugin is enabled in the settings. Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Plugins`. Click the Installed tab. In the search field, type JavaScript and TypeScript. For more information about plugins, refer to [Managing plugins](managing-plugins.html). 3. Install and enable the Angular and AngularJS plugin on the Settings | Plugins page, tab Marketplace, as described in [Installing plugins from JetBrains Marketplace](managing-plugins.html#install_plugin_from_repo). The plugin is available only in IntelliJ IDEA with the Ultimate subscription. ## Create a new Angular application The recommended way to start building a new Angular application is [Angular CLI](https://cli.angular.io/), which IntelliJ IDEA downloads and runs for you using [npx](https://www.npmjs.com/package/npx). As a result, your application is bootstrapped with a ready-to-use TypeScript and Webpack configuration. Of course, you can download Angular CLI yourself or create an empty IntelliJ IDEA project and install Angular in it. ![Create a new Angular app](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_create_project.png) Procedure: 1. Select `File | New | Project` from the main menu or click the New Project button on the Welcome screen. 2. In the left-hand pane, choose Angular CLI. 3. Specify the project name and the folder to create it in. In the Node runtime field, specify the Node.js runtime to use. Select a configured runtime from the list or choose Add to configure a new one. From the Angular CLI list, select npx --package @angular/cli ng. Alternatively, for npm version 5.1 and earlier, install the `@angular/cli` package yourself by running `npm install -g @angular/cli` in the Terminal `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)). When creating an application, select the folder where the `@angular/cli` package is stored. 4. Optionally: * In the Additional parameters field, specify the extra [ng new options](https://github.com/angular/angular-cli/wiki/new) to pass to Angular CLI. Code completion is available in this field: as you start typing the name of an option or press `Ctrl+Space` (Windows), `⌃ Space` (macOS), `⌃ Space` (IntelliJ IDEA Classic (macOS)), `⌃ Space` (macOS System Shortcuts), `Ctrl+Space` (XWin), `Ctrl+Space` (GNOME), `Ctrl+Space` (KDE), `Alt+/` (Emacs), `Ctrl+Space` (Sublime Text), `⌃ Space` (Sublime Text (macOS)), `Ctrl+Space` (NetBeans), `Ctrl+Space` (Visual Studio), `⌃ Space` (Visual Studio (macOS)), `Ctrl+Space` (Eclipse), `⌃ Space` (Eclipse (macOS)), IntelliJ IDEA shows you the available options and their description. * If you are using [Angular version 16](https://angular.io/guide/update-to-version-16) or later, you can also select the Create new project with standalone components checkbox. Learn more from the [Angular official website](https://angular.io/guide/standalone-components). 5. When you click Create, IntelliJ IDEA generates an Angular-specific project with all the required configuration files and downloads all the necessary dependencies. Procedure: Create an empty IntelliJ IDEA project 1. Select `File | New | Project` from the main menu or click the New Project button on the Welcome screen. 2. In the New Project dialog, select New Project in the left-hand pane. 3. In the right-hand pane, select JavaScript in the Language area. 4. Name the new project and change its location if necessary, then click Create. 5. When you click Create, IntelliJ IDEA creates and opens an empty project. Procedure: Install Angular in an empty project 1. Open the empty project where you will use Angular. 2. In your command-line shell or in the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) , type: `npm install @angular/core` That will install the core Angular package with the critical runtime parts of the framework. You may also need to install other packages that are parts of Angular, refer to the [list of packages](https://angular.io/docs/ts/latest/guide/npm-packages.html#!#feature-packages). ## Start with an existing Angular application > **Note:** > The recommended way to start a new Angular application is [Angular CLI](https://cli.angular.io/). Only in this case your application is bootstrapped with a ready-to-use TypeScript and Webpack configuration. To continue developing an existing Angular application, open it in IntelliJ IDEA and download the required dependencies. Procedure: Open the application sources that are already on your machine * Click Open or Import on the Welcome screen or select `File | Open` from the main menu. In the dialog that opens, select the folder where your sources are stored. Procedure: Check out the application sources from your version control 1. Click Clone Repository on the Welcome screen. Alternatively, select `File | New | Project from Version Control…` or `Git | Clone…` or `VCS | Get from Version Control` from the main menu. Instead of Git in the main menu, you may see any other Version Control System that is associated with your project. For example, Mercurial or Perforce. 2. In the dialog that opens, select your version control system from the list and specify the repository to check out the application sources from. For more information, refer to [Check out a project (clone)](manage-projects-hosted-on-github.html#clone-from-GitHub). Procedure: Download the dependencies * Click Run 'npm install' or Run 'yarn install' in the popup: ![Open an application and download the dependencies](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_npm_yarn_package_run_npm_install.png) You can use [npm](https://docs.npmjs.com/), [Yarn 1](https://classic.yarnpkg.com/lang/en/), or [Yarn 2](https://yarnpkg.com/), refer to [npm and Yarn](installing-and-removing-external-software-using-node-package-manager.html) for details. * Alternatively, select Run 'npm install' or Run 'yarn install' from the context menu of `package.json` in the editor or in the Project tool window (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) . ### Project security When you open a project that was created outside IntelliJ IDEA and was imported into it, IntelliJ IDEA displays a dialog where you can decide how to handle this project with unfamiliar source code. Select one of the following options: * Preview in Safe Mode: in this case, IntelliJ IDEA opens the project in a preview mode. It means that you can browse the project's sources but you cannot run tasks and script or run/debug your project. IntelliJ IDEA displays a notification on top of the editor area, and you can click the Trust project… link and load your project at any time. * Trust Project: in this case, IntelliJ IDEA opens and loads a project. That means the project is initialized, project's plugins are resolved, dependencies are added, and all IntelliJ IDEA features are available. * Don't Open: in this case, IntelliJ IDEA doesn't open the project. Learn more from [Project security](project-security.html). > **Tip:** > Projects created from the Welcome screen or via `File | New | Project` as described in are automatically considered trusted. ## Write and edit your code This chapter provides Angular-specific hints. For general guidelines, refer to [Write and edit source code](working-with-source-code.html) and [TypeScript](typescript-support.html). ### Configure the Angular language service IntelliJ IDEA provides full Angular-specific coding assistance including code completion, error detection and highlighting, hints, and navigation inside Angular templates. You can configure to get coding assistance for Angular projects from the [Angular language service](https://angular.dev/tools/language-service), from the [TypeScript Language Service](https://github.com/Microsoft/TypeScript/wiki/Using-the-Language-Service-API), or only from the internal IntelliJ IDEA parser and code inspections. By default, the Angular language service is enabled and is listed in the Language services wizard on the Status bar. Procedure: 1. To open the Angular settings, click ![the language services running on current file icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_language_service_status_bar.png) on the Status bar and click ![the Open Settings icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.general.settings.svg). ![Angular language service widget](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_ls_widget_angular.png) Alternatively, press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and select Settings | Languages & Frameworks | TypeScript | Angular . 2. Specify the service to get coding assistance for `.ts` files from. * By default, the Auto option is selected so IntelliJ IDEA automatically enables the [Angular language service](https://angular.dev/tools/language-service) in any appropriate context. As a result, type evaluation is performed based on the data from the TypeScript language service while internal IntelliJ IDEA inspections are also applied. * Select the Disabled option to get coding assistance based only on the data from the internal IntelliJ IDEA parser and inspections. Procedure: Restart the Angular language service * Click ![the language services running on current file icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_language_service_status_bar.png) on the Status bar and then click ![the Restart Service icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.run.restartFailedTests.svg) next to Angular TypeScript . ![Angular language service widget - Restart Service](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_ls_widget_angular_restart.png) Procedure: Configure type evaluation * Click ![the Service-Powered Type Engine icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/service_powered_type_engine_status_bar.png) on the Status bar and select the checkboxes next to the services from which you want to get type evaluation. Restart IntelliJ IDEA, when ready. ![Service-Powered Type Engine widget](https://resources.jetbrains.com.cn/help/img/idea/2026.2/service_powered_type_engine_widget.png) * Alternatively, press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and select Settings | Languages & Frameworks | TypeScript | Angular , select Auto, and then select Enable service-powered type engine checkbox. By default, the checkbox is cleared, so type evaluation, resolution, code inspections and refactorings are based on the type information from the IntelliJ IDEA internal TypeScript engine. This default behavior may result in performance issues and in bugs in type resolution because the type evaluation algorithm that the IntelliJ IDEA internal TypeScript engine uses differs from the algorithm of the Angular language service. Selecting the checkbox may help avoid these problems. > **Note:** > Some of the code highlighting and completion are always retrieved from the appropriate language service, if the TypeScript Language Service checkbox on the [TypeScript page](settings-languages-typescript.html) is selected and Angular language service is in the Auto state, no matter whether the Enable service-powered type engine checkbox is selected or cleared. #### Configure memory handling Although IntelliJ IDEA strives at providing slick integration with language services, there may still arise out-of-memory errors induced by a language service rather than by IntelliJ IDEA itself. To prevent out-of-memory errors or have them solved seamlessly, thus ensuring stable operation of language services, you can configure memory handling. Learn more from [Language Services](language-services.html) Memory handling settings for the Angular language service are always inherited from the TypeScript language service. Procedure: Configure memory handling for TypeScript language service 1. Open settings by pressing `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) and navigate to `Settings | Languages & Frameworks | Language Services | TypeScript`. 2. In the Language Services Memory area, choose the memory handling mode: * Select Automatically increase memory, if available to have memory increased and language services restarted silently. * Alternatively, select Set memory limit and specify the maximum memory to use by a language service. If the specified memory size exceeds the available RAM, IntelliJ IDEA suggests an appropriate value in a tooltip. > **Note:** > Make sure your computer has enough available RAM. If you are already at a high allocation, for example, 8GB+, consider [upgrading/downgrading](language-services.html#ls_upgrade_downgrade) or [limiting your > project scope](language-services.html#ls_limit_project_scope). ### Components With IntelliJ IDEA, you can create Angular components in several ways: * [Use a predefined or custom live template](#ws_angular_create_component_predefined_template). * [Create a component folder](#ws_angular_create_component_folder) with a bunch of related `.ts`, `.html`, and `.css` files. * [Extract a component from a template](#ws_angular_component_extract) using a dedicated refactoring. Procedure: Create a component using a predefined template IntelliJ IDEA provides predefined [live templates](using-live-templates.html) for creating Angular components, such as `a-component`, `a-component-inline`, and `a-component-root`. ![Create an Angular component using a predefined code snippet](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_create_angular_component_predefined_template.animated.gif) For more information about live templates, refer to [Live templates](using-live-templates.html). To view a full list of predefined templates, open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Live Templates`, and expand the Angular node. 1. In the editor, press `Ctrl+J` (Windows), `⌘ J` (macOS), `⌘ J` (IntelliJ IDEA Classic (macOS)), `⌘ J` (macOS System Shortcuts), `Ctrl+J` (XWin), `Ctrl+J` (GNOME), `Ctrl+J` (KDE), `Ctrl+J` (Emacs), `Ctrl+J` (Sublime Text), `Ctrl+J` (Sublime Text (macOS)), `Ctrl+J` (NetBeans), `Ctrl+K, X` (Visual Studio), `⌘ E, L` (Visual Studio (macOS)), `Ctrl+Alt+Shift+J` (Eclipse), `Ctrl+J` (Eclipse (macOS)), select the appropriate template (for example, `a-component`) from the list, and then press `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (NetBeans), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (Eclipse), `⏎` (Eclipse (macOS)). 2. IntelliJ IDEA 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](https://angular.io/guide/styleguide#component-selectors). 3. If necessary, make the new component [standalone](https://angular.io/guide/standalone-components) using the inspection pop-up. ![Make component standalone](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_create_angular_component_make_standalone.png) Learn how to customize a template with variables from [Using and Creating Code Snippets](https://blog.jetbrains.com/webstorm/2018/01/using-and-creating-code-snippets/) in WebStorm Blog. Procedure: Create a component folder In IntelliJ IDEA, 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](templates-with-multiple-files.html). 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` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), 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 (![the Create Template button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg)) on the toolbar. ![Add new template](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_component_create_folder_add_icon.png) 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: ```CONSOLE /* * Created by ${USER} on ${DATE} */ import { Component } from '@angular/core'; ``` ![Create parent template](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_component_create_folder_parent_template.png) 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 ![the Create Child Template File](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.actions.addFile.svg) on the toolbar. ![Add child template icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_component_create_child_file_add_icon.png) 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. ![Create child template: component.html](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_component_create_folder_child_template.png) Click Apply. 4. Create a child template for the related Style Sheet. 1. Select the parent template Angular Component and click ![the Create Child Template File](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.actions.addFile.svg) 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). ![Create an Angular component from a multiple files template in a separate folder](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_component_create_folder.animated.gif) Procedure: 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` (Windows), `⌃ T` (macOS), `⌘ ⌥ ⇧ T` (IntelliJ IDEA Classic (macOS)), `⌃ S` (macOS System Shortcuts), `Ctrl+Alt+Shift+T` (XWin), `Ctrl+Alt+Shift+T` (GNOME), `Ctrl+Alt+Shift+T` (KDE), `Ctrl+Alt+Shift+T` (Emacs), `Ctrl+Alt+Shift+T` (Sublime Text), `⌃ T` (Sublime Text (macOS)), `Ctrl+Alt+Shift+T` (NetBeans), `Ctrl+Shift+R` (Visual Studio), `⌘ ⇧ R` (Visual Studio (macOS)), `Ctrl+Alt+Shift+T` (Eclipse), `⌃ T` (Eclipse (macOS)) and select `Extract Component` from the Refactor This popup. ![Extract a component: Refactor This](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_extract_angular_component_refactor_this.png) 3. In the dialog that opens, specify the name of the new component. ### Standalone components If your project uses [Angular 19](https://blog.angular.dev/meet-angular-v19-7b29dfd05b84), Components, Pipes and Directives are by default `standalone`. For components that are declared via `NgModules`, set `standalone: false`. IntelliJ IDEA detects incorrect imports of `non-standalone` pipes, directives or components and usages of the `imports` property within non-standalone components: ![Incorrect usage imports directives in non-standalone components](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_imports_property_in_non_standalone_components.png) ### Signals With IntelliJ IDEA, you can easily create [Angular signals](https://angular.io/guide/signals) straight from [signal](https://angular.io/guide/signals#writable-signals), [computed](https://angular.io/guide/signals#computed-signals), and [effect](https://angular.io/guide/signals#effects) templates. ![Angular signals](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_signals.animated.gif) Procedure: Create signals 1. Write the function you need. IntelliJ IDEA runs an inspection and highlights the new function as unresolved. 2. Hover over the highlighted function and click the Create signal '' link in the popup. ![Create Angular signal: inspection popup](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_signal_create_popup.png) Alternatively, place the cursor at the highlighted function, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)), and select `Create signal ''`. ![Create Angular signal: intention action](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_signal_create_intention_action.png) 3. IntelliJ IDEA brings you to the component TypeScript file where a stub of the new signal is generated. Fill in the placeholders as necessary. > **Note:** > When you create a signal manually, IntelliJ IDEA suggests completion variants as you type. > > > > ![Create Angular signal: code completion](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_signal_create_completion.png) IntelliJ IDEA recognizes, highlights, provides documentation and completion, and supports navigation for `contentChild`, `contentChilden`, `viewChild`, and `viewChildren` [signal queries](https://angular.dev/guide/components/queries). [Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_signal_based_queries.mp4) Procedure: Configure highlighting for Angular signals 1. Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and select Editor | Color Scheme | Angular Template. 2. Select Signal in the list and click the color indication next to Foreground. ![Angular signal: configure highlighting](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_signal_highlighting.png) 3. Select the color you prefer and click Apply. ### Structural directives IntelliJ IDEA recognizes [structural directives](https://angular.dev/guide/directives/structural-directives) and provides highlighting within templates. For binding keys and template context properties, completion is suggested in a popup: ![Structural directives - completion](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_structural_directives_completion.png) Rename refactoring is provided for template binding keys mapped to directive inputs. Parameter info popup shows automatically on completing attributes or on pressing `Ctrl+P` (Windows), `⌘ P` (macOS), `⌘ P` (IntelliJ IDEA Classic (macOS)), `⌘ P` (macOS System Shortcuts), `Ctrl+P` (XWin), `Ctrl+P` (GNOME), `Ctrl+P` (KDE), `Alt+Shift+P` (Emacs), `Ctrl+P` (Sublime Text), `Ctrl+P` (Sublime Text (macOS)), `Ctrl+P` (NetBeans), `Ctrl+Shift+Space` (Visual Studio), `⌘ P` (Visual Studio (macOS)), `Ctrl+P` (Eclipse), `⌃ ⇧ Space` (Eclipse (macOS)). ![Structural directives - parameter info popup](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_structural_directives_parameter_info_popup.png) ### Host listeners and bindings IntelliJ IDEA provides full support for [host listeners](https://angular.dev/api/core/HostListener) and [bindings](https://angular.dev/api/core/HostBinding). * Completion, highlighting, quick documentation for `@HostListener` and `@HostBinding` decorators. ![Support for @HostListener and HostBinding decorators](https://resources.jetbrains.com.cn/help/img/idea/2026.2/host_decorators_support.png) * Event completion for `@HostListener` ![event completion for HostListeners](https://resources.jetbrains.com.cn/help/img/idea/2026.2/host_listeners_event_completion.png) * [Type Check Blocks (TCB)](https://blog.angular.dev/how-the-angular-compiler-works-42111f9d2549) are generated for host binding. * Support for CSS classes across host bindings and HTML templates ![Usages of CSS classes in host bindings](https://resources.jetbrains.com.cn/help/img/idea/2026.2/css_classes_in_host_listeners_and_bindings.png) ### Reactive forms IntelliJ IDEA provides support for [Angular Reactive Forms](https://angular.dev/guide/forms/reactive-forms). * Building nested form group model structure from field initializer with the `new FormGroup({.. .})` and with `FormBuilder.group({...})` calls as well as field initialization in a constructor with the `FormBuilder.group({...})` call. IntelliJ IDEA recognizes `control`, `group` and `array` within the form group object initializer, new instance calls (`FormGroup`, `FormControl` and `FormArray`), and as well as `FormBuilder` methods. ![Completion and quick doc in Reactive Forms](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_reactive_forms_completion_and_quick_doc.png) * For `FormGroup.get()` call, IntelliJ IDEA provides code completion, name validation, quick fixes for unknown segments and syntax highlighting within the string literals. ![Completion and quick doc in FormGroup.get()](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_reactive_forms_form_group_get_completion_and_quick_doc.png) * For `formControlName`, `formGroupName`, and `formArrayName` in HTML templates, code completion, name validation, quick fixes to create missing control, syntax highlighting, and structural dependency is provided. ![Structural dependency in Reactive Forms](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_reactive_forms_structural_dependency.png) ### Incremental hydration IntelliJ IDEA supports [Angular 19 @defer hydrate syntax](https://github.com/angular/angular/discussions/57664). * Code completion ![Code completion for @defer syntax](https://resources.jetbrains.com.cn/help/img/idea/2026.2/incremental_hydration_code_completion.png) * Quick documentation lookup ![Quick documentation for @defer syntax](https://resources.jetbrains.com.cn/help/img/idea/2026.2/incremental_hydration_quick_doc.png) * Error reporting for Angular version earlier than 19. ![Error messages for @defer syntax in Angular earlier than 19](https://resources.jetbrains.com.cn/help/img/idea/2026.2/incremental_hydration_angular_version_17_error.png) ### Wrap HTML templates in Control Flow blocks Procedure: * In an Angular HTML template, select a code fragment, press `Ctrl+Alt+T` (Windows), `⌘ ⌥ T` (macOS), `⌘ ⌥ T` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ T` (macOS System Shortcuts), `Ctrl+Alt+Shift+B` (XWin), `Ctrl+Alt+Shift+B` (GNOME), `Ctrl+Alt+Shift+B` (KDE), `Ctrl+Alt+T` (Emacs), `Ctrl+Alt+T` (Sublime Text), `⌘ ⌥ T` (Sublime Text (macOS)), `Ctrl+Alt+T` (NetBeans), `Ctrl+Alt+T` (Visual Studio), `Ctrl+Alt+T` (Visual Studio (macOS)), `Alt+Shift+Z` (Eclipse), `⌘ ⌥ Z` (Eclipse (macOS)), and then select the enclosing code from the list. ![Wrap HTML block](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_wrap_html_in_control_flow_blocks.png) ### Add new features with ng add You can add most [published Angular libraries](https://angular.dev/tools/libraries/using-libraries) using the Angular Dependency action. This action runs the [ng add command](https://angular.dev/cli/add) which installs the dependency and updates the app in the current working directory to use that dependency. Note that not all libraries support installation with `ng add`. Procedure: 1. Select `File | New` from the main menu or press `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Alt+Insert` (NetBeans), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS)) in the Project tool window (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) , 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. ![Adding Angular Material to a project with ng add](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_ng_add.animated.gif) If you manage dependencies manually through your `package.json`, IntelliJ IDEA still recognizes packages that support `ng add`. When you add such package to `package.json`, IntelliJ IDEA suggests installing it with `ng add`. ![IntelliJ IDEA suggests adding a dependency with ng add](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_install_with_ng_add_inspection.png) ### Generate code with Angular Schematics IntelliJ IDEA can generate code using both schematics defined in libraries like `@angular/material` and those defined in Angular CLI itself. Procedure: 1. Select `File | New` from the main menu or press `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Alt+Insert` (NetBeans), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS)) 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. ![Choosing Angular Schematic](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_generate_angular_cli_schematic.png) 3. In the dialog that opens, specify the name of the schematic to be generated and additional options, if necessary. IntelliJ IDEA shows the description of the schematic and provides code completion and description for available options. ![Generating Angular CLI schematic: code completion and description is provided](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_generate_angular_schematic_options_completion.png) ### View parameter hints In Angular HTML templates, Parameter hints show the names of parameters in methods and functions to make your code easier to read. In templates, information on block parameters is shown on completion. Procedure: Configure parameter hints 1. Open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))) 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, IntelliJ IDEA 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. ![Configure parameter hints in Angular templates](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_view_parameter_hints.png) ## Inspect your code IntelliJ IDEA brings a number of Angular-specific inspections that help you find errors as you edit your code and suggest quick-fixes for them. ### Duplicate properties In the example below, both a `template` and a `templateUrl` properties are used. IntelliJ IDEA detects the error, warns you about it, and suggests a quick-fix. ![Angular inspection: duplicate properties](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_inspection_duplicate_template.png) ### Incorrect use of structural directives IntelliJ IDEA warns you about incorrect use of the `*ngIf` and `*ngFor` structural directives. ![Angular inspection: incorrect use of structural directive](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_inspection_structural_template.png) ### Use of standalone components Angular-specific inspections help you identify improper usage of [standalone components](https://angular.io/guide/standalone-components). In the example below, IntelliJ IDEA detects an import statement for a component that is not standalone and suggests a quick-fix for the problem. ![A non-standalone is imported directly](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_inspections_import_non_standalone.animated.gif) ### Unused imports In `standalone` components, IntelliJ IDEA detects import statements for unused components, pipes, and directives and suggests removing them. ![Angular inspection - unused import](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_inspection_unused_imports.png) Unused import statements can be also removed automatically on reformatting a file (`Ctrl+Alt+Shift+L` (Windows), `⌘ ⌥ ⇧ L` (macOS), `⌘ ⌥ ⇧ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ ⇧ L` (macOS System Shortcuts), `Ctrl+Alt+Shift+L` (XWin), `Ctrl+Alt+Shift+L` (GNOME), `Ctrl+Alt+Shift+L` (KDE), `Ctrl+Alt+Shift+L` (Emacs), `Ctrl+Alt+Shift+L` (Sublime Text), `⌘ ⌥ ⇧ L` (Sublime Text (macOS)), `Ctrl+Alt+Shift+L` (NetBeans), `Ctrl+Alt+Shift+L` (Visual Studio), `⌘ ⌥ ⇧ L` (Visual Studio (macOS)), `Ctrl+Alt+Shift+L` (Eclipse), `⌘ ⌥ ⇧ L` (Eclipse (macOS))). [Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_inspect_remove_unused_import_on_reformat_file.mp4) > **Note:** > The inspection is available only for `standalone` components but not for imported `NgModules`. ### Quick-fixes and context-aware actions You may find it handy to use quick-fixes for creating `@Input` and `@Output` properties from Angular component templates, both with or without a `transform` property. Note that the required import statements are also generated automatically. ![Quick-fix to generate @Input and @Output properties](https://resources.jetbrains.com.cn/help/img/idea/2026.2/angular_inspection_input_output.animated.gif) IntelliJ IDEA also provides context-aware Create Field and Create Method actions that help you generate properly declared fields. Procedure: View and configure Angular-specific inspections 1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), 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](code-inspection.html) . ## Navigate through an Angular application When working on Angular projects, you have to jump between different component files, such as TypeScript, template, and style files. To navigate around your code, you can use the following options: * [Navigation bar](file-navigation.html#navigate-with-navigation-bar) * [Project tool window](project-tool-window.html#views) * [The Go to File action](searching-everywhere.html#search_all) * [The Related Symbol popup](#ws_angular_navigation_procedure) * [Usages](#ws_angular_navigation_with_find_usages) * [Navigation popup](#ws_angular_navigation_popup) Also, you can download the [Angular CLI QuickSwitch plugin](https://plugins.jetbrains.com/plugin/10587-angular-cli-quickswitch) and [install it on your computer](managing-plugins.html#install_plugin_from_disk). Procedure: Navigate with the Related Symbol popup 1. To call a popup with a list of related files, perform one of the following actions: * Click ![Goto Related](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_navigation_popup_gotorelated.png) in the navigation popup. * Press `Ctrl+Alt+Home` (Windows), `⌘ ⌃ ↑` (macOS), `⌘ ⌥ Home` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ ↓` (macOS System Shortcuts), `Ctrl+Alt+Home` (XWin), `Ctrl+Alt+Home` (GNOME), `Ctrl+Alt+Home` (KDE), `Ctrl+Alt+Home` (Emacs), `Ctrl+Alt+Home` (Sublime Text), `Ctrl+Alt+Home` (Sublime Text (macOS)), `Ctrl+Alt+Home` (NetBeans), `Ctrl+Alt+F7` (Visual Studio), `⌘ ⇧ F7` (Visual Studio (macOS)), `Ctrl+Alt+Home` (Eclipse), `⌘ ⌃ ↑` (Eclipse (macOS)). * Select `Navigate | Related Symbol…` from the main menu. * Right-click any area in the editor and select `Go To | Related Symbol…`. * Click ![Goto Related](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_navigation_popup_gotorelated.png) in the [navigation popup](#ws_angular_navigation_popup). ![Open the Go To Related Symbol popup from the navigation popup](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_navigation_popup_same_file.png) In a TypeScript component file, the popup also lists all the symbols that were imported into this file. ![Navigating through an Angular app using the Related Symbol popup](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_navigate_between_components.png) 2. To open a file, select it and press `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (NetBeans), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (Eclipse), `⏎` (Eclipse (macOS)). Alternatively, use the numbers associated with each file type: 1. The TypeScript file with the component class 2. Template 3. Tests 4. Styles Procedure: Navigate with usages * Place the caret at the declaration of a symbol and press `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `Ctrl+B` (NetBeans), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `F3` (Eclipse), `F3` (Eclipse (macOS)). If the symbol is used only once, IntelliJ IDEA brings you to this usage and highlights it. If several usages are found, IntelliJ IDEA shows them in a popup. Select the usage to navigate to and press `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (NetBeans), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) or just click it in the list. * Place the caret at the declaration of a symbol and press `Ctrl+Alt+F7` (Windows), `⌘ ⌥ F7` (macOS), `⌘ ⌥ F7` (IntelliJ IDEA Classic (macOS)), `⌃ ⌥ U` (macOS System Shortcuts), `Ctrl+Alt+7` (XWin), `Ctrl+Alt+7` (GNOME), `Ctrl+Alt+7` (KDE), `Ctrl+Alt+F7` (Emacs), `Shift+F12` (Sublime Text), `⇧ F12` (Sublime Text (macOS)), `Ctrl+Alt+F7` (NetBeans), `Alt+Shift+F12` (Visual Studio), `⌥ ⇧ F12` (Visual Studio (macOS)), `Ctrl+Alt+F7` (Eclipse), `⌘ ⌥ F7` (Eclipse (macOS)). Use the icons on the toolbar to show or hide references to components in import statements (![the Show import statements button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.actions.showImportStatements.svg)), in string literals (![the Show Dynamic Usages button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_find_usages_show_dynamic_usages.png)), and in HTML files (![the Show Component Usages icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/markdown.icons.editor_actions.Code_span.svg). [Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_navigation_with_find_usages.mp4) * Click the [Show usages hint](inlay-hints.html) to jump to the usage or to select the relevant one from the list. Procedure: Use navigation popup * To enable the navigation popup, press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)), go to `Advanced Settings` and then select the Show navigation popup in editor checkbox in the Angular area. Use the search field to locate the checkbox easier. ![Disable the Angular navigation popup](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_navigation_popup_disable.png) * To access the navigation popup, hover anywhere in the editor. The set of icons in the popup depends on the type of the file in the current editor tab and the files that a component contains. * To jump between files within a component, click the corresponding icons, for example, to jump to a `.component.html` file, click ![HTML file](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.fileTypes.html.svg). [Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_navigation_popup.mp4) * Use the popup to navigate to styles and templates within a file. [Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_navigation_popup_same_file.mp4) * Click ![Goto Related](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_navigation_popup_gotorelated.png) to open a popup with a list of related files. ## Use Angular Material Design components IntelliJ IDEA recognizes [Angular Material](https://material.angular.io/) components and attributes and provides coding assistance for them: * Completion for components ![A list of suggested completion variants for an Angular component](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_material_component.png) * Completion for attributes ![A list of suggested completion variants for an Angular attribute](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_material_attribute.png) * Navigation between a component or an attribute and its declaration (press `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `Ctrl+B` (NetBeans), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `F3` (Eclipse), `F3` (Eclipse (macOS)) or select `Go To | Declaration` from the context menu). Procedure: Install Angular Material * Open your command-line shell or the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) 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. ![AInstall Angualar Material](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_install_ang_material.png) Learn more from [Getting Started on the Angular Material official website](https://material.angular.io/guide/getting-started). ## Configure syntax highlighting In an Angular project, IntelliJ IDEA recognizes and highlights various symbols, such as CSS classes and properties, HTML attributes and tags, as well as Angular input and output bindings. The occurrences of these symbols are highlighted in various contexts, such as HTML attributes or JavaScript string literals. ![Highlighting symbols in various contexts](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_angular_syntax_highlighting.png) You can configure Angular-aware syntax highlighting according to your preferences and habits. Procedure: 1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), 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](configuring-colors-and-fonts.html). ## Use several frameworks within a project Sometimes you may need to use other frameworks within one Angular project. To get context-aware coding assistance in each file, create a configuration file `.ws-context` and specify which framework should be used in each particular file or folder. The settings from this file will override the default configuration. Procedure: 1. In the project root, select New | File from the context menu and specify `.ws-context` as the file name. 2. In `.ws-context`, use two types of properties: * `` with the context value string * A GLOB pattern with a context details object 3. Use the following context values: * `framework`: `vue`, `angular`, `react`, `svelte`, `astro` * `angular-template-syntax`: `V_2`, `V_17` * `nextjs-project`: `nextjs` * `astro-project`: `astro` * `vue-store`: `vuex`, `pinia` * `vue-class-component-library`: `vue-class-component`, `vue -property-decorator`, `vue-facing-decorator` * `jsdoc-dialect`: `jsdoc-typescript`, `jsdoc-closure` 4. Use path nesting for simplicity. * The last segment of a GLOB path is the file name pattern, it only supports the `*` wildcard. * If the last segment is a `**` it matches all nested directories and files. * Top level context properties should have the `/**` pattern. 5. When several patterns match the same file name, the following rules are used for disambiguation: * Choose the pattern with maximum number of path segments, excluding `**` segments. * Choose the pattern that is a pure file name pattern, which means that it does not end in `**` or `/`. * Choose the pattern that was defined first. ### Example Suppose you have a project with a number of frameworks used in various folders. ![A project with different frameworks](https://resources.jetbrains.com.cn/help/img/idea/2026.2/several_frameworks_context_project_structure.png) To get context-aware assistance for each file in the project, add the following code to `.ws-context`: ```JSON { "framework": "vue", "angular-template-syntax": "V_2", "src/**/app/**": { "framework": null, "app.component.html" : { "framework": "angular", "angular-template-syntax": "V_17" } }, "src/**/p*-editor/*.html" : { "framework" : "angular" } } ``` ## See also ### Procedures [AngularJS](angularjs.html) [Live templates](using-live-templates.html) [Style Sheets](style-sheets.html) [Running and debugging TypeScript](running-and-debugging-typescript.html) ### Web Resources [Angular Workflow in IntelliJ IDEA](https://blog.jetbrains.com/webstorm/2016/04/angular-2-workflow-in-webstorm/) [Debugging Angular](https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/) ### External Links [Angular CLI Reference](https://cli.angular.io/reference.pdf)