projects/web-mev/src/app/features/tutorial/tutorial.component.ts
Tutorial Component
Display youtube player with tutorials (the Tutorial page)
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | mev-tutorial |
| styleUrls | ./tutorial.component.scss |
| templateUrl | ./tutorial.component.html |
Methods |
constructor()
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
/**
* Tutorial Component
*
* Display youtube player with tutorials (the Tutorial page)
*/
@Component({
selector: 'mev-tutorial',
templateUrl: './tutorial.component.html',
styleUrls: ['./tutorial.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TutorialComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}
<div class="container" rtl>
<div class="row justify-content-center">
<div class="col-md-8 form-group">
<mat-card>
<mat-card-subtitle>Please see the
<a href="https://www.youtube.com/watch?list=PLSUXpXpbiLkJFbC3LOMgBacvNSdNpw0nv&v=VqGpdotr-A4"
target="_blank">
WebMev Tutorials
</a>
playlist for more tutorials
</mat-card-subtitle>
<mat-card-content>
<youtube-player
videoId="VqGpdotr-A4"
suggestedQuality="default"
[height]="250"
[width]="500">
</youtube-player>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="offset-md-2 col-md-8">
</div>
</div>
</div>
./tutorial.component.scss
a {
text-decoration: underline;
}
.mat-card-subtitle {
text-align: center;
}
.mat-card-content {
text-align: center;
}