From fcc9a3c1589693ce6840f1d69a71886cd12042e8 Mon Sep 17 00:00:00 2001 From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> Date: Wed, 18 Dec 2024 19:06:44 -0500 Subject: [PATCH 1/4] docs(animations): update angular to standalone --- .../animations/basic/angular/example_component_ts.md | 2 ++ .../angular/example_component_ts.md | 2 ++ .../animations/chain/angular/example_component_ts.md | 2 ++ .../animations/gesture/angular/example_component_ts.md | 2 ++ .../animations/group/angular/example_component_ts.md | 2 ++ .../keyframes/angular/example_component_ts.md | 2 ++ .../modal-override/angular/example_component_ts.md | 10 ++++++++++ .../preference-based/angular/example_component_ts.md | 2 ++ .../animations/basic/angular/example_component_ts.md | 2 ++ .../angular/example_component_ts.md | 2 ++ .../animations/chain/angular/example_component_ts.md | 2 ++ .../animations/gesture/angular/example_component_ts.md | 2 ++ .../animations/group/angular/example_component_ts.md | 2 ++ .../keyframes/angular/example_component_ts.md | 2 ++ .../modal-override/angular/example_component_ts.md | 10 ++++++++++ .../preference-based/angular/example_component_ts.md | 2 ++ 16 files changed, 48 insertions(+) diff --git a/static/usage/v7/animations/basic/angular/example_component_ts.md b/static/usage/v7/animations/basic/angular/example_component_ts.md index e8a1dae1af8..daf3590ba37 100644 --- a/static/usage/v7/animations/basic/angular/example_component_ts.md +++ b/static/usage/v7/animations/basic/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; import { AnimationController, IonCard } from '@ionic/angular'; @@ -7,6 +8,7 @@ import { AnimationController, IonCard } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md index 36a7e22081a..600db2d6209 100644 --- a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md +++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; import { AnimationController, IonCard } from '@ionic/angular'; @@ -7,6 +8,7 @@ import { AnimationController, IonCard } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; diff --git a/static/usage/v7/animations/chain/angular/example_component_ts.md b/static/usage/v7/animations/chain/angular/example_component_ts.md index 6c6acbef993..56baac0ac31 100644 --- a/static/usage/v7/animations/chain/angular/example_component_ts.md +++ b/static/usage/v7/animations/chain/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; import { AnimationController, IonCard } from '@ionic/angular'; @@ -7,6 +8,7 @@ import { AnimationController, IonCard } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; diff --git a/static/usage/v7/animations/gesture/angular/example_component_ts.md b/static/usage/v7/animations/gesture/angular/example_component_ts.md index 7b9aadccf5e..7ad65d845d3 100644 --- a/static/usage/v7/animations/gesture/angular/example_component_ts.md +++ b/static/usage/v7/animations/gesture/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { IonCard, IonCardContent } from '@ionic/angular/standalone'; import { AnimationController, GestureController, IonCard } from '@ionic/angular'; import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; @@ -7,6 +8,7 @@ import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent], }) export class ExampleComponent { @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; diff --git a/static/usage/v7/animations/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md index 63f7a7b2f7a..65e5ea4a16d 100644 --- a/static/usage/v7/animations/group/angular/example_component_ts.md +++ b/static/usage/v7/animations/group/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; import { AnimationController, IonCard } from '@ionic/angular'; @@ -7,6 +8,7 @@ import { AnimationController, IonCard } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; diff --git a/static/usage/v7/animations/keyframes/angular/example_component_ts.md b/static/usage/v7/animations/keyframes/angular/example_component_ts.md index 4ee04bea423..e363757c9a9 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md @@ -1,11 +1,13 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { Animation } from '@ionic/angular'; import { AnimationController, IonCard, IonCardContent } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; diff --git a/static/usage/v7/animations/modal-override/angular/example_component_ts.md b/static/usage/v7/animations/modal-override/angular/example_component_ts.md index b1fe997c1d4..8c521e59b86 100644 --- a/static/usage/v7/animations/modal-override/angular/example_component_ts.md +++ b/static/usage/v7/animations/modal-override/angular/example_component_ts.md @@ -1,11 +1,21 @@ ```ts import { Component, ViewChild } from '@angular/core'; +import { + IonButton, + IonButtons, + IonContent, + IonHeader, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; import type { IonModal } from '@ionic/angular'; import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { @ViewChild('modal', { static: true }) modal: IonModal; diff --git a/static/usage/v7/animations/preference-based/angular/example_component_ts.md b/static/usage/v7/animations/preference-based/angular/example_component_ts.md index c0e383d5ec0..c0bc3e7c6ea 100644 --- a/static/usage/v7/animations/preference-based/angular/example_component_ts.md +++ b/static/usage/v7/animations/preference-based/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; import { AnimationController, IonCard } from '@ionic/angular'; @@ -8,6 +9,7 @@ import { AnimationController, IonCard } from '@ionic/angular'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; diff --git a/static/usage/v8/animations/basic/angular/example_component_ts.md b/static/usage/v8/animations/basic/angular/example_component_ts.md index e8a1dae1af8..daf3590ba37 100644 --- a/static/usage/v8/animations/basic/angular/example_component_ts.md +++ b/static/usage/v8/animations/basic/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; import { AnimationController, IonCard } from '@ionic/angular'; @@ -7,6 +8,7 @@ import { AnimationController, IonCard } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; diff --git a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md index 36a7e22081a..600db2d6209 100644 --- a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md +++ b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; import { AnimationController, IonCard } from '@ionic/angular'; @@ -7,6 +8,7 @@ import { AnimationController, IonCard } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; diff --git a/static/usage/v8/animations/chain/angular/example_component_ts.md b/static/usage/v8/animations/chain/angular/example_component_ts.md index 6c6acbef993..56baac0ac31 100644 --- a/static/usage/v8/animations/chain/angular/example_component_ts.md +++ b/static/usage/v8/animations/chain/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; import { AnimationController, IonCard } from '@ionic/angular'; @@ -7,6 +8,7 @@ import { AnimationController, IonCard } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; diff --git a/static/usage/v8/animations/gesture/angular/example_component_ts.md b/static/usage/v8/animations/gesture/angular/example_component_ts.md index 7b9aadccf5e..7ad65d845d3 100644 --- a/static/usage/v8/animations/gesture/angular/example_component_ts.md +++ b/static/usage/v8/animations/gesture/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { IonCard, IonCardContent } from '@ionic/angular/standalone'; import { AnimationController, GestureController, IonCard } from '@ionic/angular'; import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; @@ -7,6 +8,7 @@ import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent], }) export class ExampleComponent { @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; diff --git a/static/usage/v8/animations/group/angular/example_component_ts.md b/static/usage/v8/animations/group/angular/example_component_ts.md index 63f7a7b2f7a..65e5ea4a16d 100644 --- a/static/usage/v8/animations/group/angular/example_component_ts.md +++ b/static/usage/v8/animations/group/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; import { AnimationController, IonCard } from '@ionic/angular'; @@ -7,6 +8,7 @@ import { AnimationController, IonCard } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; diff --git a/static/usage/v8/animations/keyframes/angular/example_component_ts.md b/static/usage/v8/animations/keyframes/angular/example_component_ts.md index 4ee04bea423..e363757c9a9 100644 --- a/static/usage/v8/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v8/animations/keyframes/angular/example_component_ts.md @@ -1,11 +1,13 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { Animation } from '@ionic/angular'; import { AnimationController, IonCard, IonCardContent } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; diff --git a/static/usage/v8/animations/modal-override/angular/example_component_ts.md b/static/usage/v8/animations/modal-override/angular/example_component_ts.md index b1fe997c1d4..8c521e59b86 100644 --- a/static/usage/v8/animations/modal-override/angular/example_component_ts.md +++ b/static/usage/v8/animations/modal-override/angular/example_component_ts.md @@ -1,11 +1,21 @@ ```ts import { Component, ViewChild } from '@angular/core'; +import { + IonButton, + IonButtons, + IonContent, + IonHeader, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; import type { IonModal } from '@ionic/angular'; import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { @ViewChild('modal', { static: true }) modal: IonModal; diff --git a/static/usage/v8/animations/preference-based/angular/example_component_ts.md b/static/usage/v8/animations/preference-based/angular/example_component_ts.md index c0e383d5ec0..c0bc3e7c6ea 100644 --- a/static/usage/v8/animations/preference-based/angular/example_component_ts.md +++ b/static/usage/v8/animations/preference-based/angular/example_component_ts.md @@ -1,5 +1,6 @@ ```ts import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; import { AnimationController, IonCard } from '@ionic/angular'; @@ -8,6 +9,7 @@ import { AnimationController, IonCard } from '@ionic/angular'; selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; From 68a54bf70fefcaf0ae3cfe7d5958baefa3ffc4a3 Mon Sep 17 00:00:00 2001 From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 20 Dec 2024 11:36:14 -0500 Subject: [PATCH 2/4] docs(animations): fix type errors --- .../basic/angular/example_component_ts.md | 9 +- .../angular/example_component_ts.md | 50 +++++---- .../chain/angular/example_component_ts.md | 100 ++++++++++-------- .../gesture/angular/example_component_ts.md | 10 +- .../group/angular/example_component_ts.md | 16 +-- .../keyframes/angular/example_component_ts.md | 6 +- .../angular/example_component_ts.md | 17 +-- .../angular/example_component_ts.md | 9 +- .../basic/angular/example_component_ts.md | 9 +- .../angular/example_component_ts.md | 50 +++++---- .../chain/angular/example_component_ts.md | 100 ++++++++++-------- .../gesture/angular/example_component_ts.md | 10 +- .../group/angular/example_component_ts.md | 16 +-- .../keyframes/angular/example_component_ts.md | 6 +- .../angular/example_component_ts.md | 17 +-- .../angular/example_component_ts.md | 9 +- 16 files changed, 234 insertions(+), 200 deletions(-) diff --git a/static/usage/v7/animations/basic/angular/example_component_ts.md b/static/usage/v7/animations/basic/angular/example_component_ts.md index daf3590ba37..5459f265960 100644 --- a/static/usage/v7/animations/basic/angular/example_component_ts.md +++ b/static/usage/v7/animations/basic/angular/example_component_ts.md @@ -1,9 +1,8 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; -import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -11,9 +10,9 @@ import { AnimationController, IonCard } from '@ionic/angular'; imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md index 600db2d6209..02d566d14bf 100644 --- a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md +++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md @@ -3,7 +3,7 @@ import { Component, ElementRef, ViewChildren } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -11,32 +11,38 @@ import { AnimationController, IonCard } from '@ionic/angular'; imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { - const card = this.animationCtrl - .create() - .addElement(this.cardElements.get(0).nativeElement) - .duration(2000) - .beforeStyles({ - filter: 'invert(75%)', - }) - .beforeClearStyles(['box-shadow']) - .afterStyles({ - 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', - }) - .afterClearStyles(['filter']) - .keyframes([ - { offset: 0, transform: 'scale(1)' }, - { offset: 0.5, transform: 'scale(1.5)' }, - { offset: 1, transform: 'scale(1)' }, - ]); - - this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + const cardEl = this.cardElements.get(0); + + const card = cardEl + ? this.animationCtrl + .create() + .addElement(cardEl.nativeElement) + .duration(2000) + .beforeStyles({ + filter: 'invert(75%)', + }) + .beforeClearStyles(['box-shadow']) + .afterStyles({ + 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', + }) + .afterClearStyles(['filter']) + .keyframes([ + { offset: 0, transform: 'scale(1)' }, + { offset: 0.5, transform: 'scale(1.5)' }, + { offset: 1, transform: 'scale(1)' }, + ]) + : null; + + if (card) { + this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + } } play() { diff --git a/static/usage/v7/animations/chain/angular/example_component_ts.md b/static/usage/v7/animations/chain/angular/example_component_ts.md index 56baac0ac31..9a24913f82d 100644 --- a/static/usage/v7/animations/chain/angular/example_component_ts.md +++ b/static/usage/v7/animations/chain/angular/example_component_ts.md @@ -3,7 +3,7 @@ import { Component, ElementRef, ViewChildren } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -11,65 +11,75 @@ import { AnimationController, IonCard } from '@ionic/angular'; imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private cardA: Animation; - private cardB: Animation; - private cardC: Animation; + private cardA!: Animation | null; + private cardB!: Animation | null; + private cardC!: Animation | null; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { - this.cardA = this.animationCtrl - .create() - .addElement(this.cardElements.get(0).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1) rotate(0)' }, - { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(0)' }, - ]); + const cardElA = this.cardElements.get(0); + const cardElB = this.cardElements.get(1); + const cardElC = this.cardElements.get(2); - this.cardB = this.animationCtrl - .create() - .addElement(this.cardElements.get(1).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1)', opacity: '1' }, - { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, - { offset: 1, transform: 'scale(1)', opacity: '1' }, - ]); + this.cardA = cardElA + ? this.animationCtrl + .create() + .addElement(cardElA.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, + ]) + : null; - this.cardC = this.animationCtrl - .create() - .addElement(this.cardElements.get(2).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1)', opacity: '0.5' }, - { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, - { offset: 1, transform: 'scale(1)', opacity: '0.5' }, - ]); + this.cardB = cardElB + ? this.animationCtrl + .create() + .addElement(cardElB.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]) + : null; + + this.cardC = cardElC + ? this.animationCtrl + .create() + .addElement(cardElC.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]) + : null; } async play() { - await this.cardA.play(); - await this.cardB.play(); - await this.cardC.play(); + await this.cardA?.play(); + await this.cardB?.play(); + await this.cardC?.play(); } pause() { - this.cardA.pause(); - this.cardB.pause(); - this.cardC.pause(); + this.cardA?.pause(); + this.cardB?.pause(); + this.cardC?.pause(); } - stop() { - this.cardA.stop(); - this.cardB.stop(); - this.cardC.stop(); + async stop() { + await this.cardA?.stop(); + await this.cardB?.stop(); + await this.cardC?.stop(); } } ``` diff --git a/static/usage/v7/animations/gesture/angular/example_component_ts.md b/static/usage/v7/animations/gesture/angular/example_component_ts.md index 7ad65d845d3..2f97a2f8cd9 100644 --- a/static/usage/v7/animations/gesture/angular/example_component_ts.md +++ b/static/usage/v7/animations/gesture/angular/example_component_ts.md @@ -1,7 +1,7 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { IonCard, IonCardContent } from '@ionic/angular/standalone'; -import { AnimationController, GestureController, IonCard } from '@ionic/angular'; +import { AnimationController, GestureController } from '@ionic/angular'; import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; @Component({ @@ -11,10 +11,10 @@ import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; imports: [IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; - private gesture: Gesture; + private animation!: Animation; + private gesture!: Gesture; private started = false; private initialStep = 0; diff --git a/static/usage/v7/animations/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md index 65e5ea4a16d..15ff0ad4876 100644 --- a/static/usage/v7/animations/group/angular/example_component_ts.md +++ b/static/usage/v7/animations/group/angular/example_component_ts.md @@ -3,7 +3,7 @@ import { Component, ElementRef, ViewChildren } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -11,25 +11,25 @@ import { AnimationController, IonCard } from '@ionic/angular'; imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { const cardA = this.animationCtrl .create() - .addElement(this.cardElements.get(0).nativeElement) + .addElement(this.cardElements.get(0)!.nativeElement) .keyframes([ { offset: 0, transform: 'scale(1) rotate(0)' }, { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(0) ' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, ]); const cardB = this.animationCtrl .create() - .addElement(this.cardElements.get(1).nativeElement) + .addElement(this.cardElements.get(1)!.nativeElement) .keyframes([ { offset: 0, transform: 'scale(1)', opacity: '1' }, { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' }, @@ -38,7 +38,7 @@ export class ExampleComponent { const cardC = this.animationCtrl .create() - .addElement(this.cardElements.get(2).nativeElement) + .addElement(this.cardElements.get(2)!.nativeElement) .duration(5000) .keyframes([ { offset: 0, transform: 'scale(1)', opacity: '0.5' }, @@ -50,7 +50,7 @@ export class ExampleComponent { .create() .duration(2000) .iterations(Infinity) - .addAnimation([cardA, cardB, cardC]); + .addAnimation([cardA, cardB, cardC].filter(Boolean) as Animation[]); } play() { diff --git a/static/usage/v7/animations/keyframes/angular/example_component_ts.md b/static/usage/v7/animations/keyframes/angular/example_component_ts.md index e363757c9a9..c1e2818c671 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md @@ -2,7 +2,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard, IonCardContent } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -10,9 +10,9 @@ import { AnimationController, IonCard, IonCardContent } from '@ionic/angular'; imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v7/animations/modal-override/angular/example_component_ts.md b/static/usage/v7/animations/modal-override/angular/example_component_ts.md index 8c521e59b86..3a00d795097 100644 --- a/static/usage/v7/animations/modal-override/angular/example_component_ts.md +++ b/static/usage/v7/animations/modal-override/angular/example_component_ts.md @@ -9,7 +9,6 @@ import { IonTitle, IonToolbar, } from '@ionic/angular/standalone'; -import type { IonModal } from '@ionic/angular'; import { AnimationController } from '@ionic/angular'; @Component({ @@ -18,7 +17,7 @@ import { AnimationController } from '@ionic/angular'; imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { - @ViewChild('modal', { static: true }) modal: IonModal; + @ViewChild('modal', { static: true }) modal!: IonModal; constructor(private animationCtrl: AnimationController) {} @@ -26,18 +25,22 @@ export class ExampleComponent { const enterAnimation = (baseEl: HTMLElement) => { const root = baseEl.shadowRoot; + const backdropElement = root?.querySelector('ion-backdrop'); + const wrapperElement = root?.querySelector('.modal-wrapper'); + const backdropAnimation = this.animationCtrl .create() - .addElement(root.querySelector('ion-backdrop')) + .addElement(backdropElement || baseEl) .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); - const wrapperAnimation = this.animationCtrl - .create() - .addElement(root.querySelector('.modal-wrapper')) - .keyframes([ + const wrapperAnimation = this.animationCtrl.create(); + + if (wrapperElement) { + wrapperAnimation.addElement(wrapperElement).keyframes([ { offset: 0, opacity: '0', transform: 'scale(0)' }, { offset: 1, opacity: '0.99', transform: 'scale(1)' }, ]); + } return this.animationCtrl .create() diff --git a/static/usage/v7/animations/preference-based/angular/example_component_ts.md b/static/usage/v7/animations/preference-based/angular/example_component_ts.md index c0bc3e7c6ea..4f3628a1fde 100644 --- a/static/usage/v7/animations/preference-based/angular/example_component_ts.md +++ b/static/usage/v7/animations/preference-based/angular/example_component_ts.md @@ -1,9 +1,8 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; -import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -12,9 +11,9 @@ import { AnimationController, IonCard } from '@ionic/angular'; imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v8/animations/basic/angular/example_component_ts.md b/static/usage/v8/animations/basic/angular/example_component_ts.md index daf3590ba37..5459f265960 100644 --- a/static/usage/v8/animations/basic/angular/example_component_ts.md +++ b/static/usage/v8/animations/basic/angular/example_component_ts.md @@ -1,9 +1,8 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; -import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -11,9 +10,9 @@ import { AnimationController, IonCard } from '@ionic/angular'; imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md index 600db2d6209..02d566d14bf 100644 --- a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md +++ b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md @@ -3,7 +3,7 @@ import { Component, ElementRef, ViewChildren } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -11,32 +11,38 @@ import { AnimationController, IonCard } from '@ionic/angular'; imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { - const card = this.animationCtrl - .create() - .addElement(this.cardElements.get(0).nativeElement) - .duration(2000) - .beforeStyles({ - filter: 'invert(75%)', - }) - .beforeClearStyles(['box-shadow']) - .afterStyles({ - 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', - }) - .afterClearStyles(['filter']) - .keyframes([ - { offset: 0, transform: 'scale(1)' }, - { offset: 0.5, transform: 'scale(1.5)' }, - { offset: 1, transform: 'scale(1)' }, - ]); - - this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + const cardEl = this.cardElements.get(0); + + const card = cardEl + ? this.animationCtrl + .create() + .addElement(cardEl.nativeElement) + .duration(2000) + .beforeStyles({ + filter: 'invert(75%)', + }) + .beforeClearStyles(['box-shadow']) + .afterStyles({ + 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', + }) + .afterClearStyles(['filter']) + .keyframes([ + { offset: 0, transform: 'scale(1)' }, + { offset: 0.5, transform: 'scale(1.5)' }, + { offset: 1, transform: 'scale(1)' }, + ]) + : null; + + if (card) { + this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + } } play() { diff --git a/static/usage/v8/animations/chain/angular/example_component_ts.md b/static/usage/v8/animations/chain/angular/example_component_ts.md index 56baac0ac31..9a24913f82d 100644 --- a/static/usage/v8/animations/chain/angular/example_component_ts.md +++ b/static/usage/v8/animations/chain/angular/example_component_ts.md @@ -3,7 +3,7 @@ import { Component, ElementRef, ViewChildren } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -11,65 +11,75 @@ import { AnimationController, IonCard } from '@ionic/angular'; imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private cardA: Animation; - private cardB: Animation; - private cardC: Animation; + private cardA!: Animation | null; + private cardB!: Animation | null; + private cardC!: Animation | null; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { - this.cardA = this.animationCtrl - .create() - .addElement(this.cardElements.get(0).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1) rotate(0)' }, - { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(0)' }, - ]); + const cardElA = this.cardElements.get(0); + const cardElB = this.cardElements.get(1); + const cardElC = this.cardElements.get(2); - this.cardB = this.animationCtrl - .create() - .addElement(this.cardElements.get(1).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1)', opacity: '1' }, - { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, - { offset: 1, transform: 'scale(1)', opacity: '1' }, - ]); + this.cardA = cardElA + ? this.animationCtrl + .create() + .addElement(cardElA.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, + ]) + : null; - this.cardC = this.animationCtrl - .create() - .addElement(this.cardElements.get(2).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1)', opacity: '0.5' }, - { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, - { offset: 1, transform: 'scale(1)', opacity: '0.5' }, - ]); + this.cardB = cardElB + ? this.animationCtrl + .create() + .addElement(cardElB.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]) + : null; + + this.cardC = cardElC + ? this.animationCtrl + .create() + .addElement(cardElC.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]) + : null; } async play() { - await this.cardA.play(); - await this.cardB.play(); - await this.cardC.play(); + await this.cardA?.play(); + await this.cardB?.play(); + await this.cardC?.play(); } pause() { - this.cardA.pause(); - this.cardB.pause(); - this.cardC.pause(); + this.cardA?.pause(); + this.cardB?.pause(); + this.cardC?.pause(); } - stop() { - this.cardA.stop(); - this.cardB.stop(); - this.cardC.stop(); + async stop() { + await this.cardA?.stop(); + await this.cardB?.stop(); + await this.cardC?.stop(); } } ``` diff --git a/static/usage/v8/animations/gesture/angular/example_component_ts.md b/static/usage/v8/animations/gesture/angular/example_component_ts.md index 7ad65d845d3..2f97a2f8cd9 100644 --- a/static/usage/v8/animations/gesture/angular/example_component_ts.md +++ b/static/usage/v8/animations/gesture/angular/example_component_ts.md @@ -1,7 +1,7 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { IonCard, IonCardContent } from '@ionic/angular/standalone'; -import { AnimationController, GestureController, IonCard } from '@ionic/angular'; +import { AnimationController, GestureController } from '@ionic/angular'; import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; @Component({ @@ -11,10 +11,10 @@ import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; imports: [IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; - private gesture: Gesture; + private animation!: Animation; + private gesture!: Gesture; private started = false; private initialStep = 0; diff --git a/static/usage/v8/animations/group/angular/example_component_ts.md b/static/usage/v8/animations/group/angular/example_component_ts.md index 65e5ea4a16d..15ff0ad4876 100644 --- a/static/usage/v8/animations/group/angular/example_component_ts.md +++ b/static/usage/v8/animations/group/angular/example_component_ts.md @@ -3,7 +3,7 @@ import { Component, ElementRef, ViewChildren } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -11,25 +11,25 @@ import { AnimationController, IonCard } from '@ionic/angular'; imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { const cardA = this.animationCtrl .create() - .addElement(this.cardElements.get(0).nativeElement) + .addElement(this.cardElements.get(0)!.nativeElement) .keyframes([ { offset: 0, transform: 'scale(1) rotate(0)' }, { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(0) ' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, ]); const cardB = this.animationCtrl .create() - .addElement(this.cardElements.get(1).nativeElement) + .addElement(this.cardElements.get(1)!.nativeElement) .keyframes([ { offset: 0, transform: 'scale(1)', opacity: '1' }, { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' }, @@ -38,7 +38,7 @@ export class ExampleComponent { const cardC = this.animationCtrl .create() - .addElement(this.cardElements.get(2).nativeElement) + .addElement(this.cardElements.get(2)!.nativeElement) .duration(5000) .keyframes([ { offset: 0, transform: 'scale(1)', opacity: '0.5' }, @@ -50,7 +50,7 @@ export class ExampleComponent { .create() .duration(2000) .iterations(Infinity) - .addAnimation([cardA, cardB, cardC]); + .addAnimation([cardA, cardB, cardC].filter(Boolean) as Animation[]); } play() { diff --git a/static/usage/v8/animations/keyframes/angular/example_component_ts.md b/static/usage/v8/animations/keyframes/angular/example_component_ts.md index e363757c9a9..c1e2818c671 100644 --- a/static/usage/v8/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v8/animations/keyframes/angular/example_component_ts.md @@ -2,7 +2,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard, IonCardContent } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -10,9 +10,9 @@ import { AnimationController, IonCard, IonCardContent } from '@ionic/angular'; imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v8/animations/modal-override/angular/example_component_ts.md b/static/usage/v8/animations/modal-override/angular/example_component_ts.md index 8c521e59b86..3a00d795097 100644 --- a/static/usage/v8/animations/modal-override/angular/example_component_ts.md +++ b/static/usage/v8/animations/modal-override/angular/example_component_ts.md @@ -9,7 +9,6 @@ import { IonTitle, IonToolbar, } from '@ionic/angular/standalone'; -import type { IonModal } from '@ionic/angular'; import { AnimationController } from '@ionic/angular'; @Component({ @@ -18,7 +17,7 @@ import { AnimationController } from '@ionic/angular'; imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { - @ViewChild('modal', { static: true }) modal: IonModal; + @ViewChild('modal', { static: true }) modal!: IonModal; constructor(private animationCtrl: AnimationController) {} @@ -26,18 +25,22 @@ export class ExampleComponent { const enterAnimation = (baseEl: HTMLElement) => { const root = baseEl.shadowRoot; + const backdropElement = root?.querySelector('ion-backdrop'); + const wrapperElement = root?.querySelector('.modal-wrapper'); + const backdropAnimation = this.animationCtrl .create() - .addElement(root.querySelector('ion-backdrop')) + .addElement(backdropElement || baseEl) .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); - const wrapperAnimation = this.animationCtrl - .create() - .addElement(root.querySelector('.modal-wrapper')) - .keyframes([ + const wrapperAnimation = this.animationCtrl.create(); + + if (wrapperElement) { + wrapperAnimation.addElement(wrapperElement).keyframes([ { offset: 0, opacity: '0', transform: 'scale(0)' }, { offset: 1, opacity: '0.99', transform: 'scale(1)' }, ]); + } return this.animationCtrl .create() diff --git a/static/usage/v8/animations/preference-based/angular/example_component_ts.md b/static/usage/v8/animations/preference-based/angular/example_component_ts.md index c0bc3e7c6ea..4f3628a1fde 100644 --- a/static/usage/v8/animations/preference-based/angular/example_component_ts.md +++ b/static/usage/v8/animations/preference-based/angular/example_component_ts.md @@ -1,9 +1,8 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { Component, ElementRef, ViewChild } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; -import type { QueryList } from '@angular/core'; import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', @@ -12,9 +11,9 @@ import { AnimationController, IonCard } from '@ionic/angular'; imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} From 8bad02d0953e76ca70df866362c8f08e276779f6 Mon Sep 17 00:00:00 2001 From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 20 Dec 2024 14:56:39 -0500 Subject: [PATCH 3/4] docs(animations): update angular to standalone --- static/usage/v7/animations/basic/angular/example_component_ts.md | 1 + .../before-and-after-hooks/angular/example_component_ts.md | 1 + static/usage/v7/animations/chain/angular/example_component_ts.md | 1 + static/usage/v7/animations/group/angular/example_component_ts.md | 1 + .../v7/animations/keyframes/angular/example_component_ts.md | 1 + .../v7/animations/modal-override/angular/example_component_ts.md | 1 + static/usage/v8/animations/basic/angular/example_component_ts.md | 1 + .../before-and-after-hooks/angular/example_component_ts.md | 1 + static/usage/v8/animations/chain/angular/example_component_ts.md | 1 + static/usage/v8/animations/group/angular/example_component_ts.md | 1 + .../v8/animations/keyframes/angular/example_component_ts.md | 1 + .../v8/animations/modal-override/angular/example_component_ts.md | 1 + 12 files changed, 12 insertions(+) diff --git a/static/usage/v7/animations/basic/angular/example_component_ts.md b/static/usage/v7/animations/basic/angular/example_component_ts.md index 5459f265960..b6450f8a68d 100644 --- a/static/usage/v7/animations/basic/angular/example_component_ts.md +++ b/static/usage/v7/animations/basic/angular/example_component_ts.md @@ -7,6 +7,7 @@ import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md index 02d566d14bf..8b2f1875136 100644 --- a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md +++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md @@ -8,6 +8,7 @@ import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { diff --git a/static/usage/v7/animations/chain/angular/example_component_ts.md b/static/usage/v7/animations/chain/angular/example_component_ts.md index 9a24913f82d..66865502bda 100644 --- a/static/usage/v7/animations/chain/angular/example_component_ts.md +++ b/static/usage/v7/animations/chain/angular/example_component_ts.md @@ -8,6 +8,7 @@ import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { diff --git a/static/usage/v7/animations/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md index 15ff0ad4876..4cd1934a024 100644 --- a/static/usage/v7/animations/group/angular/example_component_ts.md +++ b/static/usage/v7/animations/group/angular/example_component_ts.md @@ -8,6 +8,7 @@ import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { diff --git a/static/usage/v7/animations/keyframes/angular/example_component_ts.md b/static/usage/v7/animations/keyframes/angular/example_component_ts.md index c1e2818c671..d077315f113 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md @@ -7,6 +7,7 @@ import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { diff --git a/static/usage/v7/animations/modal-override/angular/example_component_ts.md b/static/usage/v7/animations/modal-override/angular/example_component_ts.md index 3a00d795097..6fa3162c13e 100644 --- a/static/usage/v7/animations/modal-override/angular/example_component_ts.md +++ b/static/usage/v7/animations/modal-override/angular/example_component_ts.md @@ -14,6 +14,7 @@ import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { diff --git a/static/usage/v8/animations/basic/angular/example_component_ts.md b/static/usage/v8/animations/basic/angular/example_component_ts.md index 5459f265960..b6450f8a68d 100644 --- a/static/usage/v8/animations/basic/angular/example_component_ts.md +++ b/static/usage/v8/animations/basic/angular/example_component_ts.md @@ -7,6 +7,7 @@ import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { diff --git a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md index 02d566d14bf..8b2f1875136 100644 --- a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md +++ b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md @@ -8,6 +8,7 @@ import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { diff --git a/static/usage/v8/animations/chain/angular/example_component_ts.md b/static/usage/v8/animations/chain/angular/example_component_ts.md index 9a24913f82d..66865502bda 100644 --- a/static/usage/v8/animations/chain/angular/example_component_ts.md +++ b/static/usage/v8/animations/chain/angular/example_component_ts.md @@ -8,6 +8,7 @@ import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { diff --git a/static/usage/v8/animations/group/angular/example_component_ts.md b/static/usage/v8/animations/group/angular/example_component_ts.md index 15ff0ad4876..4cd1934a024 100644 --- a/static/usage/v8/animations/group/angular/example_component_ts.md +++ b/static/usage/v8/animations/group/angular/example_component_ts.md @@ -8,6 +8,7 @@ import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { diff --git a/static/usage/v8/animations/keyframes/angular/example_component_ts.md b/static/usage/v8/animations/keyframes/angular/example_component_ts.md index c1e2818c671..d077315f113 100644 --- a/static/usage/v8/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v8/animations/keyframes/angular/example_component_ts.md @@ -7,6 +7,7 @@ import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { diff --git a/static/usage/v8/animations/modal-override/angular/example_component_ts.md b/static/usage/v8/animations/modal-override/angular/example_component_ts.md index 3a00d795097..6fa3162c13e 100644 --- a/static/usage/v8/animations/modal-override/angular/example_component_ts.md +++ b/static/usage/v8/animations/modal-override/angular/example_component_ts.md @@ -14,6 +14,7 @@ import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { From 2be08c800e8da5e922d5fb7841cda81cc3ac16b7 Mon Sep 17 00:00:00 2001 From: Brandy Carney <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 27 Dec 2024 15:39:54 -0500 Subject: [PATCH 4/4] docs(animations): update angular to standalone --- .../v7/animations/basic/angular/example_component_ts.md | 5 ++--- .../before-and-after-hooks/angular/example_component_ts.md | 5 ++--- .../v7/animations/chain/angular/example_component_ts.md | 5 ++--- .../v7/animations/gesture/angular/example_component_ts.md | 5 ++--- .../v7/animations/group/angular/example_component_ts.md | 5 ++--- .../v7/animations/keyframes/angular/example_component_ts.md | 5 ++--- .../modal-override/angular/example_component_ts.md | 2 +- .../preference-based/angular/example_component_ts.md | 5 ++--- .../modal/styling/animations/angular/example_component_ts.md | 2 +- .../v8/animations/basic/angular/example_component_ts.md | 4 ++-- .../before-and-after-hooks/angular/example_component_ts.md | 4 ++-- .../v8/animations/chain/angular/example_component_ts.md | 4 ++-- .../v8/animations/gesture/angular/example_component_ts.md | 5 ++--- .../v8/animations/group/angular/example_component_ts.md | 4 ++-- .../v8/animations/keyframes/angular/example_component_ts.md | 4 ++-- .../modal-override/angular/example_component_ts.md | 2 +- .../preference-based/angular/example_component_ts.md | 4 ++-- .../modal/styling/animations/angular/example_component_ts.md | 2 +- 18 files changed, 32 insertions(+), 40 deletions(-) diff --git a/static/usage/v7/animations/basic/angular/example_component_ts.md b/static/usage/v7/animations/basic/angular/example_component_ts.md index b6450f8a68d..117dd07dcbd 100644 --- a/static/usage/v7/animations/basic/angular/example_component_ts.md +++ b/static/usage/v7/animations/basic/angular/example_component_ts.md @@ -1,8 +1,7 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; -import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; -import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md index 8b2f1875136..32c5089fdcb 100644 --- a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md +++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md @@ -1,9 +1,8 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; -import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v7/animations/chain/angular/example_component_ts.md b/static/usage/v7/animations/chain/angular/example_component_ts.md index 66865502bda..cb81d2e30d9 100644 --- a/static/usage/v7/animations/chain/angular/example_component_ts.md +++ b/static/usage/v7/animations/chain/angular/example_component_ts.md @@ -1,9 +1,8 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; -import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v7/animations/gesture/angular/example_component_ts.md b/static/usage/v7/animations/gesture/angular/example_component_ts.md index 2f97a2f8cd9..49bb9e92f64 100644 --- a/static/usage/v7/animations/gesture/angular/example_component_ts.md +++ b/static/usage/v7/animations/gesture/angular/example_component_ts.md @@ -1,8 +1,7 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; -import { IonCard, IonCardContent } from '@ionic/angular/standalone'; -import { AnimationController, GestureController } from '@ionic/angular'; -import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; +import { AnimationController, GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation, Gesture, GestureDetail } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v7/animations/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md index 4cd1934a024..607b9e9cdcd 100644 --- a/static/usage/v7/animations/group/angular/example_component_ts.md +++ b/static/usage/v7/animations/group/angular/example_component_ts.md @@ -1,9 +1,8 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; -import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v7/animations/keyframes/angular/example_component_ts.md b/static/usage/v7/animations/keyframes/angular/example_component_ts.md index d077315f113..88bc548bd60 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md @@ -1,8 +1,7 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; -import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; -import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v7/animations/modal-override/angular/example_component_ts.md b/static/usage/v7/animations/modal-override/angular/example_component_ts.md index 6fa3162c13e..85a6a5f9b3b 100644 --- a/static/usage/v7/animations/modal-override/angular/example_component_ts.md +++ b/static/usage/v7/animations/modal-override/angular/example_component_ts.md @@ -1,6 +1,7 @@ ```ts import { Component, ViewChild } from '@angular/core'; import { + AnimationController, IonButton, IonButtons, IonContent, @@ -9,7 +10,6 @@ import { IonTitle, IonToolbar, } from '@ionic/angular/standalone'; -import { AnimationController } from '@ionic/angular'; @Component({ selector: 'app-example', diff --git a/static/usage/v7/animations/preference-based/angular/example_component_ts.md b/static/usage/v7/animations/preference-based/angular/example_component_ts.md index 4f3628a1fde..98b3a8d4119 100644 --- a/static/usage/v7/animations/preference-based/angular/example_component_ts.md +++ b/static/usage/v7/animations/preference-based/angular/example_component_ts.md @@ -1,8 +1,7 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; -import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; -import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v7/modal/styling/animations/angular/example_component_ts.md b/static/usage/v7/modal/styling/animations/angular/example_component_ts.md index c4a743b2745..acfb6a412ca 100644 --- a/static/usage/v7/modal/styling/animations/angular/example_component_ts.md +++ b/static/usage/v7/modal/styling/animations/angular/example_component_ts.md @@ -1,6 +1,6 @@ ```ts import { Component } from '@angular/core'; -import { AnimationController } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v8/animations/basic/angular/example_component_ts.md b/static/usage/v8/animations/basic/angular/example_component_ts.md index b6450f8a68d..eef9ba4482c 100644 --- a/static/usage/v8/animations/basic/angular/example_component_ts.md +++ b/static/usage/v8/animations/basic/angular/example_component_ts.md @@ -1,8 +1,8 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; -import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md index 8b2f1875136..84ca1f2a479 100644 --- a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md +++ b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md @@ -2,8 +2,8 @@ import { Component, ElementRef, ViewChildren } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v8/animations/chain/angular/example_component_ts.md b/static/usage/v8/animations/chain/angular/example_component_ts.md index 66865502bda..ac8959f5fa4 100644 --- a/static/usage/v8/animations/chain/angular/example_component_ts.md +++ b/static/usage/v8/animations/chain/angular/example_component_ts.md @@ -2,8 +2,8 @@ import { Component, ElementRef, ViewChildren } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v8/animations/gesture/angular/example_component_ts.md b/static/usage/v8/animations/gesture/angular/example_component_ts.md index 2f97a2f8cd9..49bb9e92f64 100644 --- a/static/usage/v8/animations/gesture/angular/example_component_ts.md +++ b/static/usage/v8/animations/gesture/angular/example_component_ts.md @@ -1,8 +1,7 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; -import { IonCard, IonCardContent } from '@ionic/angular/standalone'; -import { AnimationController, GestureController } from '@ionic/angular'; -import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; +import { AnimationController, GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation, Gesture, GestureDetail } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v8/animations/group/angular/example_component_ts.md b/static/usage/v8/animations/group/angular/example_component_ts.md index 4cd1934a024..a75e3041da0 100644 --- a/static/usage/v8/animations/group/angular/example_component_ts.md +++ b/static/usage/v8/animations/group/angular/example_component_ts.md @@ -2,8 +2,8 @@ import { Component, ElementRef, ViewChildren } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v8/animations/keyframes/angular/example_component_ts.md b/static/usage/v8/animations/keyframes/angular/example_component_ts.md index d077315f113..d6739439d97 100644 --- a/static/usage/v8/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v8/animations/keyframes/angular/example_component_ts.md @@ -1,8 +1,8 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; -import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v8/animations/modal-override/angular/example_component_ts.md b/static/usage/v8/animations/modal-override/angular/example_component_ts.md index 6fa3162c13e..21dd0d187c5 100644 --- a/static/usage/v8/animations/modal-override/angular/example_component_ts.md +++ b/static/usage/v8/animations/modal-override/angular/example_component_ts.md @@ -9,7 +9,7 @@ import { IonTitle, IonToolbar, } from '@ionic/angular/standalone'; -import { AnimationController } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v8/animations/preference-based/angular/example_component_ts.md b/static/usage/v8/animations/preference-based/angular/example_component_ts.md index 4f3628a1fde..40e672d5850 100644 --- a/static/usage/v8/animations/preference-based/angular/example_component_ts.md +++ b/static/usage/v8/animations/preference-based/angular/example_component_ts.md @@ -1,8 +1,8 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; -import type { Animation } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v8/modal/styling/animations/angular/example_component_ts.md b/static/usage/v8/modal/styling/animations/angular/example_component_ts.md index c4a743b2745..acfb6a412ca 100644 --- a/static/usage/v8/modal/styling/animations/angular/example_component_ts.md +++ b/static/usage/v8/modal/styling/animations/angular/example_component_ts.md @@ -1,6 +1,6 @@ ```ts import { Component } from '@angular/core'; -import { AnimationController } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example',