You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/angular/config.md
+41-43Lines changed: 41 additions & 43 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ Ionic Config provides a way to change the properties of components globally acro
6
6
7
7
To override the initial Ionic config for the app, provide a config in `IonicModule.forRoot` in the `app.module.ts` file.
8
8
9
-
```typescript
9
+
```tsx
10
10
import { IonicModule } from'@ionic/angular';
11
11
12
12
@NgModule({
@@ -25,12 +25,11 @@ import { IonicModule } from '@ionic/angular';
25
25
26
26
In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design.
27
27
28
-
29
28
## Per-Component Config
30
29
31
30
Ionic Config is not reactive, so it is recommended to use a component's properties when you want to override its default behavior rather than set its config globally.
32
31
33
-
```typescript
32
+
```tsx
34
33
import { IonicModule } from'@ionic/angular';
35
34
36
35
@NgModule({
@@ -60,11 +59,10 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y
60
59
61
60
Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly.
62
61
63
-
In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
62
+
In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser.
64
63
The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](platform.md#platforms) for a list of possible values.
The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match:
|`ngOnInit`| Fired once during component initialization. This event can be used to initialize local members and make calls into services that only need to be done once. |
20
-
|`ngOnDestroy`| Fired right before Angular destroys the view. Useful for cleanup like unsubscribing from observables. |
|`ngOnInit`| Fired once during component initialization. This event can be used to initialize local members and make calls into services that only need to be done once. |
18
+
|`ngOnDestroy`| Fired right before Angular destroys the view. Useful for cleanup like unsubscribing from observables. |
21
19
22
20
For more info on the Angular Component Life Cycle events, visit their [component lifecycle docs](https://angular.io/guide/lifecycle-hooks).
23
21
@@ -29,28 +27,27 @@ Components that use `ion-nav` or `ion-router-outlet` should not use the `OnPush`
29
27
30
28
In addition to the Angular life cycle events, Ionic Angular provides a few additional events that you can use:
|`ionViewWillEnter`| Fired when the component routing to is about to animate into view. |
35
33
|`ionViewDidEnter`| Fired when the component routing to has finished animating. |
36
-
|`ionViewWillLeave`| Fired when the component routing from is about to animate. |
37
-
|`ionViewDidLeave`| Fired when the component routing to has finished animating. |
34
+
|`ionViewWillLeave`| Fired when the component routing from is about to animate. |
35
+
|`ionViewDidLeave`| Fired when the component routing to has finished animating. |
38
36
39
-
The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fire. The former fires right after `ngOnInit` but before the page transition begins, and the latter directly after the transition ends.
37
+
The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fire. The former fires right after `ngOnInit` but before the page transition begins, and the latter directly after the transition ends.
40
38
41
39
For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires).
42
40
43
-
44
41
45
42
46
43
## How Ionic Handles the Life of a Page
47
44
48
45
Ionic has its router outlet, called `<ion-router-outlet />`. This outlet extends Angular's `<router-outlet />` with some additional functionality to enable better experiences for mobile devices.
49
46
50
-
When an app is wrapped in `<ion-router-outlet />`, Ionic treats navigation a bit differently. When you navigate to a new page, Ionic will keep the old page in the existing DOM, but hide it from your view and transition the new page. The reason we do this is two-fold:
47
+
When an app is wrapped in `<ion-router-outlet />`, Ionic treats navigation a bit differently. When you navigate to a new page, Ionic will keep the old page in the existing DOM, but hide it from your view and transition the new page. The reason we do this is two-fold:
51
48
52
-
1) We can maintain the state of the old page (data on the screen, scroll position, etc..)
53
-
2) We can provide a smoother transition back to the page since it is already there and doesn't need to be recreated.
49
+
1. We can maintain the state of the old page (data on the screen, scroll position, etc..)
50
+
2. We can provide a smoother transition back to the page since it is already there and doesn't need to be recreated.
54
51
55
52
Pages are only removed from the DOM when they are "popped", for instance, by pressing the back button in the UI or the browsers back button.
56
53
@@ -62,11 +59,11 @@ Because of this special handling, the `ngOnInit` and `ngOnDestroy` methods might
62
59
63
60
In Ionic 3, there were a couple of additional life cycle methods that were useful to control when a page could be entered (`ionViewCanEnter`) and left (`ionViewCanLeave`). These could be used to protect pages from unauthorized users and to keep a user on a page when you don't want them to leave (like during a form fill).
64
61
65
-
These methods were removed in Ionic 4 in favor of using Angular's Route Guards.
62
+
These methods were removed in Ionic 4 in favor of using Angular's Route Guards.
66
63
67
64
A route guard helps determine if a particular action can be taken against a route. They are classes that implement a certain interface. The `CanActivate` and `CanDeactivate` interfaces can be used to implement the same type of logic that the removed events `ionViewCanEnter` and `ionViewCanLeave` did.
68
65
69
-
```typescript
66
+
```tsx
70
67
@Injectable()
71
68
exportclassAuthGuardimplementsCanActivate {
72
69
constructor(privateauthService:AuthService) {}
@@ -79,7 +76,7 @@ export class AuthGuard implements CanActivate {
79
76
80
77
To use this guard, add it to the appropriate param in the route definition:
@@ -91,14 +88,7 @@ Below are some tips on uses cases for each of the life cycle events.
91
88
92
89
-`ngOnInit` - Initialize your component and load data from services that don't need refreshing on each subsequent visit.
93
90
-`ionViewWillEnter` - Since `ionViewWillEnter` is called every time the view is navigated to (regardless if initialized or not), it's a good method to load data from services. However, if your data comes back during the animation, it can start lots of DOM manipulation, which can cause some janky animations.
94
-
-`ionViewDidEnter` - If you see performance problems from using `ionViewWillEnter`when loading data, you can do your data calls in `ionViewDidEnter` instead. This event won't fire until after the page is visible by the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn't flash in un-naturally after the transition is complete.
91
+
-`ionViewDidEnter` - If you see performance problems from using `ionViewWillEnter` when loading data, you can do your data calls in `ionViewDidEnter` instead. This event won't fire until after the page is visible by the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn't flash in un-naturally after the transition is complete.
95
92
-`ionViewWillLeave` - Can be used for cleanup, like unsubscribing from observables. Since `ngOnDestroy` might not fire when you navigate from the current page, put your cleanup code here if you don't want it active while the screen is not in view.
96
93
-`ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here.
97
94
-`ngOnDestroy` - Cleanup logic for your pages that you don't want to clean up in `ionViewWillLeave`.
0 commit comments