diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts
index c881ad67c..60a74be91 100644
--- a/src/components/loading/loading.ts
+++ b/src/components/loading/loading.ts
@@ -26,6 +26,14 @@ import { TranslateService } from '@ngx-translate/core';
*
*
*
+ *
+ * IMPORTANT: Due to how ng-content works in Angular, the content of core-loading will be executed as soon as your view
+ * is loaded, even if the content hidden. So if you have the following code:
+ *
+ *
+ * The component "my-component" will be initialized immediately, even if dataLoaded is false, but it will be hidden. If you want
+ * your component to be initialized only if dataLoaded is true, then you should use ngIf:
+ *
*/
@Component({
selector: 'core-loading',
diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts
index 16a9a297e..f1aaaa36a 100644
--- a/src/components/tabs/tab.ts
+++ b/src/components/tabs/tab.ts
@@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter } from '@angular/core';
+import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter, ContentChild, TemplateRef } from '@angular/core';
import { CoreTabsComponent } from './tabs';
/**
@@ -20,17 +20,23 @@ import { CoreTabsComponent } from './tabs';
*
* You must provide either a title or an icon for the tab.
*
+ * The tab content MUST be surrounded by ng-template. This component uses ngTemplateOutlet instead of ng-content because the
+ * latter executes all the code immediately. This means that all the tabs would be initialized as soon as your view is
+ * loaded, leading to performance issues.
+ *
* Example usage:
*
*
*
- *
+ *
+ *
+ *
*
*
*/
@Component({
selector: 'core-tab',
- template: ''
+ template: ''
})
export class CoreTabComponent implements OnInit, OnDestroy {
@Input() title?: string; // The tab title.
@@ -42,7 +48,10 @@ export class CoreTabComponent implements OnInit, OnDestroy {
@Input() id?: string; // An ID to identify the tab.
@Output() ionSelect: EventEmitter = new EventEmitter();
+ @ContentChild(TemplateRef) template: TemplateRef // Template defined by the content.
+
element: HTMLElement; // The core-tab element.
+ loaded = false;
constructor(private tabs: CoreTabsComponent, element: ElementRef) {
this.element = element.nativeElement;
@@ -61,4 +70,20 @@ export class CoreTabComponent implements OnInit, OnDestroy {
ngOnDestroy() {
this.tabs.removeTab(this);
}
+
+ /**
+ * Select tab.
+ */
+ selectTab() {
+ this.element.classList.add('selected');
+ this.loaded = true;
+ this.ionSelect.emit(this);
+ }
+
+ /**
+ * Unselect tab.
+ */
+ unselectTab() {
+ this.element.classList.remove('selected');
+ }
}
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index 54c23b204..3edfe1706 100644
--- a/src/components/tabs/tabs.ts
+++ b/src/components/tabs/tabs.ts
@@ -26,7 +26,9 @@ import { CoreTabComponent } from './tab';
*
*
*
- *
+ *
+ *
+ *
*
*
*
@@ -171,7 +173,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
index = 0;
}
- const currenTab = this.getSelected(),
+ const currentTab = this.getSelected(),
newTab = this.tabs[index];
if (!newTab.enabled || !newTab.show) {
@@ -179,14 +181,13 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
return;
}
- if (currenTab) {
+ if (currentTab) {
// Unselect previous selected tab.
- currenTab.element.classList.remove('selected');
+ currentTab.unselectTab();
}
this.selected = index;
- newTab.element.classList.add('selected');
- newTab.ionSelect.emit(newTab);
+ newTab.selectTab();
this.ionChange.emit(newTab);
}
diff --git a/src/core/courses/pages/my-overview/my-overview.html b/src/core/courses/pages/my-overview/my-overview.html
index b2667fcba..8cdaddcbf 100644
--- a/src/core/courses/pages/my-overview/my-overview.html
+++ b/src/core/courses/pages/my-overview/my-overview.html
@@ -16,88 +16,93 @@
-
+
+
+
-
-
-
-
+
+
+
+
+
-