Angular has its own vocabulary.\nMost Angular terms are common English words or computing terms\nthat have a specific meaning within the Angular system.
\nThis glossary lists the most prominent terms\nand a few less familiar ones with unusual or\nunexpected definitions.
\nA B C D E F G H I\nJ K L M N O P Q R\nS T U V W X Y Z
\n\n\nThe Angular ahead-of-time (AOT) compiler converts Angular HTML and TypeScript code\ninto efficient JavaScript code during the build phase, before the browser downloads\nand runs that code.\nThis is the best compilation mode for production environments, with decreased load time and increased performance compared to just-in-time (JIT) compilation.
\nBy compiling your application using the ngc command-line tool, you can bootstrap directly to a module factory, so you don't need to include the Angular compiler in your JavaScript bundle.
An Angular component packaged as a custom element.
\nLearn more in Angular Elements Overview.
\n\nA structure that provides metadata for a class. See decorator.
\n\nApp shell is a way to render a portion of your application via a route at build time.\nThis gives users a meaningful first paint of your application that appears quickly because the browser can render static HTML and CSS without the need to initialize JavaScript.
\nLearn more in The App Shell Model.
\nYou can use the Angular CLI to generate an app shell.\nThis can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads.
\nSee also Service Worker and PWA.\n
\nThe tool that the CLI uses to perform complex tasks such as compilation and test running, according to a provided configuration.\nArchitect is a shell that runs a builder (defined in an npm package) with a given target configuration.
\nIn the workspace configuration file, an \"architect\" section provides configuration options for Architect builders.
\nFor example, a built-in builder for linting is defined in the package @angular-devkit/build_angular:tslint, which uses the TSLint tool to perform linting, with a configuration specified in a tslint.json file.
Use the CLI command ng run to invoke a builder by specifying a target configuration associated with that builder.\nIntegrators can add builders to enable tools and workflows to run through the Angular CLI. For example, a custom builder can replace the third-party tools used by the built-in implementations for CLI commands such as ng build or ng test.
A category of directive that can listen to and modify the behavior of\nother HTML elements, attributes, properties, and components. They are usually represented\nas HTML attributes, hence the name.
\nLearn more in Attribute Directives.
\n\n\nGenerally, the practice of setting a variable or property to a data value.\nWithin Angular, typically refers to data binding,\nwhich coordinates DOM object properties with data object properties.
\nSometimes refers to a dependency-injection binding\nbetween a token and a dependency provider.
\n\nA way to initialize and launch an app or system.
\nIn Angular, an app's root NgModule (AppModule) has a bootstrap property that identifies the app's top-level components.\nDuring the bootstrap process, Angular creates and inserts these components into the index.html host web page.\nYou can bootstrap multiple apps in the same index.html. Each app contains its own components.
Learn more in Bootstrapping.
\n\nA function that uses the Architect API to perform a complex process such as \"build\" or \"test\".\nThe builder code is defined in an npm package.
\nFor example, BrowserBuilder runs a webpack build for a browser target and KarmaBuilder starts the Karma server and runs a webpack build for unit tests.
\nThe CLI command ng run invokes a builder with a specific target configuration.\nThe workspace configuration file, angular.json, contains default configurations for built-in builders.
Angular uses capitalization conventions to distinguish the names of various types, as described in the naming guidelines section of the Style Guide. Here's a summary of the case types:
\ncamelCase : Symbols, properties, methods, pipe names, non-component directive selectors, constants.\nStandard or lower camel case uses lowercase on the first letter of the item. For example, \"selectedHero\".
\nUpperCamelCase (or PascalCase): Class names, including classes that define components, interfaces, NgModules, directives, and pipes,\nUpper camel case uses uppercase on the first letter of the item. For example, \"HeroListComponent\".
\ndash-case (or \"kebab-case\"): Descriptive part of file names, component selectors. For example, \"app-hero-list\".
\nunderscore_case (or \"snake_case\"): Not typically used in Angular. Snake case uses words connected with underscores.\nFor example, \"convert_link_mode\".
\nUPPER_UNDERSCORE_CASE (or UPPER_SNAKE_CASE, or SCREAMING_SNAKE_CASE): Traditional for constants (acceptable, but prefer camelCase).\nUpper snake case uses words in all capital letters connected with underscores. For example, \"FIX_ME\".
\nThe mechanism by which the Angular framework synchronizes the state of an application's UI with the state of the data.\nThe change detector checks the current state of the data model whenever it runs, and maintains it as the previous state to compare on the next iteration.
\nAs the application logic updates component data, values that are bound to DOM properties in the view can change.\nThe change detector is responsible for updating the view to reflect the current data model.\nSimilarly, the user can interact with the UI, causing events that change the state of the data model.\nThese events can trigger change detection.
\nUsing the default (\"CheckAlways\") change-detection strategy, the change detector goes through the view hierarchy on each VM turn to check every data-bound property in the template. In the first phase, it compares the current state of the dependent data with the previous state, and collects changes.\nIn the second phase, it updates the page DOM to reflect any new data values.
\nIf you set the OnPush (\"CheckOnce\") change-detection strategy, the change detector runs only when explicitly invoked, or when it is triggered by an Input reference change or event handler. This typically improves performance. For more information, see Optimize Angular's change detection.
A decorator that appears immediately before a class definition, which declares the class to be of the given type, and provides metadata suitable to the type.
\nThe following decorators can declare Angular class types:
\n@Component()@Directive()@Pipe()@Injectable()@NgModule()A decorator statement immediately before a field in a class definition that declares the type of that field. Some examples are @Input and @Output.
In Angular, a set of related schematics collected in an npm package.
\n\nThe Angular CLI is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a workspace or project, and to run schematics that add and modify code for initial generic versions of various elements. The CLI supports all stages of the development cycle, including building, testing, bundling, and deployment.
\nSee also Schematics CLI.
\n\nA class with the @Component() decorator that associates it with a companion template. Together, the component class and template define a view.\nA component is a special type of directive.\nThe @Component() decorator extends the @Directive() decorator with template-oriented features.
An Angular component class is responsible for exposing data and handling most of the view's display and user-interaction logic through data binding.
\nRead more about component classes, templates, and views in Introduction to Angular concepts.
\nA way to insert DOM content from outside a component into the component's view in a designated spot.
\nFor more information, see Responding to changes in content.
\n\nA web platform feature, currently supported by most browsers and available in other browsers through polyfills (see Browser support).
\nThe custom element feature extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. A custom element (also called a web component) is recognized by a browser when it's added to the CustomElementRegistry.
\nYou can use the API to transform an Angular component so that it can be registered with the browser and used in any HTML that you add directly to the DOM within an Angular app. The custom element tag inserts the component's view, with change-detection and data-binding functionality, into content that would otherwise be displayed without Angular processing.
\nSee Angular element.
\nSee also dynamic component loading.
\n\n\nA process that allows apps to display data values to a user and respond to user\nactions (such as clicks, touches, and keystrokes).
\nIn data binding, you declare the relationship between an HTML widget and a data source\nand let the framework handle the details.\nData binding is an alternative to manually pushing application data values into HTML, attaching\nevent listeners, pulling changed values from the screen, and\nupdating application data values.
\nRead about the following forms of binding in Angular's Template Syntax:
\nA class type that you can add to the declarations list of an NgModule.\nYou can declare components, directives, and pipes.
Don't declare the following:
\nFORMS_DIRECTIVES from @angular/formsA function that modifies a class or property definition. Decorators (also called annotations) are an experimental (stage 2) JavaScript language feature.\nTypeScript adds support for decorators.
\nAngular defines decorators that attach metadata to classes or properties\nso that it knows what those classes or properties mean and how they should work.
\nSee class decorator, class field decorator.
\n\n\nA design pattern and mechanism for creating and delivering some parts of an application (dependencies) to other parts of an application that require them.
\nIn Angular, dependencies are typically services, but they also can be values, such as strings or functions.\nAn injector for an app (created automatically during bootstrap) instantiates dependencies when needed, using a configured provider of the service or value.
\nLearn more in Dependency Injection in Angular.
\n\nA lookup token associated with a dependency provider, for use with the dependency injection system.
\n\nA build technique that creates two bundles for an application. One smaller bundle is for modern browsers. A second, larger bundle allows the application to run correctly in older browsers (such as IE11) that do not support all modern browser APIs.
\nFor more information, see the Deployment guide.
\n\n\nA class that can modify the structure of the DOM or modify attributes in the DOM and component data model. A directive class definition is immediately preceded by a @Directive() decorator that supplies metadata.
A directive class is usually associated with an HTML element or attribute, and that element or attribute is often referred to as the directive itself. When Angular finds a directive in an HTML template, it creates the matching directive class instance and gives the instance control over that portion of the browser DOM.
\nThere are three categories of directive:
\nComponents use @Component() (an extension of @Directive()) to associate a template with a class.
Attribute directives modify behavior and appearance of page elements.
\nStructural directives modify the structure of the DOM.
\nAngular supplies a number of built-in directives that begin with the ng prefix.\nYou can also create new directives to implement your own functionality.\nYou associate a selector (an HTML tag such as <my-directive>) with a custom directive, thereby extending the template syntax that you can use in your apps.
UpperCamelCase, such as NgIf, refers to a directive class.\nYou can use UpperCamelCase when describing properties and directive behavior.
lowerCamelCase, such as ngIf refers to a directive's attribute name.\nYou can use lowerCamelCase when describing how to apply the directive to an element in the HTML template.
A special-purpose library or API; see Domain-specific language.\nAngular extends TypeScript with domain-specific languages for a number of domains relevant to Angular apps, defined in NgModules such as animations, forms, and routing and navigation.
\n\nA technique for adding a component to the DOM at run time. Requires that you exclude the component from compilation and then connect it to Angular's change-detection and event-handling framework when you add it to the DOM.
\nSee also custom element, which provides an easier path with the same result.
\n\n\nNgModules or components that are loaded on launch are called eager-loaded, to distinguish them from those\nthat are loaded at run time (lazy-loaded).\nSee lazy loading.
\n\nThe official JavaScript language specification.
\nNot all browsers support the latest ECMAScript standard, but you can use a transpiler (like TypeScript) to write code using the latest features, which will then be transpiled to code that runs on versions that are supported by browsers.
\nTo learn more, see Browser Support.
\n\nAngular defines an ElementRef class to wrap render-specific native UI elements.\nIn most cases, this allows you to use Angular templates and data binding to access DOM elements\nwithout reference to the native element.
The documentation generally refers to elements (ElementRef instances), as distinct from DOM elements\n(which can be accessed directly if necessary).
Compare to custom element.
\n\nA JavaScript module that is intended to be imported by a user of an\nnpm package. An entry-point module typically re-exports\nsymbols from other internal modules. A package can contain multiple\nentry points. For example, the @angular/core package has two entry-point\nmodules, which can be imported using the module names @angular/core and\n@angular/core/testing.
A instance of FormControl, which is a fundamental building block for Angular forms. Together with FormGroup and FormArray, tracks the value, validation, and status of a form input element.
Read more forms in the Introduction to forms in Angular.
\n\nThe \"source of truth\" for the value and validation status of a form input element at a given point in time. When using reactive forms, the form model is created explicitly in the component class. When using template-driven forms, the form model is implicitly created by directives.
\nLearn more about reactive and template-driven forms in the Introduction to forms in Angular.
\n\nA check that runs when form values change and reports whether the given values are correct and complete, according to the defined constraints. Reactive forms apply validator functions. Template-driven forms use validator directives.
\nTo learn more, see Form Validation.
\n\n\n\n\nThe ability to alter the state of a value after its creation. Reactive forms perform immutable changes in that\neach change to the data model produces a new data model rather than modifying the existing one. Template-driven forms perform mutable changes with NgModel and two-way data binding to modify the existing data model in place.
An Angular class or other definition that provides a dependency using the dependency injection mechanism. An injectable service class must be marked by the @Injectable() decorator. Other items, such as constant values, can also be injectable.
An object in the Angular dependency-injection system\nthat can find a named dependency in its cache or create a dependency\nusing a configured provider.\nInjectors are created for NgModules automatically as part of the bootstrap process\nand are inherited through the component hierarchy.
\nAn injector provides a singleton instance of a dependency, and can inject this same instance in multiple components.
\nA hierarchy of injectors at the NgModule and component level can provide different instances of a dependency to their own components and child components.
\nYou can configure injectors with different providers that can provide different implementations of the same dependency.
\nLearn more about the injector hierarchy in Hierarchical Dependency Injectors.
\n\nWhen defining a directive, the @Input() decorator on a directive property\nmakes that property available as a target of a property binding.\nData values flow into an input property from the data source identified\nin the template expression to the right of the equal sign.
To learn more, see input and output properties.
\n\nA form of property data binding in which a template expression between double-curly braces renders as text.\nThat text can be concatenated with neighboring text before it is assigned to an element property\nor displayed between element tags, as in this example.
\nRead more in the Interpolation guide.
\n\nIvy is the code name for Angular's next-generation compilation and rendering pipeline.\nWith the version 9 release of Angular, the new compiler and runtime instructions are used by default instead of the older compiler and runtime, known as View Engine.
\nSee Angular Ivy.
\n\n\nSee ECMAScript, TypeScript.
\n\nThe Angular just-in-time (JIT) compiler converts your Angular HTML and TypeScript code into\nefficient JavaScript code at run time, as part of bootstrapping.
\nJIT compilation is the default (as opposed to AOT compilation) when you run Angular's ng build and ng serve CLI commands, and is a good choice during development.\nJIT mode is strongly discouraged for production use\nbecause it results in large application payloads that hinder the bootstrap performance.
Compare to ahead-of-time (AOT) compilation.
\n\n\n\nA process that speeds up application load time by splitting the application into multiple bundles and loading them on demand.\nFor example, dependencies can be lazy loaded as needed—as opposed to eager-loaded modules that are required by the root module and are thus loaded on launch.
\nThe router makes use of lazy loading to load child views only when the parent view is activated.\nSimilarly, you can build custom elements that can be loaded into an Angular app when needed.
\n\nIn Angular, a project that provides functionality that can be included in other Angular apps.\nA library isn't a complete Angular app and can't run independently.\n(To add re-usable Angular functionality to non-Angular web apps, you can use Angular custom elements.)
\nLibrary developers can use the Angular CLI to generate scaffolding for a new library in an existing workspace, and can publish a library as an npm package.
Application developers can use the Angular CLI to add a published library for use with an application in the same workspace.
See also schematic.
\n\nAn interface that allows you to tap into the lifecycle of directives and components as they are created, updated, and destroyed.
\nEach interface has a single hook method whose name is the interface name prefixed with ng.\nFor example, the OnInit interface has a hook method named ngOnInit.
Angular calls these hook methods in the following order:
\nngOnChanges: When an input/output binding value changes.ngOnInit: After the first ngOnChanges.ngDoCheck: Developer's custom change detection.ngAfterContentInit: After component content initialized.ngAfterContentChecked: After every check of component content.ngAfterViewInit: After a component's views are initialized.ngAfterViewChecked: After every check of a component's views.ngOnDestroy: Just before the directive is destroyed.To learn more, see Lifecycle Hooks.
\n\n\nIn general, a module collects a block of code dedicated to a single purpose. Angular uses standard JavaScript modules and also defines an Angular module, NgModule.
In JavaScript (ECMAScript), each file is a module and all objects defined in the file belong to that module. Objects can exported, making them public, and public objects can be imported for use by other modules.
\nAngular ships as a collection of JavaScript modules (also called libraries). Each Angular library name begins with the @angular prefix. Install Angular libraries with the npm package manager and import parts of them with JavaScript import declarations.
Compare to NgModule.
\n\n\nAngular compatibility compiler.\nIf you build your app using Ivy, but it depends on libraries that have not been compiled with Ivy, the CLI uses ngcc to automatically update the dependent libraries to use Ivy.
A class definition preceded by the @NgModule() decorator, which declares and serves as a manifest for a block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.
Like a JavaScript module, an NgModule can export functionality for use by other NgModules and import public functionality from other NgModules.\nThe metadata for an NgModule class collects components, directives, and pipes that the application uses along with the list of imports and exports. See also declarable.
\nNgModules are typically named after the file in which the exported thing is defined. For example, the Angular DatePipe class belongs to a feature module named date_pipe in the file date_pipe.ts. You import them from an Angular scoped package such as @angular/core.
Every Angular application has a root module. By convention, the class is called AppModule and resides in a file named app.module.ts.
To learn more, see NgModules.
\n\nThe npm package manager is used to distribute and load Angular modules and libraries.
\nLearn more about how Angular uses Npm Packages.
\n\nngc is a Typescript-to-Javascript transpiler that processes Angular decorators, metadata, and templates, and emits JavaScript code.\nThe most recent implementation is internally referred to as ngtsc because it's a minimalistic wrapper around the TypeScript compiler tsc that adds a transform for processing Angular code.
A producer of multiple values, which it pushes to subscribers. Used for asynchronous event handling throughout Angular. You execute an observable by subscribing to it with its subscribe() method, passing callbacks for notifications of new values, errors, or completion.
Observables can deliver single or multiple values of any type to subscribers, either synchronously (as a function delivers a value to its caller) or on a schedule. A subscriber receives notification of new values as they are produced and notification of either normal completion or error completion.
\nAngular uses a third-party library called Reactive Extensions (RxJS).
\nTo learn more, see Observables.
\n\nAn object passed to the subscribe() method for an observable. The object defines the callbacks for the subscriber.
When defining a directive, the @Output{} decorator on a directive property\nmakes that property available as a target of event binding.\nEvents stream out of this property to the receiver identified\nin the template expression to the right of the equal sign.
To learn more, see Input and Output Properties.
\n\n\nA class which is preceded by the @Pipe{} decorator and which defines a function that transforms input values to output values for display in a view. Angular defines various pipes, and you can define new pipes.
To learn more, see Pipes.
\n\nIn Angular terminology, a platform is the context in which an Angular application runs.\nThe most common platform for Angular applications is a web browser, but it can also be an operating system for a mobile device, or a web server.
\nSupport for the various Angular run-time platforms is provided by the @angular/platform-* packages. These packages allow applications that make use of @angular/core and @angular/common to execute in different environments by providing implementation for gathering user input and rendering UIs for the given platform. Isolating platform-specific functionality allows the developer to make platform-independent use of the rest of the framework.
When running in a web browser, BrowserModule is imported from the platform-browser package, and supports services that simplify security and event processing, and allows applications to access browser-specific features, such as interpreting keyboard input and controlling the title of the document being displayed. All applications running in the browser use the same platform service.
When server-side rendering (SSR) is used, the platform-server package provides web server implementations of the DOM, XMLHttpRequest, and other low-level features that don't rely on a browser.
An npm package that plugs gaps in a browser's JavaScript implementation.\nSee Browser Support for polyfills that support particular functionality for particular platforms.
\n\nIn the Angular CLI, a standalone application or library that can be created or modified by a CLI command.
\nA project, as generated by the ng new, contains the set of source files, resources, and configuration files that you need to develop and test the application using the CLI. Projects can also be created with the ng generate application and ng generate library commands.
For more information, see Project File Structure.
\nThe angular.json file configures all projects in a workspace.
An object that implements one of the Provider interfaces. A provider object defines how to obtain an injectable dependency associated with a DI token.\nAn injector uses the provider to create a new instance of a dependency\nfor a class that requires it.
Angular registers its own providers with every injector, for services that Angular defines.\nYou can register your own providers for services that your app needs.
\nSee also service, dependency injection.
\nLearn more in Dependency Injection.
\n\n\n\nA framework for building Angular forms through code in a component.\nThe alternative is a template-driven form.
\nWhen using reactive forms:
\nFormControl instance manually or with FormBuilder.ngModel.form, such as formControl, formGroup, and formControlName.The alternative is a template-driven form. For an introduction and comparison of both forms approaches, see Introduction to Angular Forms.
\n\nA class that implements the Resolve interface (or a function with the same signature as the resolve() method) that you use to produce or retrieve data that is needed before navigation to a requested route can be completed.
\nResolvers run after all route guards for a route tree have been executed and have succeeded.
\nSee an example of using a resolve guard to retrieve dynamic data.
\n\nA method that controls navigation to a requested route in a routing application.\nGuards determine whether a route can be activated or deactivated, and whether a lazy-loaded module can be loaded.
\nLearn more in the Routing and Navigation guide.
\n\n\nA tool that configures and implements navigation among states and views within an Angular app.
\nThe Router module is an NgModule that provides the necessary service providers and directives for navigating through application views. A routing component is one that imports the Router module and whose template contains a RouterOutlet element where it can display views produced by the router.
The router defines navigation among views on a single page, as opposed to navigation among pages. It interprets URL-like links to determine which views to create or destroy, and which components to load or unload. It allows you to take advantage of lazy loading in your Angular apps.
\nTo learn more, see Routing and Navigation.
\n\nA directive that acts as a placeholder in a routing component's template. Angular dynamically renders the template based on the current router state.
\n\nAn Angular component with a RouterOutlet directive in its template that displays views based on router navigations.
For more information, see Routing and Navigation.
\n\nIn schematics, a function that operates on a file tree to create, delete, or modify files in a specific manner.
\n\n\nA scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code.\nA schematic defines rules that operate on a virtual file system called a tree.
\nThe Angular CLI uses schematics to generate and modify Angular projects and parts of projects.
\nAngular provides a set of schematics for use with the CLI. See the Angular CLI command reference. The ng add command runs schematics as part of adding a library to your project. The ng generate command runs schematics to create apps, libraries, and Angular code constructs.
Library developers can create schematics that enable the Angular CLI to add and update their published libraries, and to generate artifacts the library defines.\nAdd these schematics to the npm package that you use to publish and share your library.
\nFor more information, see Schematics and Integrating Libraries with the CLI.
\n\nSchematics come with their own command-line tool.\nUsing Node 6.9 or above, install the Schematics CLI globally:
\nThis installs the schematics executable, which you can use to create a new schematics collection with an initial named schematic. The collection folder is a workspace for schematics. You can also use the schematics command to add a new schematic to an existing collection, or extend an existing schematic.
A way to group related npm packages.\nNgModules are delivered within scoped packages whose names begin with the Angular scope name @angular. For example, @angular/core, @angular/common, @angular/forms, and @angular/router.
Import a scoped package in the same way that you import a normal package.
\nA technique that generates static application pages on the server, and can generate and serve those pages in response to requests from browsers.\nIt can also pre-generate pages as HTML files that you serve later.
\nThis technique can improve performance on mobile and low-powered devices and improve the user experience by showing a static first page quickly while the client-side app is loading.\nThe static version can also make your app more visible to web crawlers.
\nYou can easily prepare an app for server-side rendering by using the CLI to run the Angular Universal tool, using the @nguniversal/express-engine schematic.
In Angular, a class with the @Injectable() decorator that encapsulates non-UI logic and code that can be reused across an application.\nAngular distinguishes components from services to increase modularity and reusability.
\nThe @Injectable() metadata allows the service class to be used with the dependency injection mechanism.\nThe injectable class is instantiated by a provider.\nInjectors maintain lists of providers and use them to provide service instances when they are required by components or other services.
To learn more, see Introduction to Services and Dependency Injection.
\n\n\nA category of directive that is responsible for shaping HTML layout by modifying the DOM—that is, adding, removing, or manipulating elements and their children.
\nTo learn more, see Structural Directives.
\n\nA function that defines how to obtain or generate values or messages to be published. This function is executed when a consumer calls the subscribe() method of an observable.
The act of subscribing to an observable triggers its execution, associates callbacks with it, and creates a Subscription object that lets you unsubscribe.
The subscribe() method takes a JavaScript object (called an observer) with up to three callbacks, one for each type of notification that an observable can deliver:
next notification sends a value such as a number, a string, or an object.error notification sends a JavaScript Error or exception.complete notification doesn't send a value, but the handler is called when the call completes. Scheduled values can continue to be returned after the call completes.A buildable or runnable subset of a project, configured as an object in the workspace configuration file, and executed by an Architect builder.
\nIn the angular.json file, each project has an \"architect\" section that contains targets which configure builders. Some of these targets correspond to CLI commands, such as build, serve, test, and lint.
For example, the Architect builder invoked by the ng build command to compile a project uses a particular build tool, and has a default configuration with values that you can override on the command line. The build target also defines an alternate configuration for a \"development\" build, which you can invoke with the --configuration development flag on the build command.
The Architect tool provides a set of builders. The ng new command provides a set of targets for the initial application project. The ng generate application and ng generate library commands provide a set of targets for each new project. These targets, their options and configurations, can be customized to meet the needs of your project. For example, you may want to add a \"staging\" or \"testing\" configuration to a project's \"build\" target.
You can also define a custom builder, and add a target to the project configuration that uses your custom builder. You can then run the target using the ng run CLI command.
Code that defines how to render a component's view.
\nA template combines straight HTML with Angular data-binding syntax, directives,\nand template expressions (logical constructs).\nThe Angular elements insert or calculate values that modify the HTML elements before the page is displayed. Learn more about Angular template language in the Template Syntax guide.
\nA template is associated with a component class through the @Component() decorator. The template code can be provided inline, as the value of the template property, or in a separate HTML file linked through the templateUrl property.
Additional templates, represented by TemplateRef objects, can define alternative or embedded views, which can be referenced from multiple components.
A format for building Angular forms using HTML forms and input elements in the view.\nThe alternative format uses the reactive forms framework.
\nWhen using template-driven forms:
\nngModel keeps the component model synchronized with the user's entry into the input elements.name attribute and two-way binding for each input.ng such as ngForm, ngModel, and ngModelGroup.The alternative is a reactive form. For an introduction and comparison of both forms approaches, see Introduction to Angular Forms.
\n\nA TypeScript-like syntax that Angular evaluates within a data binding.
\nRead about how to write template expressions in the template expressions section of the Interpolation guide.
\n\nA variable defined in a template that references an instance associated with an element, such as a directive instance, component instance, template as in TemplateRef, or DOM element.\nAfter declaring a template reference variable on an element in a template,\nyou can access values from that variable elsewhere within the same template.\nThe following example defines a template reference variable named #phone.
For more information, see the Template reference variable guide.
\n\nAn opaque identifier used for efficient table lookup. In Angular, a DI token is used to find providers of dependencies in the dependency injection system.
\n\nThe translation process that transforms one version of JavaScript to another version; for example, down-leveling ES2015 to the older ES5 version.
\n\nIn schematics, a virtual file system represented by the Tree class.\nSchematic rules take a tree object as input, operate on them, and return a new tree object.
A programming language based on JavaScript that is notable for its optional typing system.\nTypeScript provides compile-time type checking and strong tooling support (such as\ncode completion, refactoring, inline documentation, and intelligent search).\nMany code editors and IDEs support TypeScript either natively or with plug-ins.
\nTypeScript is the preferred language for Angular development.\nRead more about TypeScript at typescriptlang.org.
\nA file specifies the root files and the compiler options required to compile a TypeScript project. For more information, see TypeScript configuration.
\n\n\nA data flow model where the component tree is always checked for changes in one direction (parent to child), which prevents cycles in the change detection graph.
\nIn practice, this means that data in Angular flows downward during change detection.\nA parent component can easily change values in its child components because the parent is checked first.\nA failure could occur, however, if a child component tries to change a value in its parent during change detection (inverting the expected data flow), because the parent component has already been rendered.\nIn development mode, Angular throws the ExpressionChangedAfterItHasBeenCheckedError error if your app attempts to do this, rather than silently failing to render the new value.
To avoid this error, a lifecycle hook method that seeks to make such a change should trigger a new change detection run. The new run follows the same direction as before, but succeeds in picking up the new value.
\n\nA tool for implementing server-side rendering of an Angular application.\nWhen integrated with an app, Universal generates and serves static pages on the server in response to requests from browsers.\nThe initial static page serves as a fast-loading placeholder while the full application is being prepared for normal execution in the browser.
\nTo learn more, see Angular Universal: server-side rendering.
\n\n\nThe smallest grouping of display elements that can be created and destroyed together.\nAngular renders a view under the control of one or more directives.
\nA component class and its associated template define a view.\nA view is specifically represented by a ViewRef instance associated with a component.\nA view that belongs immediately to a component is called a host view.\nViews are typically collected into view hierarchies.
Properties of elements in a view can change dynamically, in response to user actions;\nthe structure (number and order) of elements in a view can't.\nYou can change the structure of elements by inserting, moving, or removing nested views within their view containers.
\nView hierarchies can be loaded and unloaded dynamically as the user navigates through the application, typically under the control of a router.
\n\nThe compilation and rendering pipeline used by Angular before version 9. Compare Ivy.
\n\nA tree of related views that can be acted on as a unit. The root view is a component's host view. A host view can be the root of a tree of embedded views, collected in a view container (ViewContainerRef) attached to an anchor element in the hosting component. The view hierarchy is a key part of Angular change detection.
The view hierarchy doesn't imply a component hierarchy. Views that are embedded in the context of a particular hierarchy can be host views of other components. Those components can be in the same NgModule as the hosting component, or belong to other NgModules.
\n\n\nSee custom element.
\n\nA collection of Angular projects (that is, applications and libraries) powered by the Angular CLI that are typically co-located in a single source-control repository (such as git).
\nThe CLI ng new command creates a file system directory (the \"workspace root\").\nIn the workspace root, it also creates the workspace configuration file (angular.json) and, by default, an initial application project with the same name.
Commands that create or operate on apps and libraries (such as add and generate) must be executed from within a workspace folder.
For more information, see Workspace Configuration.
\n\n\nA file named angular.json at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults for build and development tools that are provided by or integrated with the Angular CLI.
For more information, see Workspace Configuration.
\nAdditional project-specific configuration files are used by tools, such as package.json for the npm package manager, tsconfig.json for TypeScript transpilation, and tslint.json for TSLint.
For more information, see Workspace and Project File Structure.
\n\n\n\n\nAn execution context for a set of asynchronous tasks. Useful for debugging, profiling, and testing apps that include asynchronous operations such as event processing, promises, and calls to remote servers.
\nAn Angular app runs in a zone where it can respond to asynchronous events by checking for data changes and updating the information it displays by resolving data bindings.
\nA zone client can take action before and after an async operation completes.
\nLearn more about zones in this\nBrian Ford video.
\n\n \n