docs: Notes on why and when to use NgZone

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.
 
-<snippet id='bottom-navigation-events-ng'/>
+<snippet id='bottom-navigation-events-ng'/>
+
+> **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, (args: SelectedIndexChangedEventData) => {
+    // manually wrap in the NgZone when using the event via code-behind
+    this._zone.run(() => {
+        this.selectedIndex = args.newIndex;
+    });
+});
+```

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.
 
-<snippet id='tabs-events-ng'/>
+<snippet id='tabs-events-ng'/>
+
+> **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, (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 = args.newIndex;
+    });
+});