Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@angular/animations
Advanced tools
The @angular/animations package provides powerful animation capabilities and tools to Angular applications. It allows developers to define complex animations and transitions in a declarative manner, directly within their Angular components.
Trigger and state-based animations
This feature allows defining animations based on triggers and states. The example shows an animation trigger named 'openClose' with two states, 'open' and 'closed', and transitions between these states with different styles and durations.
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'my-component',
templateUrl: 'my-component.html',
animations: [
trigger('openClose', [
state('open', style({
height: '200px',
opacity: 1,
backgroundColor: 'yellow'
})),
state('closed', style({
height: '100px',
opacity: 0.5,
backgroundColor: 'green'
})),
transition('open => closed', [
animate('1s')
]),
transition('closed => open', [
animate('0.5s')
]),
]),
]
})
export class MyComponent {
isOpen = true;
toggle() {
this.isOpen = !this.isOpen;
}
}
Animation callbacks
Animation callbacks allow you to listen for when an animation starts and ends. In this example, the 'onAnimationEvent' method is called with the animation event, which includes the phase name ('start' or 'done').
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'my-component',
templateUrl: 'my-component.html',
animations: [
trigger('openClose', [
transition('open => closed', [
animate('1s', style({ opacity: 0 }))
]),
]),
]
})
export class MyComponent {
animationStatus = 'ready';
onAnimationEvent(event: AnimationEvent) {
this.animationStatus = event.phaseName;
}
}
Reusable animations
Reusable animations allow you to define an animation once and reuse it in different components or triggers. The example defines a 'fadeInAnimation' and uses it in a component with the 'fadeIn' trigger.
import { animation, useAnimation, transition, trigger } from '@angular/animations';
export const fadeInAnimation = animation([ animate('100ms ease-in', style({ opacity: 1 })) ]);
@Component({
selector: 'my-component',
templateUrl: 'my-component.html',
animations: [
trigger('fadeIn', [
transition(':enter', useAnimation(fadeInAnimation))
])
]
})
export class MyComponent {}
React-spring is a spring-physics based animation library for React applications. It provides a similar declarative API for defining animations but is tailored for React instead of Angular. It offers a different set of primitives and hooks for creating animations in a React environment.
Anime.js is a lightweight JavaScript animation library that works with any web framework, including Angular. It provides a more imperative approach to animations and includes a wide range of features for animating CSS properties, SVG, DOM attributes, and JavaScript Objects. It is not as tightly integrated with Angular as @angular/animations.
The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.
License: MIT
15.0.0 (2022-11-16)
Blog post "Angular v15 is now available".
Keyframes names are now prefixed with the component's "scope name". For example, the following keyframes rule in a component definition, whose "scope name" is host-my-cmp:
@keyframes foo { ... }
will become:
@keyframes host-my-cmp_foo { ... }
Any TypeScript/JavaScript code which relied on the names of keyframes rules will no longer match.
The recommended solutions in this case are to either:
None
or ShadowDom
Invalid constructors for DI may now report compilation errors
When a class inherits its constructor from a base class, the compiler may now
report an error when that constructor cannot be used for DI purposes. This may
either be because the base class is missing an Angular decorator such as
@Injectable()
or @Directive()
, or because the constructor contains parameters
which do not have an associated token (such as primitive types like string
).
These situations used to behave unexpectedly at runtime, where the class may be
constructed without any of its constructor parameters, so this is now reported
as an error during compilation.
Any new errors that may be reported because of this change can be resolved either by decorating the base class from which the constructor is inherited, or by adding an explicit constructor to the class for which the error is reported.
Angular compiler option enableIvy
has been removed as Ivy is the only rendering engine.
14.[15-19].x
and 16.[10-12].x
. Current supported versions of Node.js are 14.20.x
, 16.13.x
and 18.10.x
.src
or srcdoc
preceding other attributes. Such usages may need to be updated to ensure compliance with the new stricter rules around iframe bindings.ControlValueAccessor
is attached. You can opt-out with FormsModule.withConfig
or ReactiveFormsModule.withConfig
.canParse
method has been removed from all translation parsers in @angular/localize/tools
. analyze
should be used instead.hint
parameter in theparse
methods is now mandatory.RouterOutlet
would immediately
instantiate the component being activated during navigation. Now the
component is not instantiated until the change detection runs. This
could affect tests which do not trigger change detection after a router
navigation. In rarer cases, this can affect production code that relies
on the exact timing of component availability.relativeLinkResolution
is no longer configurable in
the Router. This option was used as a means to opt out of a bug fix.DATE_PIPE_DEFAULT_TIMEZONE
token is now deprecated in favor
of the DATE_PIPE_DEFAULT_OPTIONS
token, which accepts an object
as a value and the timezone can be defined as a field (called timezone
)
on that object.NgModule
to the providedIn
option for
@Injectable
and InjectionToken
is now deprecated.providedIn: NgModule
was intended to be a tree-shakable alternative to
NgModule providers. It does not have wide usage, and in most cases is used
incorrectly, in circumstances where providedIn: 'root'
should be
preferred. If providers should truly be scoped to a specific NgModule, use
NgModule.providers
instead.
providedIn: 'any'
for an @Injectable
or
InjectionToken
is now deprecated.providedIn: 'any'
is an option with confusing semantics and is almost
never used apart from a handful of esoteric cases internal to the framework.
The bit field signature of Injector.get()
has been deprecated, in favor of the new options object.
The bit field signature of TestBed.inject()
has been deprecated, in favor of the new options object.
RouterLinkWithHref
directive is deprecated, use the RouterLink
directive instead. The RouterLink
contains the code from the RouterLinkWithHref
to handle elements with href
attributes.| Commit | Type | Description |
| -- | -- | -- |
| c0c7efaf7c | feat | add provideLocationMocks()
function to provide Location mocks (#47674) |
| 75e6297f09 | feat | add <link> preload tag on server for priority img (#47343) |
| 4fde292bb5 | feat | Add automatic srcset generation to ngOptimizedImage (#47547) |
| 9483343ebf | feat | Add fill mode to NgOptimizedImage (#47738) |
| bdb5371033 | feat | add injection token for default DatePipe configuration (#47157) |
| 449d29b701 | fix | Add fetchpriority to ngOptimizedImage preloads (#48010) |
| 4f52d4e474 | fix | don't generate srcset if noopImageLoader is used (#47804) |
| 3a18398d83 | fix | Don't warn about image distortion is fill mode is enabled (#47824) |
| edea15f2c6 | fix | export the IMAGE_CONFIG token (#48051) |
| 8abf1c844c | fix | fix formatting on oversized image error (#47188) |
| ca7bf65933 | fix | rename rawSrc
-> ngSrc
in NgOptimizedImage directive (#47362) |
| b3879dbf14 | fix | support density descriptors with 2+ decimals (#47197) |
| fa4798095e | fix | update size error to mention 'fill' mode (#47797) |
| 23f210c0ab | fix | warn if using supported CDN but not built-in loader (#47330) |
| 945432e3fa | fix | Warn on fill ngOptimizedImage without height (#48036) |
| Commit | Type | Description | | -- | -- | -- | | 051f75648d | fix | scope css keyframes in emulated view encapsulation (#42608) | | 39b72e208b | fix | update element schema (#47552) | | 48b354a83e | fix | update element schema (#47552) |
| Commit | Type | Description |
| -- | -- | -- |
| bc54687c7b | fix | exclude abstract classes from strictInjectionParameters
requirement (#44615) |
| 309b2cde51 | fix | implement more host directive validations as diagnostics (#47768) |
| 2e1dddec45 | fix | support hasInvalidatedResolutions. (#47585) |
| 19ad4987f9 | fix | use @ts-ignore. (#47636) |
| 8fcadaad48 | perf | cache source file for reporting type-checking diagnostics (#47471) |
| 16f96eeabf | refactor | remove enableIvy
options (#47346) |
| Commit | Type | Description |
| -- | -- | -- |
| e3cef4a784 | docs | deprecate providedIn: NgModule
and providedIn: 'any'
(#47616) |
| 1b9fd46d14 | feat | add support for Node.js version 18 (#47730) |
| ed11a13c3c | feat | drop support for TypeScript 4.6 and 4.7 (#47690) |
| db28badfe6 | feat | enable the new directive composition API (#47642) |
| 7de1469be6 | feat | introduce EnvironmentProviders wrapper type (#47669) |
| 841c8e5138 | feat | support object-based DI flags in Injector.get() (#46761) |
| 120555a626 | feat | support object-based DI flags in TestBed.inject() (#46761) |
| 96c0e42e61 | fix | allow readonly arrays for standalone imports (#47851) |
| 28f289b825 | fix | hardening attribute and property binding rules for <iframe> elements (#47964) |
| d4b3c0b47c | fix | hardening rules related to the attribute order on iframe elements (#47935) |
| 85330f3fd9 | fix | update isDevMode
to rely on ngDevMode
(#47475) |
| Commit | Type | Description |
| -- | -- | -- |
| a8569e3802 | feat | export forms utility functions: isFormArray, isFormGroup… (#47718) |
| 96b7fe93af | fix | call setDisabledState
on ControlValueAcessor
when control is enabled (#47576) |
| a99d9d67f3 | fix | don't mutate validators array (#47830) |
| 2625dc1312 | fix | Improve a very commonly viewed error message by adding a guide. (#47969) |
| ae29f98c20 | fix | Runtime error pages must begin with leading zero (#47991) |
| Commit | Type | Description |
| -- | -- | -- |
| 3ba99e286a | feat | allow for child HttpClient
s to request via parents (#47502) |
| 84d0d33c35 | feat | introduce provideHttpClientTesting
provider function (#47502) |
| 62c7a7a16e | feat | introduce functional interceptors (#47502) |
| e47b129070 | feat | introduce the provideHttpClient()
API (#47502) |
| ea16a98dfe | fix | better handle unexpected undefined
XSRF tokens (#47683) |
| e7b48da713 | fix | rename withLegacyInterceptors
to withInterceptorsFromDi
(#47901) |
| Commit | Type | Description | | -- | -- | -- | | bebef5fb43 | feat | Quick fix to import a component when its selector is used (#47088) | | e7ee53c541 | feat | support to fix invalid banana in box (#47393) |
| Commit | Type | Description |
| -- | -- | -- |
| 400a6b5e37 | fix | add polyfill in polyfills array instead of polyfills.ts (#47569) |
| b6fd814542 | fix | update ng add schematic to support Angular CLI version 15 (#47763) |
| d36fd3d9e4 | refactor | remove deprecated canParse
method from TranslationParsers (#47275) |
| Commit | Type | Description | | -- | -- | -- | | 2908eba59c | fix | align server renderer interface with base renderer (#47868) |
| Commit | Type | Description |
| -- | -- | -- |
| 7bee28d037 | feat | add a migration to remove relativeLinkResolution
usages (#47604) |
| 5163e3d876 | feat | Add UrlTree constructor to public API (#47186) |
| da58801f95 | feat | auto-unwrap default exports when lazy loading (#47586) |
| c3f857975d | feat | make RouterOutlet name an Input so it can be set dynamically (#46569) |
| f73ef21442 | feat | merge RouterLinkWithHref
into RouterLink
(#47630) |
| 16c8f55663 | feat | migrate RouterLinkWithHref
references to RouterLink
(#47599) |
| 07017a7bd3 | feat | prevent provideRouter()
from usage in @Component (#47669) |
| 79e9e8ab77 | fix | Delay router scroll event until navigated components have rendered (#47563) |
| 6a88bad019 | fix | Ensure ActivatedRouteSnapshot#title has correct value (#47481) |
| 7b89d95c0e | fix | Remove deprecated relativeLinkResolution (#47623) |
Alan Agius, AleksanderBodurri, Alex Castle, Alex Rickabaugh, Andrew Kushnir, Andrew Scott, Charles Lyding, Dylan Hunn, Ferdinand Malcher, George Kalpakas, Jeremy Elbourn, Jessica Janiuk, JiaLiPassion, Joey Perrott, JoostK, Kara Erickson, Kristiyan Kostadinov, Martin Probst, Matthias Weiß, Matthieu Riegler, Paul Gschwendtner, Pawel Kozlowski, Sabareesh Kappagantu, WD Snoeijer, angular-robot[bot], arturovt, ced, dario-piotrowicz, ivanwonder and jaybell
<!-- CHANGELOG SPLIT MARKER --><a name="14.2.11"></a>
FAQs
Angular - animations integration with web-animations
The npm package @angular/animations receives a total of 2,262,128 weekly downloads. As such, @angular/animations popularity was classified as popular.
We found that @angular/animations demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.