Skip to content

Commit 70ae31d

Browse files
brandyscarneybrandyscarney
authored
docs(animations): update angular to standalone (#3911)
1 parent 5c0f307 commit 70ae31d

File tree

18 files changed

+304
-218
lines changed

18 files changed

+304
-218
lines changed

‎static/usage/v7/animations/basic/angular/example_component_ts.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
```ts
2-
import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
3-
import type { QueryList } from '@angular/core';
4-
import type { Animation } from '@ionic/angular';
5-
import { AnimationController, IonCard } from '@ionic/angular';
2+
import { Component, ElementRef, ViewChild } from '@angular/core';
3+
import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
4+
import type { Animation } from '@ionic/angular/standalone';
65

76
@Component({
87
selector: 'app-example',
98
templateUrl: 'example.component.html',
9+
styleUrls: ['example.component.css'],
10+
imports: [IonButton, IonCard, IonCardContent],
1011
})
1112
export class ExampleComponent {
12-
@ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
13+
@ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
1314

14-
private animation: Animation;
15+
private animation!: Animation;
1516

1617
constructor(private animationCtrl: AnimationController) {}
1718

‎static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,48 @@
11
```ts
22
import { Component, ElementRef, ViewChildren } from '@angular/core';
3+
import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
34
import type { QueryList } from '@angular/core';
4-
import type { Animation } from '@ionic/angular';
5-
import { AnimationController, IonCard } from '@ionic/angular';
5+
import type { Animation } from '@ionic/angular/standalone';
66

77
@Component({
88
selector: 'app-example',
99
templateUrl: 'example.component.html',
10+
styleUrls: ['example.component.css'],
11+
imports: [IonButton, IonCard, IonCardContent],
1012
})
1113
export class ExampleComponent {
12-
@ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
14+
@ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList<ElementRef<HTMLIonCardElement>>;
1315

14-
private animation: Animation;
16+
private animation!: Animation;
1517

1618
constructor(private animationCtrl: AnimationController) {}
1719

1820
ngAfterViewInit() {
19-
const card = this.animationCtrl
20-
.create()
21-
.addElement(this.cardElements.get(0).nativeElement)
22-
.duration(2000)
23-
.beforeStyles({
24-
filter: 'invert(75%)',
25-
})
26-
.beforeClearStyles(['box-shadow'])
27-
.afterStyles({
28-
'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
29-
})
30-
.afterClearStyles(['filter'])
31-
.keyframes([
32-
{ offset: 0, transform: 'scale(1)' },
33-
{ offset: 0.5, transform: 'scale(1.5)' },
34-
{ offset: 1, transform: 'scale(1)' },
35-
]);
36-
37-
this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]);
21+
const cardEl = this.cardElements.get(0);
22+
23+
const card = cardEl
24+
? this.animationCtrl
25+
.create()
26+
.addElement(cardEl.nativeElement)
27+
.duration(2000)
28+
.beforeStyles({
29+
filter: 'invert(75%)',
30+
})
31+
.beforeClearStyles(['box-shadow'])
32+
.afterStyles({
33+
'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
34+
})
35+
.afterClearStyles(['filter'])
36+
.keyframes([
37+
{ offset: 0, transform: 'scale(1)' },
38+
{ offset: 0.5, transform: 'scale(1.5)' },
39+
{ offset: 1, transform: 'scale(1)' },
40+
])
41+
: null;
42+
43+
if (card) {
44+
this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]);
45+
}
3846
}
3947

