Skip to content

Commit 68a54bf

Browse files
brandyscarneybrandyscarney
committed
docs(animations): fix type errors
1 parent 8cbd205 commit 68a54bf

File tree

16 files changed

+234
-200
lines changed

16 files changed

+234
-200
lines changed

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

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

87
@Component({
98
selector: 'app-example',
109
templateUrl: 'example.component.html',
1110
imports: [IonButton, IonCard, IonCardContent],
1211
})
1312
export class ExampleComponent {
14-
@ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
13+
@ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
1514

16-
private animation: Animation;
15+
private animation!: Animation;
1716

1817
constructor(private animationCtrl: AnimationController) {}
1918

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

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,46 @@ import { Component, ElementRef, ViewChildren } from '@angular/core';
33
import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
44
import type { QueryList } from '@angular/core';
55
import type { Animation } from '@ionic/angular';
6-
import { AnimationController, IonCard } from '@ionic/angular';
6+
import { AnimationController } from '@ionic/angular';
77

88
@Component({
99
selector: 'app-example',
1010
templateUrl: 'example.component.html',
1111
imports: [IonButton, IonCard, IonCardContent],
1212
})
1313
export class ExampleComponent {
14-
@ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
14+
@ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList<ElementRef<HTMLIonCardElement>>;
1515

16-
private animation: Animation;
16+
private animation!: Animation;
1717

1818
constructor(private animationCtrl: AnimationController) {}
1919

2020
ngAfterViewInit() {
21-
const card = this.animationCtrl
22-
.create()
23-
.addElement(this.cardElements.get(0).nativeElement)
24-
.duration(2000)
25-
.beforeStyles({
26-
filter: 'invert(75%)',
27-
})
28-
.beforeClearStyles(['box-shadow'])
29-
.afterStyles({
30-
'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
31-
})
32-
.afterClearStyles(['filter'])
33-
.keyframes([
34-
{ offset: 0, transform: 'scale(1)' },
35-
{ offset: 0.5, transform: 'scale(1.5)' },
36-
{ offset: 1, transform: 'scale(1)' },
37-
]);
38-
39-
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+
}
4046
}
4147

4248
play() {

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

Lines changed: 55 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,73 +3,83 @@ import { Component, ElementRef, ViewChildren } from '@angular/core';
33
import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
44
import type { QueryList } from '@angular/core';
55
import type { Animation } from '@ionic/angular';
6-
import { AnimationController, IonCard } from '@ionic/angular';
6+
import { AnimationController } from '@ionic/angular';
77

88
@Component({
99
selector: 'app-example',
1010
templateUrl: 'example.component.html',
1111
imports: [IonButton, IonCard, IonCardContent],
1212
})
1313
export class ExampleComponent {
14-
@ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
14+
@ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList<ElementRef<HTMLIonCardElement>>;
1515

16-
private cardA: Animation;
17-
private cardB: Animation;
18-
private cardC: Animation;
16+
private cardA!: Animation | null;
17+
private cardB!: Animation | null;
18+
private cardC!: Animation | null;
1919

2020
constructor(private animationCtrl: AnimationController) {}
2121

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

34-
this.cardB = this.animationCtrl
35-
.create()
36-
.addElement(this.cardElements.get(1).nativeElement)
37-
.fill('none')
38-
.duration(1000)
39-
.keyframes([
40-
{ offset: 0, transform: 'scale(1)', opacity: '1' },
41-
{ offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
42-
{ offset: 1, transform: 'scale(1)', opacity: '1' },
43-
]);
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;
4439

45-
this.cardC = this.animationCtrl
46-
.create()
47-
.addElement(this.cardElements.get(2).nativeElement)
48-
.fill('none')
49-
.duration(1000)
50-
.keyframes([
51-
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
52-
{ offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
53-
{ offset: 1, transform: 'scale(1)', opacity: '0.5' },
54-
]);
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;
5565
}
5666

5767
async play() {
58-
await this.cardA.play();
59-
await this.cardB.play();
60-
await this.cardC.play();
68+
await this.cardA?.play();
69+
await this.cardB?.play();
70+
await this.cardC?.play();
6171
}
6272

6373
pause() {
64-
this.cardA.pause();
65-
this.cardB.pause();
66-
this.cardC.pause();
74+
this.cardA?.pause();
75+
this.cardB?.pause();
76+
this.cardC?.pause();
6777
}
6878

69-
stop() {
70-
this.cardA.stop();
71-
this.cardB.stop();
72-
this.cardC.stop();
79+
async stop() {
80+
await this.cardA?.stop();
81+
await this.cardB?.stop();
82+
await this.cardC?.stop();
7383
}
7484
}
7585
```

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

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

77
@Component({
@@ -11,10 +11,10 @@ import type { Animation, Gesture, GestureDetail } from '@ionic/angular';
1111
imports: [IonCard, IonCardContent],
1212
})
1313
export class ExampleComponent {
14-
@ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
14+
@ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
1515

16-
private animation: Animation;
17-
private gesture: Gesture;
16+
private animation!: Animation;
17+
private gesture!: Gesture;
1818
private started = false;
1919
private initialStep = 0;
2020

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,33 @@ import { Component, ElementRef, ViewChildren } from '@angular/core';
33
import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
44
import type { QueryList } from '@angular/core';
55
import type { Animation } from '@ionic/angular';
6-
import { AnimationController, IonCard } from '@ionic/angular';
6+
import { AnimationController } from '@ionic/angular';
77

88
@Component({
99
selector: 'app-example',
1010
templateUrl: 'example.component.html',
1111
imports: [IonButton, IonCard, IonCardContent],
1212
})
1313
export class ExampleComponent {
14-
@ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList<ElementRef<HTMLIonCardElement>>;
14+
@ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList<ElementRef<HTMLIonCardElement>>;
1515

16-
private animation: Animation;
16+
private animation!: Animation;
1717

1818
constructor(private animationCtrl: AnimationController) {}
1919

2020
ngAfterViewInit() {
2121
const cardA = this.animationCtrl
2222
.create()
23-
.addElement(this.cardElements.get(0).nativeElement)
23+
.addElement(this.cardElements.get(0)!.nativeElement)
2424
.keyframes([
2525
{ offset: 0, transform: 'scale(1) rotate(0)' },
2626
{ offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
27-
{ offset: 1, transform: 'scale(1) rotate(0) ' },
27+
{ offset: 1, transform: 'scale(1) rotate(0)' },
2828
]);
2929

3030
const cardB = this.animationCtrl
3131
.create()
32-
.addElement(this.cardElements.get(1).nativeElement)
32+
.addElement(this.cardElements.get(1)!.nativeElement)
3333
.keyframes([
3434
{ offset: 0, transform: 'scale(1)', opacity: '1' },
3535
{ offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
@@ -38,7 +38,7 @@ export class ExampleComponent {
3838

3939
const cardC = this.animationCtrl
4040
.create()
41-
.addElement(this.cardElements.get(2).nativeElement)
41+
.addElement(this.cardElements.get(2)!.nativeElement)
4242
.duration(5000)
4343
.keyframes([
4444
{ offset: 0, transform: 'scale(1)', opacity: '0.5' },
@@ -50,7 +50,7 @@ export class ExampleComponent {
5050
.create()
5151
.duration(2000)
5252
.iterations(Infinity)
53-
.addAnimation([cardA, cardB, cardC]);
53+
.addAnimation([cardA, cardB, cardC].filter(Boolean) as Animation[]);
5454
}
5555

5656
play() {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
import { Component, ElementRef, ViewChild } from '@angular/core';
33
import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone';
44
import type { Animation } from '@ionic/angular';
5-
import { AnimationController, IonCard, IonCardContent } from '@ionic/angular';
5+
import { AnimationController } from '@ionic/angular';
66

77
@Component({
88
selector: 'app-example',
99
templateUrl: 'example.component.html',
1010
imports: [IonButton, IonCard, IonCardContent],
1111
})
1212
export class ExampleComponent {
13-
@ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
13+
@ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
1414

15-
private animation: Animation;
15+
private animation!: Animation;
1616

1717
constructor(private animationCtrl: AnimationController) {}
1818

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
IonTitle,
1010
IonToolbar,
1111
} from '@ionic/angular/standalone';
12-
import type { IonModal } from '@ionic/angular';
1312
import { AnimationController } from '@ionic/angular';
1413

1514
@Component({
@@ -18,26 +17,30 @@ import { AnimationController } from '@ionic/angular';
1817
imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar],
1918
})
2019
export class ExampleComponent {
21-
@ViewChild('modal', { static: true }) modal: IonModal;
20+
@ViewChild('modal', { static: true }) modal!: IonModal;
2221

2322
constructor(private animationCtrl: AnimationController) {}
2423

2524
ngOnInit() {
2625
const enterAnimation = (baseEl: HTMLElement) => {
2726
const root = baseEl.shadowRoot;
2827

28+
const backdropElement = root?.querySelector('ion-backdrop');
29+
const wrapperElement = root?.querySelector('.modal-wrapper');
30+
2931
const backdropAnimation = this.animationCtrl
3032
.create()
31-
.addElement(root.querySelector('ion-backdrop'))
33+
.addElement(backdropElement || baseEl)
3234
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
3335

34-
const wrapperAnimation = this.animationCtrl
35-
.create()
36-
.addElement(root.querySelector('.modal-wrapper'))
37-
.keyframes([
36+
const wrapperAnimation = this.animationCtrl.create();
37+
38+
if (wrapperElement) {
39+
wrapperAnimation.addElement(wrapperElement).keyframes([
3840
{ offset: 0, opacity: '0', transform: 'scale(0)' },
3941
{ offset: 1, opacity: '0.99', transform: 'scale(1)' },
4042
]);
43+
}
4144

4245
return this.animationCtrl
4346
.create()

‎static/usage/v7/animations/preference-based/angular/example_component_ts.md‎

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

87
@Component({
98
selector: 'app-example',
@@ -12,9 +11,9 @@ import { AnimationController, IonCard } from '@ionic/angular';
1211
imports: [IonButton, IonCard, IonCardContent],
1312
})
1413
export class ExampleComponent {
15-
@ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
14+
@ViewChild(IonCard, { read: ElementRef }) card!: ElementRef<HTMLIonCardElement>;
1615

17-
private animation: Animation;
16+
private animation!: Animation;
1817

1918
constructor(private animationCtrl: AnimationController) {}
2019

0 commit comments

Comments
 (0)