How to render custom URLs in Angular
import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'video-list',
templateUrl: './video-list.component.html',
styleUrls: ['./video-list.component.css']
})
export class VideoListComponent implements OnInit {
title = "Video list title"
videoList = [
{
name: 'Item 1',
slug: 'item-1',
embed: '2p89smQck44',
},
{
name: 'Item 2',
slug: 'item-2',
embed: '2p89smQck44',
},
{
name: 'Item 3',
slug: 'item-3',
embed: '2p89smQck44',
},
]
constructor(private sanitizer: DomSanitizer) { }
ngOnInit() {
}
getVideoURL(embed) {
return this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + embed);
}
}
<div *ngFor="let video of videoList">
<a href="videos/{{ video.slug }}">{{ video.name }}</a>
<iframe width="560" height="315" [src]="getVideoURL(video.embed)" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>