4048
play() {

‎static/usage/v7/animations/chain/angular/example_component_ts.md

Lines changed: 58 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,85 @@
11
```ts
22
import { Component, ElementRef, ViewChildren } from '@angular/core';
3+
import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
34
import type { QueryList } from '@angular/core';
4-
import type { Animation } from '@ionic/angular';
5-
import { AnimationController, IonCard } from '@ionic/angular';
5+
import type { Animation } from '@ionic/angular/standalone';
66

77
@Component({
88
selector: 'app-example',
99
templateUrl: 'example.component.html',
10+
styleUrls: ['example.component.css'],
11+
imports: [IonButton, IonCard, IonCardContent],
1012
})
1113
export class ExampleComponent {
12-
@ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
14+
@ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList<ElementRef<HTMLIonCardElement>>;
1315

14-
private cardA: Animation;
15-
private cardB: Animation;
16-
private cardC: Animation;
16+
private cardA!: Animation | null;
17+
private cardB!: Animation | null;
18+
private cardC!: Animation | null;
1719

1820
constructor(private animationCtrl: AnimationController) {}
1921

2022
ngAfterViewInit() {
21-
this.cardA = this.animationCtrl
22-
.create()
23-
.addElement(this.cardElements.get(0).nativeElement)
24-
.fill('none')
25-
.duration(1000)
26-
.keyframes([
27-
{ offset: 0, transform: 'scale(1) rotate(0)' },
28-
{ offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
29-
{ offset: 1, transform: 'scale(1) rotate(0)' },
30-
]);
23+
const cardElA = this.cardElements.get(0);
24+
const cardElB = this.cardElements.get(1);
25+
const cardElC = this.cardElements.get(2);
3126

32-
this.cardB = this.animationCtrl
33-
.create()
34-
.addElement(this.cardElements.get(1).nativeElement)
35-
.fill('none')
36-
.duration(1000)
37-
.keyframes([
38-
{ offset: 0, transform: 'scale(1)', opacity: '1' },
39-
{ offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
40-
{ offset: 1, transform: 'scale(1)', opacity: '1' },
41-
]);
27+
this.cardA = cardElA
28+
? this.animationCtrl
29+
.create()
30+
.addElement(cardElA.nativeElement)
31+
.fill('none')
32+
.duration(1000)
33+
.keyframes([
34+
{ offset: 0, transform: 'scale(1) rotate(0)' },
35+
{ offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
36+
{ offset: 1, transform: 'scale(1) rotate(0)' },
37+
])
38+
: null;
4239

43-
this.cardC = this.animationCtrl
44-
.create()
45-
.addElement(this.cardElements.get(2).nativeElement)
46-
.fill('none')
47-
.duration(1000)
48-
.keyframes([
49-
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
50-
{ offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
51-
{ offset: 1, transform: 'scale(1)', opacity: '0.5' },
52-
]);
40+
this.cardB = cardElB
41+
? this.animationCtrl
42+
.create()
43+
.addElement(cardElB.nativeElement)
44+
.fill('none')
45+
.duration(1000)
46+
.keyframes([
47+
{ offset: 0, transform: 'scale(1)', opacity: '1' },
48+
{ offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
49+
{ offset: 1, transform: 'scale(1)', opacity: '1' },
50+
])
51+
: null;
52+
53+
this.cardC = cardElC
54+
? this.animationCtrl
55+
.create()
56+
.addElement(cardElC.nativeElement)
57+
.fill('none')
58+
.duration(1000)
59+
.keyframes([
60+
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
61+
{ offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
62+
{ offset: 1, transform: 'scale(1)', opacity: '0.5' },
63+
])
64+
: null;
5365
}
5466

5567
async play() {
56-
await this.cardA.play();
57-
await this.cardB.play();
58-
await this.cardC.play();
68+
await this.cardA?.play();
69+
await this.cardB?.play();
70+
await this.cardC?.play();
5971
}
6072

6173
pause() {
62-
this.cardA.pause();
63-
this.cardB.pause();
64-
this.cardC.pause();
74+
this.cardA?.pause();
75+
this.cardB?.pause();
76+
this.cardC?.pause();
6577
}
6678

67-
stop() {
68-
this.cardA.stop();
69-
this.cardB.stop();
70-
this.cardC.stop();
79+
async stop() {
80+
await this.cardA?.stop();
81+
await this.cardB?.stop();
82+
await this.cardC?.stop();
7183
}
7284
}
7385
```

‎static/usage/v7/animations/gesture/angular/example_component_ts.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
```ts
2-
import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
3-
import { AnimationController, GestureController, IonCard } from '@ionic/angular';
4-
import type { Animation, Gesture, GestureDetail } from '@ionic/angular';
2+
import { Component, ElementRef, ViewChild } from '@angular/core';
3+
import { AnimationController, GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone';
4+
import type { Animation, Gesture, GestureDetail } from '@ionic/angular/standalone';
55

66
@Component({
77
selector: 'app-example',
88
templateUrl: 'example.component.html',
99
styleUrls: ['example.component.css'],
10+
imports: [IonCard, IonCardContent],
1011
})
1112
export class ExampleComponent {
12-
@ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
13+
@ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
1314

14-
private animation: Animation;
15-
private gesture: Gesture;
15+
private animation!: Animation;
16+
private gesture!: Gesture;
1617
private started = false;
1718
private initialStep = 0;
1819

‎static/usage/v7/animations/group/angular/example_component_ts.md

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
11
```ts
22
import { Component, ElementRef, ViewChildren } from '@angular/core';
3+
import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
34
import type { QueryList } from '@angular/core';
4-
import type { Animation } from '@ionic/angular';
5-
import { AnimationController, IonCard } from '@ionic/angular';
5+
import type { Animation } from '@ionic/angular/standalone';
66

77
@Component({
88
selector: 'app-example',
99
templateUrl: 'example.component.html',
10+
styleUrls: ['example.component.css'],
11+
imports: [IonButton, IonCard, IonCardContent],
1012
})
1113
export class ExampleComponent {
12-
@ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
14+
@ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList<ElementRef<HTMLIonCardElement>>;
1315

14-
private animation: Animation;
16+
private animation!: Animation;
1517

1618
constructor(private animationCtrl: AnimationController) {}
1719

1820
ngAfterViewInit() {
1921
const cardA = this.animationCtrl
2022
.create()
21-
.addElement(this.cardElements.get(0).nativeElement)
23+
.addElement(this.cardElements.get(0)!.nativeElement)
2224
.keyframes([
2325
{ offset: 0, transform: 'scale(1) rotate(0)' },
2426
{ offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
25-
{ offset: 1, transform: 'scale(1) rotate(0) ' },
27+
{ offset: 1, transform: 'scale(1) rotate(0)' },
2628
]);
2729

2830
const cardB = this.animationCtrl
2931
.create()
30-
.addElement(this.cardElements.get(1).nativeElement)
32+
.addElement(this.cardElements.get(1)!.nativeElement)
3133
.keyframes([
3234
{ offset: 0, transform: 'scale(1)', opacity: '1' },
3335
{ offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
@@ -36,7 +38,7 @@ export class ExampleComponent {
3638

3739
const cardC = this.animationCtrl
3840
.create()
39-
.addElement(this.cardElements.get(2).nativeElement)
41+
.addElement(this.cardElements.get(2)!.nativeElement)
4042
.duration(5000)
4143
.keyframes([
4244
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
@@ -48,7 +50,7 @@ export class ExampleComponent {
4850
.create()
4951
.duration(2000)
5052
.iterations(Infinity)
51-
.addAnimation([cardA, cardB, cardC]);
53+
.addAnimation([cardA, cardB, cardC].filter(Boolean) as Animation[]);
5254
}
5355

5456
play() {

‎static/usage/v7/animations/keyframes/angular/example_component_ts.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
```ts
22
import { Component, ElementRef, ViewChild } from '@angular/core';
3-
import type { Animation } from '@ionic/angular';
4-
import { AnimationController, IonCard, IonCardContent } from '@ionic/angular';
3+
import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
4+
import type { Animation } from '@ionic/angular/standalone';
55

66
@Component({
77
selector: 'app-example',
88
templateUrl: 'example.component.html',
9+
styleUrls: ['example.component.css'],
10+
imports: [IonButton, IonCard, IonCardContent],
911
})
1012
export class ExampleComponent {
11-
@ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
13+
@ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
1214

13-
private animation: Animation;
15+
private animation!: Animation;
1416

1517
constructor(private animationCtrl: AnimationController) {}
1618

‎static/usage/v7/animations/modal-override/angular/example_component_ts.md

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,47 @@
11
```ts
22
import { Component, ViewChild } from '@angular/core';
3-
import type { IonModal } from '@ionic/angular';
4-
import { AnimationController } from '@ionic/angular';
3+
import {
4+
AnimationController,
5+
IonButton,
6+
IonButtons,
7+
IonContent,
8+
IonHeader,
9+
IonModal,
10+
IonTitle,
11+
IonToolbar,
12+
} from '@ionic/angular/standalone';
513

614
@Component({
715
selector: 'app-example',
816
templateUrl: 'example.component.html',
17+
styleUrls: ['example.component.css'],
18+
imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
919
})
1020
export class ExampleComponent {
11-
@ViewChild('modal', { static: true }) modal: IonModal;
21+
@ViewChild('modal', { static: true }) modal!: IonModal;
1222

1323
constructor(private animationCtrl: AnimationController) {}
1424

1525
ngOnInit() {
1626
const enterAnimation = (baseEl: HTMLElement) => {
1727
const root = baseEl.shadowRoot;
1828

29+
const backdropElement = root?.querySelector('ion-backdrop');
30+
const wrapperElement = root?.querySelector('.modal-wrapper');
31+
1932
const backdropAnimation = this.animationCtrl
2033
.create()
21-
.addElement(root.querySelector('ion-backdrop'))
34+
.addElement(backdropElement || baseEl)
2235
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
2336

24-
const wrapperAnimation = this.animationCtrl
25-
.create()
26-
.addElement(root.querySelector('.modal-wrapper'))
27-
.keyframes([
37+
const wrapperAnimation = this.animationCtrl.create();
38+
39+
if (wrapperElement) {
40+
wrapperAnimation.addElement(wrapperElement).keyframes([
2841
{ offset: 0, opacity: '0', transform: 'scale(0)' },
2942
{ offset: 1, opacity: '0.99', transform: 'scale(1)' },
3043
]);
44+
}
3145

3246
return this.animationCtrl
3347
.create()

0 commit comments

Comments
 (0)