diff --git a/src/core/siteplugins/components/course-format/core-siteplugins-course-format.html b/src/core/siteplugins/components/course-format/core-siteplugins-course-format.html
index cd6008506..db841ebb6 100644
--- a/src/core/siteplugins/components/course-format/core-siteplugins-course-format.html
+++ b/src/core/siteplugins/components/course-format/core-siteplugins-course-format.html
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/core/siteplugins/components/course-format/course-format.ts b/src/core/siteplugins/components/course-format/course-format.ts
index 87b37a4f0..e1bf8de9e 100644
--- a/src/core/siteplugins/components/course-format/course-format.ts
+++ b/src/core/siteplugins/components/course-format/course-format.ts
@@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import { Component, OnInit, Input, ViewChild } from '@angular/core';
+import { Component, OnChanges, Input, ViewChild } from '@angular/core';
import { CoreSitePluginsProvider } from '../../providers/siteplugins';
import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-content';
@@ -23,10 +23,12 @@ import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-
selector: 'core-site-plugins-course-format',
templateUrl: 'core-siteplugins-course-format.html',
})
-export class CoreSitePluginsCourseFormatComponent implements OnInit {
+export class CoreSitePluginsCourseFormatComponent implements OnChanges {
@Input() course: any; // The course to render.
@Input() sections: any[]; // List of course sections.
@Input() downloadEnabled?: boolean; // Whether the download of sections and modules is enabled.
+ @Input() initialSectionId?: number; // The section to load first (by ID).
+ @Input() initialSectionNumber?: number; // The section to load first (by number).
@ViewChild(CoreSitePluginsPluginContentComponent) content: CoreSitePluginsPluginContentComponent;
@@ -34,24 +36,37 @@ export class CoreSitePluginsCourseFormatComponent implements OnInit {
method: string;
args: any;
initResult: any;
+ data: any;
constructor(protected sitePluginsProvider: CoreSitePluginsProvider) { }
/**
- * Component being initialized.
+ * Detect changes on input properties.
*/
- ngOnInit(): void {
+ ngOnChanges(): void {
if (this.course && this.course.format) {
- const handler = this.sitePluginsProvider.getSitePluginHandler(this.course.format);
- if (handler) {
- this.component = handler.plugin.component;
- this.method = handler.handlerSchema.method;
- this.args = {
- courseid: this.course.id,
- downloadenabled: this.downloadEnabled
- };
- this.initResult = handler.initResult;
+ if (!this.component) {
+ // Initialize the data.
+ const handler = this.sitePluginsProvider.getSitePluginHandler(this.course.format);
+ if (handler) {
+ this.component = handler.plugin.component;
+ this.method = handler.handlerSchema.method;
+ this.args = {
+ courseid: this.course.id,
+ downloadenabled: this.downloadEnabled
+ };
+ this.initResult = handler.initResult;
+ }
}
+
+ // Pass input data to the component.
+ this.data = {
+ course: this.course,
+ sections: this.sections,
+ downloadEnabled: this.downloadEnabled,
+ initialSectionId: this.initialSectionId,
+ initialSectionNumber: this.initialSectionNumber
+ };
}
}
diff --git a/src/core/siteplugins/components/plugin-content/plugin-content.ts b/src/core/siteplugins/components/plugin-content/plugin-content.ts
index 21b9f8c2f..60f8eca1e 100644
--- a/src/core/siteplugins/components/plugin-content/plugin-content.ts
+++ b/src/core/siteplugins/components/plugin-content/plugin-content.ts
@@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import { Component, OnInit, Input, Output, EventEmitter, Optional } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, Optional, DoCheck, KeyValueDiffers } from '@angular/core';
import { NavController } from 'ionic-angular';
import { CoreDomUtilsProvider } from '@providers/utils/dom';
import { CoreSitePluginsProvider } from '../../providers/siteplugins';
@@ -25,11 +25,12 @@ import { Subject } from 'rxjs';
selector: 'core-site-plugins-plugin-content',
templateUrl: 'core-siteplugins-plugin-content.html',
})
-export class CoreSitePluginsPluginContentComponent implements OnInit {
+export class CoreSitePluginsPluginContentComponent implements OnInit, DoCheck {
@Input() component: string;
@Input() method: string;
@Input() args: any;
@Input() initResult: any; // Result of the init WS call of the handler.
+ @Input() data: any; // Data to pass to the component.
@Output() onContentLoaded?: EventEmitter; // Emits an event when the content is loaded.
@Output() onLoadingContent?: EventEmitter; // Emits an event when starts to load the content.
@@ -40,11 +41,14 @@ export class CoreSitePluginsPluginContentComponent implements OnInit {
invalidateObservable: Subject; // An observable to notify observers when to invalidate data.
jsData: any; // Data to pass to the component.
+ protected differ: any; // To detect changes in the data input.
+
constructor(protected domUtils: CoreDomUtilsProvider, protected sitePluginsProvider: CoreSitePluginsProvider,
- @Optional() protected navCtrl: NavController) {
+ @Optional() protected navCtrl: NavController, differs: KeyValueDiffers) {
this.onContentLoaded = new EventEmitter();
this.onLoadingContent = new EventEmitter();
this.invalidateObservable = new Subject();
+ this.differ = differs.find([]).create();
}
/**
@@ -54,6 +58,21 @@ export class CoreSitePluginsPluginContentComponent implements OnInit {
this.fetchContent();
}
+ /**
+ * Detect and act upon changes that Angular can’t or won’t detect on its own (objects and arrays).
+ */
+ ngDoCheck(): void {
+ if (!this.data || !this.jsData) {
+ return;
+ }
+
+ // Check if there's any change in the data object.
+ const changes = this.differ.diff(this.data);
+ if (changes) {
+ this.jsData = Object.assign(this.jsData, this.data);
+ }
+ }
+
/**
* Fetches the content to render.
*
@@ -67,7 +86,9 @@ export class CoreSitePluginsPluginContentComponent implements OnInit {
this.content = result.templates.length ? result.templates[0].html : ''; // Load first template.
this.javascript = result.javascript;
this.otherData = result.otherdata;
- this.jsData = this.sitePluginsProvider.createDataForJS(this.initResult, result);
+ this.data = this.data || {};
+
+ this.jsData = Object.assign(this.data, this.sitePluginsProvider.createDataForJS(this.initResult, result));
// Pass some methods as jsData so they can be called from the template too.
this.jsData.openContent = this.openContent.bind(this);