From 8967b0bfe097d2816a427c34d2a60893259c9f2d Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 12 Aug 2019 09:27:14 +0300 Subject: [PATCH 1/3] docs: note about NgZone --- .../bottom-navigation/events/article.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/app/ng-ui-widgets-category/bottom-navigation/events/article.md b/app/ng-ui-widgets-category/bottom-navigation/events/article.md index 9628d7a2..4cbceeca 100644 --- a/app/ng-ui-widgets-category/bottom-navigation/events/article.md +++ b/app/ng-ui-widgets-category/bottom-navigation/events/article.md @@ -2,4 +2,18 @@ - `oldIndex` - Provides the old selected index. - `newIndwex` - Provides the new selected index. - \ No newline at end of file + + +> **Note:** Any UI event declared throught the HTML markup will be automatically wrapped in the Angular zone. This is not the case when the events are declared thorugh the code behind (e.g., when using `on`) so in such cases we need to manually wrap any event that will be called from a native code: +```TypeScript +constructor(private _zone: NgZone) { } + +// .. more code follows here + +bottomNavigation.on(BottomNavigation.selectedIndexChangedEvent, (data: SelectedIndexChangedEventData) => { + // manually wrap in the NgZone when using the event via code-behind + this._zone.run(() => { + this.selectedIndex = newIndex; + }); +}); +``` \ No newline at end of file From 19eaa5579fd3c03f6e237573c0e9e32ee6a13f64 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 12 Aug 2019 09:30:14 +0300 Subject: [PATCH 2/3] docs NgZone in Tabs --- app/ng-ui-widgets-category/tabs/events/article.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/app/ng-ui-widgets-category/tabs/events/article.md b/app/ng-ui-widgets-category/tabs/events/article.md index 8e884228..fd6ca0dc 100644 --- a/app/ng-ui-widgets-category/tabs/events/article.md +++ b/app/ng-ui-widgets-category/tabs/events/article.md @@ -2,4 +2,17 @@ - `oldIndex` - Provides the old selected index. - `newIndwex` - Provides the new selected index. - \ No newline at end of file + + +> **Note:** Any UI event declared throught the HTML markup will be automatically wrapped in the Angular zone. This is not the case when the events are declared thorugh the code behind (e.g., when using `on`) so in such cases we need to manually wrap any event that will be called from a native code: +```TypeScript +constructor(private _zone: NgZone) { } + +// .. more code follows here + +tabs.on(Tabs.selectedIndexChangedEvent, (data: SelectedIndexChangedEventData) => { + // manually wrapping in the NgZone when using the event via code-behind (otherwise this.selectedIndex won't be updated in the UI) + this._zone.run(() => { + this.selectedIndex = newIndex; + }); +}); \ No newline at end of file From dbd19647571aff74368c6cb573efd6b34e16fe2b Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 12 Aug 2019 09:32:30 +0300 Subject: [PATCH 3/3] docs: minor snippet update --- .../bottom-navigation/events/article.md | 4 ++-- app/ng-ui-widgets-category/tabs/events/article.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/ng-ui-widgets-category/bottom-navigation/events/article.md b/app/ng-ui-widgets-category/bottom-navigation/events/article.md index 4cbceeca..c530ac26 100644 --- a/app/ng-ui-widgets-category/bottom-navigation/events/article.md +++ b/app/ng-ui-widgets-category/bottom-navigation/events/article.md @@ -10,10 +10,10 @@ constructor(private _zone: NgZone) { } // .. more code follows here -bottomNavigation.on(BottomNavigation.selectedIndexChangedEvent, (data: SelectedIndexChangedEventData) => { +bottomNavigation.on(BottomNavigation.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => { // manually wrap in the NgZone when using the event via code-behind this._zone.run(() => { - this.selectedIndex = newIndex; + this.selectedIndex = args.newIndex; }); }); ``` \ No newline at end of file diff --git a/app/ng-ui-widgets-category/tabs/events/article.md b/app/ng-ui-widgets-category/tabs/events/article.md index fd6ca0dc..d163f466 100644 --- a/app/ng-ui-widgets-category/tabs/events/article.md +++ b/app/ng-ui-widgets-category/tabs/events/article.md @@ -10,9 +10,9 @@ constructor(private _zone: NgZone) { } // .. more code follows here -tabs.on(Tabs.selectedIndexChangedEvent, (data: SelectedIndexChangedEventData) => { +tabs.on(Tabs.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => { // manually wrapping in the NgZone when using the event via code-behind (otherwise this.selectedIndex won't be updated in the UI) this._zone.run(() => { - this.selectedIndex = newIndex; + this.selectedIndex = args.newIndex; }); }); \ No newline at end of file