{"id":31824488,"url":"https://github.com/matthrews/angular_docs","last_synced_at":"2026-07-18T18:35:47.703Z","repository":{"id":119486601,"uuid":"487187367","full_name":"Matthrews/angular_docs","owner":"Matthrews","description":null,"archived":false,"fork":false,"pushed_at":"2022-05-15T13:53:46.000Z","size":155,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-07-18T18:35:27.073Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Matthrews.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-04-30T05:09:08.000Z","updated_at":"2023-07-17T13:21:25.000Z","dependencies_parsed_at":"2023-03-21T01:17:39.903Z","dependency_job_id":null,"html_url":"https://github.com/Matthrews/angular_docs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Matthrews/angular_docs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matthrews%2Fangular_docs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matthrews%2Fangular_docs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matthrews%2Fangular_docs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matthrews%2Fangular_docs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Matthrews","download_url":"https://codeload.github.com/Matthrews/angular_docs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matthrews%2Fangular_docs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35627692,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-18T02:00:07.223Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-11T15:28:32.411Z","updated_at":"2026-07-18T18:35:47.689Z","avatar_url":"https://github.com/Matthrews.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Getting Started\n\n## What is Angular\n\nAngular is an application design framework and development platform for creating efficient and sophisticated single-page apps.\n\nAs a platform, Angular includes:\n\n- A component-based framework for building scalable web applications\n- A collection of well=integrated libraries that cover a wide variety of features,  including routing, forms management, client-server communication, and more\n- A suite of developer tools to help you develop, build, test, and update your code\n\n## Features\n\n![image-20220430115343178](/Users/opsmind/Library/Application Support/typora-user-images/image-20220430115343178.png)\n\n![image-20220430115359303](/Users/opsmind/Library/Application Support/typora-user-images/image-20220430115359303.png)\n\n![image-20220430115417670](/Users/opsmind/Library/Application Support/typora-user-images/image-20220430115417670.png)\n\n## The Essentials\n\n### Components\n\nA component includes a TypeScript class with a `@Component()` decorator, an HTML template, and styles.\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-register',\n  templateUrl: './register.component.html',\n  styleUrls: ['./register.component.css']\n  // OR 👇\n  // styles: [\n  //   `.custom {\n  //     color: gray;\n  //     background: #F5F5F5\n  //   }`\n  // ]\n})\nexport class RegisterComponent implements OnInit {\n\n  constructor() { }\n\n  ngOnInit(): void { }\n}\n```\n\n### Templates\n\nEvery component has an HTML template that declares how that component renders. You can define this template either inline or by file path\n\nInterpolation, Property Binding and Event Binding\n\n```html\n\u003c!-- hello-world-bindings.component.html --\u003e\n\u003cbutton\n  [disabled]=\"canClick\"\n  (click)=\"sayMessage()\"\u003e\n  Trigger alert message\n\u003c/button\u003e\n\u003cp\n  [id]=\"sayHelloId\"\n  [style.color]=\"fontColor\"\u003e\n  You can set my color in the component!\n\u003c/p\u003e\n\u003cp\u003eMy color is {{ fontColor }}\u003c/p\u003e\n```\n\n```typescript\n// hello-world-bindings.component.ts\n\u003cbutton\n  [disabled]=\"canClick\"\n  (click)=\"sayMessage()\"\u003e\n  Trigger alert message\n\u003c/button\u003e\n\u003cp\n  [id]=\"sayHelloId\"\n  [style.color]=\"fontColor\"\u003e\n  You can set my color in the component!\n\u003c/p\u003e\n\u003cp\u003eMy color is {{ fontColor }}\u003c/p\u003e\n```\nAdditionally, Angular adds additional functionality to your templates through the use of directives\n\n### Dependency injection\n\nDependency injection lets you declare the dependencies of your TypeScript classes without taking care of their instantiation. Instead, Angular handles the instantiation for you. This design pattern lets you write more testable and flexible code. Even though understanding dependency injection is not critical to start using Angular, we strongly recommend it as a best practice and many aspects of Angular take advantage of it to some degree.\n\nTo illustrate how dependency injection works, consider the following example. The first file, `logger.service.ts`, defines a `Logger` class. This class contains a `writeCount` function that logs a number to the console.\n\n```typescript\nimport { Injectable } from '@angular/core';\n\n@Injectable({providedIn: 'root'})\nexport class Logger {\n  writeCount(count: number) {\n    console.warn(count);\n  }\n}\n```\n\nNext, the `hello-world-di.component.ts` file defines an Angular component. This component contains a button that uses the `writeCount` function of the Logger class. To access that function, the `Logger` service is injected into the `HelloWorldDI` class by adding `private logger: Logger` to the constructor.\n\n\n```typescript\nimport { Component } from '@angular/core';\nimport { Logger } from '../logger.service';\n\n@Component({\n  selector: 'hello-world-di',\n  templateUrl: './hello-world-di.component.html'\n})\nexport class HelloWorldDependencyInjectionComponent  {\n  count = 0;\n\n  constructor(private logger: Logger) { }\n\n  onLogMe() {\n    this.logger.writeCount(this.count);\n    this.count++;\n  }\n}\n```\n\nDemo URL: https://stackblitz.com/edit/angular-ivy-dathnl?file=src/app/app.component.ts\n\n## Angular CLI\n\n| [ng build](https://v12.angular.io/cli/build)       | Compiles an Angular app into an output directory.                    |\n| -------------------------------------------------- | -------------------------------------------------------------------- |\n| [ng serve](https://v12.angular.io/cli/serve)       | Builds and serves your application, rebuilding on file changes.      |\n| [ng generate](https://v12.angular.io/cli/generate) | Generates or modifies files based on a schematic.                    |\n| [ng test](https://v12.angular.io/cli/test)         | Runs unit tests on a given project.                                  |\n| [ng e2e](https://v12.angular.io/cli/e2e)           | Builds and serves an Angular application, then runs end-to-end tests |\n\n## 3rd-party libraries\n\n| [Angular Router](https://v12.angular.io/guide/router)            | Advanced client-side navigation and routing based on Angular components. Supports lazy-loading, nested routes, custom path matching, and more. |\n| ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |\n| [Angular Forms](https://v12.angular.io/guide/forms-overview)     | Uniform system for form participation and validation.                                                                                          |\n| [Angular HttpClient](https://v12.angular.io/guide/http)          | Robust HTTP client that can power more advanced client-server communication.                                                                   |\n| [Angular Animations](https://v12.angular.io/guide/animations)    | Rich system for driving animations based on application state.                                                                                 |\n| [Angular PWA](https://v12.angular.io/guide/service-worker-intro) | Tools for building Progressive Web Applications (PWAs) including a service worker and Web app manifest.                                        |\n| [Angular Schematics](https://v12.angular.io/guide/schematics)    | Automated scaffolding, refactoring, and update tools that simplify development at a large scale.                                               |\n\n\n\n\u003e [Angular First Demo](https://stackblitz.com/edit/angular-rrlxfc?file=src/app/app.component.ts)\n\n\n# Understanding Angular\n\n## Components\n\n### Lifecycle\n\nngOnChanges: may not call if you have no template-bound inputs\n\nngOnInit: Called once\n\nngDoCheck: Called immediately after `ngOnChanges()` on every change detection run, and immediately after `ngOnInit()` on the first run.\n\nngAfterContentInit: Called *once* after the first `ngDoCheck()`\n\nngAfterContentChecked: Called after `ngAfterContentInit()` and every subsequent `ngDoCheck()`.\n\nngAfterViewInit: Called *once* after the first `ngAfterContentChecked()`.\n\nngAfterViewChecked: Called after the `ngAfterViewInit()` and every subsequent `ngAfterContentChecked()`.\n\nngOnDestroy: Called immediately before Angular destroys the directive or component.\n\nSummary: \n\nngDoCheck, ngAfterContentChecked, ngAfterViewChecked\nthese 3 functions are called frequently\n\nngDoCheck is called after ngOnChanges\n\n`ngOnChanges` is only called for/if there is an @input variable set by parent\n\n#### Use directives to watch the DOM\n\nA spy directive like this can provide insight into a DOM object that you cannot change directly. You can't touch the implementation of a built-in \u003cdiv\u003e, or modify a third party component. \nYou can, however watch these elements with a directive.\n\n#### Responding to projected content changes\n\n*Content projection* is a way to import HTML content from outside the component and insert that content into the component's template in a designated spot. Identify content projection in a template by looking for the following constructs.\n\n- HTML between component element tags.\n- The presence of `\u003cng-content\u003e` tags in the component's template.\n\n#### Using AfterContent hooks\n\n*AfterContent* hooks are similar to the *AfterView* hooks. The key difference is in the child component.\n\n- The *AfterView* hooks concern `ViewChildren`, the child components whose element tags appear *within* the component's template.\n- The *AfterContent* hooks concern `ContentChildren`, the child components that Angular projected into the component.\n\nAngular calls both *AfterContent* hooks before calling either of the *AfterView* hooks. Angular completes composition of the projected content *before* finishing the composition of this component's view. There is a small window between the `AfterContent...` and `AfterView...` hooks that lets you modify the host view.\n\n#### Defining custom change detection\n\nTo monitor changes that occur where `ngOnChanges()` won't catch them, implement your own change check\n\nWhile the `ngDoCheck()` hook can detect when the hero's `name` has changed, it is very expensive. \n\nIf you use this hook, your implementation must be extremely lightweight, or the user experience suffers.\n\n### View Encapsulation\n\nIn Angular, component CSS styles are encapsulated into the component's view and don't affect the rest of the application.\n\nShadowDom, Emulated, None\n\n`Emulated` view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view.\n\n**Avoid mixing components that use different view encapsulation.**\n### Component interaction\n\n1. Pass data from parent to child with input binding\n\n@Input() decorator\n\n2. Intercept input property changes with a setter\n\n3. Intercept input property changes with ngOnChanges()\n\n4. Parent listens for child event\n\n@Output() voted = new EventEmitter\u003cboolean\u003e();\n\n5. Parent interacts with child using local variable\n\nA parent component cannot use data binding to read child properties or invoke child methods. \nDo both by creating a template reference variable for the child element and then reference that variable within the parent template as seen in the following example.\n\nNote: same like useImperativeHandle in React\n\n6. Parent calls an @ViewChild()\n\nYou can't use the local variable technique if the parent component's class relies on the child component's class.\n\nWhen the parent component class requires that kind of access, inject the child component into the parent as a ViewChild.\n\n7. Parent and children communicate using a service\n\nA parent component and its children share a service whose interface enables bi-directional communication within the family.\n\n### Component styles\n\nThis scoping restriction is a styling modularity feature.\n\n- Use the CSS class names and selectors that make the most sense in the context of each component.\n\n- Class names and selectors are local to the component and don't collide with classes and selectors used elsewhere in the application.\n\n- Changes to styles elsewhere in the application don't affect the component's styles.\n\n- Co-locate the CSS code of each component with the TypeScript and HTML code of the component, which leads to a neat and tidy project structure.\n\n- Change or remove component CSS code without searching through the whole application to find where else the code is used.\n\n#### Special selectors\n\n**:host**\n\nThe :host selector only targets the host element of a component.\n\n**:host-context**\n\nUse the :host-context() pseudo-class selector, which works just like the function form of :host(). \nThe :host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root. \nThe :host-context() selector is only useful when combined with another selector.\n\n**::ng-deep**\n\nApplying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. \n\nAny style with ::ng-deep applied becomes a global style. \n\nIn order to scope the specified style to the current component and all its descendants, be sure to include the :host selector before ::ng-deep. \n\nIf the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components.\n\nUse `/deep/`,` \u003e\u003e\u003e` and `::ng-deep` only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. \n\nThe shadow-piercing descendant combinator is deprecated and [support is being removed from major browsers](https://www.chromestatus.com/feature/6750456638341120) and tools. \nAs such we plan to drop support in Angular (for all 3 of `/deep/`, `\u003e\u003e\u003e` and `::ng-deep`). Until then `::ng-deep` should be preferred for a broader compatibility with the tools.\n\n\n#### Loading component styles\n\nThere are several ways to add styles to a component:\n\n- By setting `styles` or `styleUrls` metadata.\n- Inline in the template HTML.\n- With CSS imports.\n\nNote: Style strings added to the @Component.styles array must be written in CSS because the CLI cannot apply a preprocessor to inline styles.\n\n### Sharing data between child and parent directives and components\n\nA common pattern in Angular is sharing data between a parent component and one or more child components. \nImplement this pattern with the @Input() and @Output() decorators.\n\n@Input() lets a parent component update data in the child component. Conversely, @Output() lets the child send data to a parent component.\n\n@Output() marks a property in a child component as a doorway through which data can travel from the child to the parent.\n\nThe child component uses the @Output() property to raise an event to notify the parent of the change. To raise an event, an @Output() must have the type of EventEmitter, which is a class in @angular/core that you use to emit custom events.\n\nWe can use @Input() and @Output() together\n\nAdditionally, to combine property and event bindings using the banana-in-a-box syntax, `[()]`, see [Two-way Binding](https://v12.angular.io/guide/two-way-binding).\n\n### Content projection\n\nContent projection is a pattern in which you insert, or project, the content you want to use inside another component. \n\nThe following sections describe common implementations of content projection in Angular, including:\n\n- [Single-slot content projection](https://v12.angular.io/guide/content-projection#single-slot). With this type of content projection, a component accepts content from a single source.\n- [Multi-slot content projection](https://v12.angular.io/guide/content-projection#multi-slot). In this scenario, a component accepts content from multiple sources.\n- [Conditional content projection](https://v12.angular.io/guide/content-projection#conditional). Components that use conditional content projection render content only when specific conditions are met.\n\nThe `\u003cng-content\u003e` element is a placeholder that does not create a real DOM element. Custom attributes applied to `\u003cng-content\u003e` are ignored.\n\n\n### Dynamic component loader\n\nThe \u003cng-template\u003e element is a good choice for dynamic components because it doesn't render any additional output.\n\nThe \u003cng-template\u003e element is where you apply the directive you just made. To apply the AdDirective, recall the selector from ad.directive.ts, [adHost]. Apply that to \u003cng-template\u003e without the square brackets. Now Angular knows where to dynamically load components.\n\n```typescript\ntemplate: `\n  \u003cdiv class=\"ad-banner-example\"\u003e\n    \u003ch3\u003eAdvertisements\u003c/h3\u003e\n    \u003cng-template adHost\u003e\u003c/ng-template\u003e\n  \u003c/div\u003e\n`\n```\n\n### Angular elements overview\n\nWe are working on custom elements that can be used by web apps built on other frameworks.\n\n#### Using custom elements\n\nCustom elements bootstrap themselves\n\n#### How it works\n\ncreateCustomElement()\n\nAngular provides the `createCustomElement()` function for converting an Angular component, together with its dependencies, to a custom element. The function collects the component's observable properties, along with the Angular functionality the browser needs to create and destroy instances, and to detect and respond to changes.\n\nThe conversion process implements the `NgElementConstructor` interface, and creates a constructor class that is configured to produce a self-bootstrapping instance of your component.\n\nUse the built-in [`customElements.define()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) function to register the configured constructor and its associated custom-element tag with the browser's [`CustomElementRegistry`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry). When the browser encounters the tag for the registered element, it uses the constructor to create a custom-element instance.\n\n#### Mapping\n\nA custom element hosts an Angular component, providing a bridge between the data and logic defined in the component and standard DOM APIs. Component properties and logic maps directly into HTML attributes and the browser's event system.\n\n## Templates\n\nTo eliminate the risk of script injection attacks, Angular does not support the `\u003cscript\u003e` element in templates. Angular ignores the `\u003cscript\u003e `tag and outputs a warning to the browser console.\n\nYou might also be interested in the following:\n\n- [Interpolation](https://v12.angular.io/guide/interpolation)—learn how to use interpolation and expressions in HTML.\n- [Template statements](https://v12.angular.io/guide/template-statements)—respond to events in your templates.\n- [Binding syntax](https://v12.angular.io/guide/binding-syntax)—use binding to coordinate values in your application.\n- [Property binding](https://v12.angular.io/guide/property-binding)—set properties of target elements or directive `@Input()` decorators.\n- [Attribute, class, and style bindings](https://v12.angular.io/guide/attribute-binding)—set the value of attributes, classes, and styles.\n- [Event binding](https://v12.angular.io/guide/event-binding)—listen for events and your HTML.\n- [Two-way binding](https://v12.angular.io/guide/two-way-binding)—share data between a class and its template.\n- [Built-in directives](https://v12.angular.io/guide/built-in-directives)—listen to and modify the behavior and layout of HTML.\n- [Template reference variables](https://v12.angular.io/guide/template-reference-variables)—use special variables to reference a DOM element within a template.\n- [Inputs and Outputs](https://v12.angular.io/guide/inputs-outputs)—share data between the parent context and child directives or components\n- [Template expression operators](https://v12.angular.io/guide/template-expression-operators)—learn about the pipe operator, `|`, and protect against `null` or `undefined` values in your HTML.\n- [SVG in templates](https://v12.angular.io/guide/svg-in-templates)—dynamically generate interactive graphics.\n\n### Text interpolation\n\nA template expression produces a value and appears within double curly braces, `{{ }}`.\n\nWith interpolation, Angular performs the following tasks:\n\n1. Evaluates all expressions in double curly braces.\n2. Converts the expression results to strings.\n3. Links the results to any adjacent literal strings.\n4. Assigns the composite to an element or directive property.\n\nTemplate expressions are similar to JavaScript. Many JavaScript expressions are legal template expressions, with the following exceptions.\n\nYou can't use JavaScript expressions that have or promote side effects, including:\n\n- Assignments (`=`, `+=`, `-=`, `...`)\n- Operators such as `new`, `typeof`, or `instanceof`\n- Chaining expressions with `;` or `,`\n- The increment and decrement operators `++` and `--`\n- Some of the ES2015+ operators\n\nOther notable differences from JavaScript syntax include:\n\n- No support for the bitwise operators such as `|` and `\u0026`\n- New [template expression operators](https://v12.angular.io/guide/template-expression-operators), such as `|`, `?.` and `!`\n\n\n\u003e Template expressions cannot refer to anything in the global namespace, except undefined. They can't refer to window or document. Additionally, they can't call console.log() or Math.max() and they are restricted to referencing members of the expression context.\n\nInterpolated expressions have a context—a particular part of the application to which the expression belongs. Typically, this context is the component instance.\n\nIf you reference a name that belongs to more than one of these namespaces, Angular applies the following logic to determine the context:\n\n1. The template variable name.\n2. A name in the directive's context.\n3. The component's member names.\n\nWhen using template expressions, follow these best practices:\n\n- **Use short expressions**\n\n  Use property names or method calls whenever possible. Keep application and business logic in the component, where it is accessible to develop and test.\n\n- **Quick execution**\n\n  Angular executes template expressions after every [change detection](https://v12.angular.io/guide/glossary#change-detection) cycle. Many asynchronous activities trigger change detection cycles, such as promise resolutions, HTTP results, timer events, key presses and mouse moves.\n\n  Expressions should finish quickly to keep the user experience as efficient as possible, especially on slower devices. Consider caching values when their computation requires greater resources.\n\n- **No visible side effects**\n\n  According to Angular's [unidirectional data flow model](https://v12.angular.io/guide/glossary#unidirectional-data-flow), a template expression should not change any application state other than the value of the target property. Reading a component value should not change some other displayed value. The view should be stable throughout a single rendering pass.\n\n### Template statements\n\nTemplate statements are methods or properties that you can use in your HTML to respond to user events. \n\nResponding to events is an aspect of Angular's unidirectional data flow. You can change anything in your application during a single event loop.\n\n#### Syntax\n\nLike template expressions, template statements use a language that looks like JavaScript. However, the parser for template statements differs from the parser for template expressions. In addition, the template statements parser specifically supports both basic assignment, `=`, and chaining expressions with semicolons, `;`.\n\nThe following JavaScript and template expression syntax is not allowed:\n\n- `new`\n- increment and decrement operators, `++` and `--`\n- operator assignment, such as `+=` and `-=`\n- the bitwise operators, such as `|` and `\u0026`\n- the [pipe operator](https://v12.angular.io/guide/pipes)\n\n#### Statement context\n\n```html\n\u003cbutton (click)=\"onSave($event)\"\u003eSave\u003c/button\u003e\n\u003cbutton *ngFor=\"let hero of heroes\" (click)=\"deleteHero(hero)\"\u003e{{hero.name}}\u003c/button\u003e\n\u003cform #heroForm (ngSubmit)=\"onSubmit(heroForm)\"\u003e ... \u003c/form\u003e\n```\nIn this example, the context of the `$event` object, `hero`, and `#heroForm` is the template.\n\nTemplate context names take precedence over component context names. In the preceding `deleteHero(hero)`, the `hero` is the template input variable, not the component's `hero` property.\n\n#### Statement best practices\n\n- **Conciseness**\n\n  Use method calls or basic property assignments to keep template statements minimal.\n\n- **Work within the context**\n\n  The context of a template statement can be the component class instance or the template. Because of this, template statements cannot refer to anything in the global namespace such as `window` or `document`.\n\n### Transforming Data Using Pipes\n\nUse pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. \n\nFor a complete list of built-in pipes, see the [pipes API documentation](https://v12.angular.io/api/common#pipes).\n\nTo learn more about using pipes for internationalization (i18n) efforts, see [formatting data based on locale](https://v12.angular.io/guide/i18n-common-format-data-locale).\n\nTo apply a pipe, use the pipe operator (|) within a template expression\n\nThe template expression `{{ amount | currency:'EUR' }}` transforms the `amount` to currency in euros. Follow the pipe name (`currency`) with a colon (`:`) and the parameter value (`'EUR'`).\n\nIf the pipe accepts multiple parameters, separate the values with colons. For example, `{{ amount | currency:'EUR':'Euros '}}` adds the second parameter, the string literal `'Euros '`, to the output string.\n\nWe can apply two formats by chaining pipes\n\nTo mark a class as a pipe and supply configuration metadata, apply the @Pipe decorator to the class.\n\nInclude your pipe in the declarations field of the NgModule metadata in order for it to be available to a template. \n\nRegister your custom pipes. The Angular CLI ng generate pipe command registers the pipe automatically.\n\n#### Detecting pure changes to primitives and object references\n\nBy default, pipes are defined as *pure* so that Angular executes the pipe only when it detects a *pure change* to the input value. A pure change is either a change to a primitive input value (such as `String`, `Number`, `Boolean`, or `Symbol`), or a changed object reference (such as `Date`, `Array`, `Function`, or `Object`).\n\nWith a pure pipe, Angular ignores changes within composite objects, such as a newly added element of an existing array, because checking a primitive value or object reference is much faster than performing a deep check for differences within objects. Angular can quickly determine if it can skip executing the pipe and updating the view.\n\nWhile an impure pipe can be useful, be careful using one. A long-running impure pipe could dramatically slow down your application.\n\n#### Unwrapping data from an observable\n\nObservables let you pass messages between parts of your application. \nObservables are recommended for event handling, asynchronous programming, and handling multiple values. \nObservables can deliver single or multiple values of any type, either synchronously (as a function delivers a value to its caller) or asynchronously on a schedule.\n\nThe pipe operator has a higher precedence than the ternary operator (`?:`), which means `a ? b : c | x` is parsed as `a ? b : (c | x)`. \n\n### Property binding\n\nThe brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.\n\nInterpolation and property binding can set only properties, not attributes.\n\nProperty binding can help keep content secure from XSS\n\n#### Property binding and interpolation\n\nOften interpolation and property binding can achieve the same results.\n\n```html\n\u003cp\u003e\u003cimg src=\"{{itemImageUrl}}\"\u003e is the \u003ci\u003einterpolated\u003c/i\u003e image.\u003c/p\u003e\n\u003cp\u003e\u003cimg [src]=\"itemImageUrl\"\u003e is the \u003ci\u003eproperty bound\u003c/i\u003e image.\u003c/p\u003e\n\n\u003cp\u003e\u003cspan\u003e\"{{interpolationTitle}}\" is the \u003ci\u003einterpolated\u003c/i\u003e title.\u003c/span\u003e\u003c/p\u003e\n\u003cp\u003e\"\u003cspan [innerHTML]=\"propertyTitle\"\u003e\u003c/span\u003e\" is the \u003ci\u003eproperty bound\u003c/i\u003e title.\u003c/p\u003e\n```\n\nUse either form when rendering data values as strings, though interpolation is preferable for readability. \n\nHowever, when setting an element property to a non-string data value, you must use property binding.\n\n\n### Attribute, class, and style bindings\n\nAttribute binding in Angular helps you set values for attributes directly. \nWith attribute binding, you can improve accessibility, style your application dynamically, and manage multiple CSS classes or styles simultaneously.\n\nIt is recommended that you set an element property with a property binding whenever possible. However, sometimes you don't have an element property to bind. In those situations, use attribute binding.\n\n\nNeither ARIA nor SVG correspond to element properties and don't set element properties. In these cases, you must use attribute binding because there are no corresponding property targets.\n\nAttribute binding syntax resembles property binding, but instead of an element property between brackets, you precede the name of the attribute with the prefix attr, followed by a dot. \n\nWhen the expression resolves to `null` or `undefined`, Angular removes the attribute altogether.\n\nOne of the primary use cases for attribute binding is to set ARIA attributes, as in this example:\n\n```html\n\u003c!-- create and set an aria attribute for assistive technology --\u003e\n\u003cbutton [attr.aria-label]=\"actionName\"\u003e{{actionName}} with Aria\u003c/button\u003e\n```\n\nAnother common use case for attribute binding is with the colspan attribute in tables. \n\n```html\n\u003c!--  expression calculates colspan=2 --\u003e\n\u003ctr\u003e\u003ctd [attr.colspan]=\"1 + 1\"\u003eOne-Two\u003c/td\u003e\u003c/tr\u003e\n```\n\nSometimes there are differences between the name of property and an attribute.\n\ncolspan is an attribute of `\u003ctr\u003e`, while `colSpan` with a capital \"S\" is a property.\n\n#### Binding to the class attribute\n\n### Binding to multiple CSS classes\n\nTo bind to multiple classes, use `[class]` set to an expression—for example, `[class]=\"classExpression\"`. The expression can be one of:\n\n- A space-delimited string of class names.\n- An object with class names as the keys and truthy or falsy expressions as the values.\n- An array of class names.\n\nWith the object format, Angular adds a class only if its associated value is truthy.\n\nIf there are multiple bindings to the same class name, Angular uses [styling precedence](https://v12.angular.io/guide/style-precedence) to determine which binding to use.\n\nThe following table summarizes class binding syntax.\n\n| Binding Type         | Syntax                      | Input Type              | Example Input Values                 |\n| :------------------- | :-------------------------- | :---------------------- | :----------------------------------- |\n| Single class binding | `[class.sale]=\"onSale\"`     | `boolean                | undefined                            | null`  | `true`, `false`           |\n| Multi-class binding  | `[class]=\"classExpression\"` | `string`                | `\"my-class-1 my-class-2 my-class-3\"` |\n| Multi-class binding  | `[class]=\"classExpression\"` | `Record\u003cstring, boolean | undefined                            | null\u003e` | `{foo: true, bar: false}` |  |  |\n| Multi-class binding  | `[class]=\"classExpression\"` | `Array`\u003c`string`\u003e       | `['foo', 'bar']`                     |        |                           |\n\n#### Binding to the style attribute\n\nYou can write a style property name in either dash-case, or camelCase.\n\n```html\n\u003cnav [style.background-color]=\"expression\"\u003e\u003c/nav\u003e\n\n\u003cnav [style.backgroundColor]=\"expression\"\u003e\u003c/nav\u003e\n```\n\nTo toggle multiple styles, bind to the `[style]` attribute—for example, `[style]=\"styleExpression\"`. The `styleExpression` can be one of:\n\n- A string list of styles such as `\"width: 100px; height: 100px; background-color: cornflowerblue;\"`.\n- An object with style names as the keys and style values as the values, such as `{width: '100px', height: '100px', backgroundColor: 'cornflowerblue'}`.\n\nNote that binding an array to `[style]` is not supported.\n\n\n\nIf there are multiple bindings to the same style attribute, Angular uses [styling precedence](https://v12.angular.io/guide/style-precedence) to determine which binding to use.\n\nThe following table summarizes style binding syntax.\n\n| Binding Type                    | Syntax                      | Input Type             | Example Input Values            |\n| :------------------------------ | :-------------------------- | :--------------------- | :------------------------------ |\n| Single style binding            | `[style.width]=\"width\"`     | `string                | undefined                       | null`  | `\"100px\"`                           |\n|                                 |                             |                        |                                 |\n| Single style binding with units | `[style.width.px]=\"width\"`  | `number                | undefined                       | null`  | `100`                               |\n| Multi-style binding             | `[style]=\"styleExpression\"` | `string`               | `\"width: 100px; height: 100px\"` |\n| Multi-style binding             | `[style]=\"styleExpression\"` | `Record\u003cstring, string | undefined                       | null\u003e` | `{width: '100px', height: '100px'}` |  |  |\n\n#### Styling Precedence\n\nWhen there are multiple bindings to the same class name or style property, Angular uses a set of precedence rules to resolve conflicts and determine which classes or styles are ultimately applied to the element.\n\n#### Styling precedence (highest to lowest)\n\n1. Template bindings\n   1. Property binding (for example, `\u003cdiv [class.foo]=\"hasFoo\"\u003e` or `\u003cdiv [style.color]=\"color\"\u003e`)\n   2. Map binding (for example, `\u003cdiv [class]=\"classExpr\"\u003e` or `\u003cdiv [style]=\"styleExpr\"\u003e`)\n   3. Static value (for example, `\u003cdiv class=\"foo\"\u003e` or `\u003cdiv style=\"color: blue\"\u003e`)\n2. Directive host bindings\n   1. Property binding (for example, `host: {'[class.foo]': 'hasFoo'}` or `host: {'[style.color]': 'color'}`)\n   2. Map binding (for example, `host: {'[class]': 'classExpr'}` or `host: {'[style]': 'styleExpr'}`)\n   3. Static value (for example, `host: {'class': 'foo'}` or `host: {'style': 'color: blue'}`)\n3. Component host bindings\n   1. Property binding (for example, `host: {'[class.foo]': 'hasFoo'}` or `host: {'[style.color]': 'color'}`)\n   2. Map binding (for example, `host: {'[class]': 'classExpr'}` or `host: {'[style]': 'styleExpr'}`)\n   3. Static value (for example, `host: {'class': 'foo'}` or `host: {'style': 'color: blue'}`)\n\nThe more specific a class or style binding is, the higher its precedence.\n\n#### Delegating to styles with lower precedence\n\nIt is possible for higher precedence styles to \"delegate\" to lower precedence styles using undefined values. Whereas setting a style property to null ensures the style is removed, setting it to undefined causes Angular to fall back to the next-highest precedence binding to that style.\n\n#### Injecting attribute values\n\nThe Attribute parameter decorator is great for passing the value of an HTML attribute to a component/directive constructor using dependency injection.\n\nRemember, use @Input() when you want to keep track of the attribute value and update the associated property. Use @Attribute() when you want to inject the value of an HTML attribute to a component or directive constructor.\n\n### Event binding\n\n#### Custom events with `EventEmitter`\n\n[Directives](https://v12.angular.io/guide/built-in-directives) typically raise custom events with an Angular [EventEmitter](https://v12.angular.io/api/core/EventEmitter) as follows.\n\n1. The directive creates an `EventEmitter` and exposes it as a property.\n2. The directive then calls `EventEmitter.emit(data)` to emit an event, passing in message data, which can be anything.\n3. Parent directives listen for the event by binding to this property and accessing the data through the `$event` object.\n\n### Two-way binding\n\nTwo-way binding gives components in your application a way to share data.\n\nAngular's two-way binding syntax is a combination of square brackets and parentheses, `[()]`. The `[()]` syntax combines the brackets of property binding, `[]`, with the parentheses of event binding, `()`, as follows.\n\n```html\n\u003capp-sizer [(size)]=\"fontSizePx\"\u003e\u003c/app-sizer\u003e\n\u003c!-- shorthand for a combination of property binding and event binding.  --\u003e\n\u003c!-- \u003capp-sizer [size]=\"fontSizePx\" (sizeChange)=\"fontSizePx=$event\"\u003e\u003c/app-sizer\u003e --\u003e\n```\n\n#### How two-way binding works?\n\nThe two-way binding syntax is shorthand for a combination of property binding and event binding. \n\nFor two-way data binding to work, the `@Output()` property must use the pattern, `inputChange`, where `input` is the name of the `@Input()` property. For example, if the `@Input()` property is `size`, the `@Output()` property must be `sizeChange`.\n\nBecause no built-in HTML element follows the x value and xChange event pattern, two-way binding with form elements requires NgModel.\n\n### Template variables\n\nTemplate variables help you use data from one part of a template in another part of the template. \n\nA template variable can refer to the following:\n\n- a DOM element within a template\n- a directive\n- an element\n- TemplateRef\n- a web component\n\nIn the template, you use the hash symbol,`#`, to declare a template variable. \n\n#### How Angular assigns values to template variables\n\nAngular assigns a template variable a value based on where you declare the variable:\n\n- If you declare the variable on a component, the variable refers to the component instance.\n- If you declare the variable on a standard HTML tag, the variable refers to the element.\n- If you declare the variable on an `\u003cng-template\u003e` element, the variable refers to a `TemplateRef` instance, which represents the template. \n- If the variable specifies a name on the right-hand side, such as `#var=\"ngModel\"`, the variable refers to the directive or component on the element with a matching `exportAs` name.\n\n#### Template variable scope\n\nRefer to a template variable anywhere within its surrounding template. [Structural directives](https://v12.angular.io/guide/built-in-directives), such as `*ngIf` and `*ngFor`, or `\u003cng-template\u003e` act as a template boundary. \n\n#### Accessing in a nested template\n\nAn inner template can access template variables that the outer template defines.\n\n\n### SVG as templates\n\nYou can use SVG files as templates in your Angular applications. \nWhen you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. \n\n\n\n## Directives\n\n## Dependency Injesction","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthrews%2Fangular_docs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatthrews%2Fangular_docs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthrews%2Fangular_docs/lists"}