import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ActivatedRoute, Router, Routes, NavigationEnd } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';

import { CourseService } from '../../course.service';

@Component({
  selector: 'course-lesson',
  templateUrl: './course-lesson.component.html',
  styleUrls: ['./course-lesson.component.sass']
})
export class CourseLessonComponent implements OnInit {

  @Input() lessonId: number;
  @Input() lessonName: string;
  @Input() lessonData: string;
  @Input() totalLesoons: number;
  @Output() paused = new EventEmitter<string>();

  pauseClick(){
    this.paused.emit(true);
  }

  constructor(private courseService: CourseService,
      private route: ActivatedRoute,
      private router: Router) { }

  ngOnInit() { }

}

<iframe (click)="pauseClick()" frameborder="0" allowfullscreen="true" [src]='lessonData | safe'></iframe>

<course-lesson (paused)="onPausedClick($event)" *ngIf="showLesson == true" [lessonId]="current?.id" [lessonName]="current?.name" [lessonData]="current?.data" [totalLesoons]="totalLesoons"></course-lesson>

onPausedClick(state){
   console.log("Paused is clicked ", state);
}