Implementing an episode's more button with a download option

src/app/episodes-list/episodes-list.component.html

@@ -1,6 +1,8 @@
 <div class="root">
 	<div class="episodes" #scrollView (scroll)="onScroll()">
-		<a class="episode" *ngFor="let episode of this.episodes" #episodeDom routerLink="/watch/{{episode.link}}" href="/watch/{{episode.link}}">
+		<div class="episode" *ngFor="let episode of this.episodes" #episodeDom >
+			<button mat-icon-button class="moreBtn" [matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"><i class="material-icons">more_vert</i></button>
+			<a routerLink="/watch/{{episode.link}}" href="/watch/{{episode.link}}">
 				<div matRipple class="img" [style.background-image]="sanitize(episode.thumb)">
 					<button mat-icon-button class="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button>
 				</div>
@@ -16,6 +18,14 @@
 				</ng-template>
 			</a>
 		</div>
+	</div>
+	
+	<mat-menu #more="matMenu">
+		<ng-template matMenuContent let-episode="episode">
+			<a [href]="'/video/' + episode.link" download><button mat-menu-item>Download episode</button></a>
+		</ng-template>
+	</mat-menu>
+	
 	<button mat-raised-button color="accent" class="scrollBtn leftBtn d-none" #leftBtn (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
 	<button mat-raised-button color="accent" class="scrollBtn rightBtn" #rightBtn (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
 </div>

src/app/episodes-list/episodes-list.component.scss

@@ -52,9 +52,8 @@
 	padding: .25rem;
 	flex-shrink: 0;
 	width: 55%;
-	cursor: pointer;
+	outline: none;
-	color: inherit;
+	position: relative;
-	text-decoration: inherit;
 
 	@include media-breakpoint-up(sm)
 	{
@@ -76,8 +75,26 @@
 		width: 18%;
 	}
 
-	.img
+
+	> .moreBtn
 	{
+		position: absolute;
+		top: 2%;
+		right: 2%;
+		width: 36px;
+		height: 36px;
+		outline: none;
+		display: none;
+		z-index: 255
+	}
+	
+	> a {
+		cursor: pointer;
+		color: inherit;
+		text-decoration: inherit;
+		outline: none;
+
+		.img {
 			width: 100%;
 			height: 0;
 			padding-top: 56.25%;
@@ -85,8 +102,7 @@
 			background-size: contain;
 			position: relative;
 
-		> button
+			> .playBtn {
-		{
 				position: absolute;
 				top: 0;
 				bottom: 0;
@@ -100,8 +116,7 @@
 			}
 		}
 
-	.title
+		.title {
-	{
 			padding-top: .2rem;
 			font-weight: 600;
 			margin-bottom: 0;
@@ -111,8 +126,7 @@
 			overflow: hidden;
 		}
 
-	.overview
+		.overview {
-	{
 			font-weight: 300;
 			display: -webkit-box;
 			-webkit-line-clamp: 4;
@@ -120,16 +134,23 @@
 			overflow: hidden;
 		}
 
-	.subtitle
+		.subtitle {
-	{
 			font-weight: 300;
 			display: -webkit-box;
 			-webkit-line-clamp: 1;
 			-webkit-box-orient: vertical;
 			overflow: hidden;
 		}
+	}
 
 	&:host-context(.hoverEnabled) &:hover
+	{
+		.moreBtn
+		{
+			display: block;
+		}
+		
+		> a 
 		{
 			.img 
 			{
@@ -146,6 +167,7 @@
 				text-decoration: underline;
 			}
 		}
+	}
 }
 
 .playIcon