In my project, I have a parent component called program-page.component where I am invoking a function to fetch some data.
ngOnInit() {
this.getProgress();
}
getFirstProgramItem() {
this._contentfulService.getProgramItem(4, 1)
.then((programItem) => {
this.programItem = programItem;
}).then(() => {
console.log(this.programItem);
});
}
getProgress() {
this._trackingService.getLastItemProgress()
.subscribe((result) => {
this.progress = result;
if (this.progress.sysID == null || undefined) {
this.getFirstProgramItem();
}
});
}
Then, in my program-page.component.html
<app-program-header></app-program-header>
<app-week-display></app-week-display>
<app-program-item [item]="programItem"></app-program-item>
I am passing the programItem data, and in my program-item.component.ts file, I am retrieving and populating the data.
import { Component, OnInit, AfterViewInit, OnDestroy, Input } from '@angular/core';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { Entry } from 'contentful';
import { ContentfulService } from '../../../contentful.service';
declare var Player: any;
declare var Vimeo: any;
@Component({
selector: 'app-program-item',
templateUrl: './program-item.component.html',
styleUrls: ['./program-item.component.scss']
})
export class ProgramItemComponent implements OnInit {
@Input() item: Entry<any>;
constructor(
private contentfulService: ContentfulService
) { }
ngOnInit() {}
loadVideo() {
const video = new Vimeo.Player('video');
}
program-item.component.html
<div class="program-item">
<div class="main">
<p *ngIf="item?.fields.asset[0].fields.textBlock" class="program-item_textblock">{{item?.fields.asset[0].fields.textBlock}}</p>
<div id="video-panel">
<div *ngIf="item?.fields.asset[0].fields.vimeoId" [attr.data-vimeo-id]="item?.fields.asset[0].fields.vimeoId" data-vimeo-responsive="1" id="video"></div>
</div>
</div>
</div>
What I am aiming for is to trigger the loadVideo() function after the data has been loaded.
I attempted using ngAfterContentInit, but it did not yield the desired results.
Any assistance on this matter would be greatly appreciated.
Thank you