@angular/core

What is @angular/core?

The @angular/core package is a fundamental part of Angular, a popular front-end web application platform. It provides the critical runtime parts of the Angular framework, including the component decorator, directives, dependency injection, and the core Angular APIs necessary for building dynamic single-page web applications.

What are @angular/core's main functionalities?

Components

Components are the building blocks of Angular applications. They control a patch of screen called a view. The @Component decorator indicates that the class immediately below it is a component and provides metadata about the component.

"@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'My Angular App'; }"

Dependency Injection

Dependency Injection (DI) is a design pattern used in Angular to make components or classes dependent on interfaces rather than concrete implementations. This improves modularity and testability.

"constructor(private myService: MyService) {}"

Directives

Directives are classes that add additional behavior to elements in your Angular applications. With Angular's built-in directives, you can manage forms, lists, styles, and what users see.

"@Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } }"

Other packages similar to @angular/core

react

React is a popular JavaScript library for building user interfaces. It focuses on a component-based architecture similar to Angular but uses a different syntax and design philosophy. React emphasizes a one-way data flow and virtual DOM for efficient rendering.

vue

Vue.js is a progressive JavaScript framework used for building UIs and single-page applications. It is designed from the ground up to be incrementally adoptable. Vue also focuses on the ViewModel part of the MVVM pattern and employs a reactive and composable data model.

README

Angular

The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.

Usage information and reference details can be found in Angular documentation.

License: MIT

Changelog

19.0.0-next.2 (2024-08-28)

Breaking Changes

core

• Render default fallback with empty projectableNodes.

  When passing an empty array to projectableNodes in the createComponent API, the default fallback content of the ng-content will be rendered if present. To prevent rendering the default content, pass document.createTextNode('') as a projectableNode.

  For example:

  // The first ng-content will render the default fallback content if present
  createComponent(MyComponent. { projectableNodes: [[], [secondNode]] });
  
  // To prevent projecting the default fallback content:
  createComponent(MyComponent. { projectableNodes: [[document.createTextNode('')], [secondNode]] });
  
  

• The timers that are used for zone coalescing and hybrid mode scheduling (which schedules an application state synchronization when changes happen outside the Angular zone) will now run in the zone above Angular rather than the root zone. This will mostly affect tests which use fakeAsync: these timers will now be visible to fakeAsync and can be affected by tick or flush.

elements

• as part of switching away from custom CD behavior to the hybrid scheduler, timing of change detection around custom elements has changed subtly. These changes make elements more efficient, but can cause tests which encoded assumptions about how or when elements would be checked to require updating.

common

| Commit | Type | Description | | -- | -- | -- | | 50f08e6c4bf | feat | automatically use sizes auto in NgOptimizedImage (#57479) |

compiler-cli

| Commit | Type | Description | | -- | -- | -- | | 4716c3b9660 | perf | reduce duplicate component style resolution (#57502) |

core

| Commit | Type | Description | | -- | -- | -- | | a3cdbfe87f5 | fix | avoid leaking memory if component throws during creation (#57546) | | 7a99815146e | fix | Do not bubble capture events. (#57476) | | 7b1e5be20b9 | fix | fallback to default ng-content with empty projectable nodes. (#57480) | | 0300dd2e18f | fix | Fix fixture.detectChanges with autoDetect disabled and zoneless (#57416) | | 226a67dabba | fix | Schedulers run in zone above Angular rather than root (#57553) |

elements

| Commit | Type | Description | | -- | -- | -- | | 0cebfd7462c | fix | switch to ComponentRef.setInput & remove custom scheduler (#56728) |

router

| Commit | Type | Description | | -- | -- | -- | | 8f6308457f0 | fix | Do not unnecessarily run matcher twice on route matching (#57530) |

upgrade

| Commit | Type | Description | | -- | -- | -- | | c9d90786d0a | fix | Address Trusted Types violations in @angular/upgrade (#57454) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="18.2.2"></a>