title: Angular 6: Send click event in child to parent
body: <p><strong>EDIT:
  It still don't work and not throw any errors.
  I edited the code and added partial code from parent.component.ts</strong></p>
  
  <p>I have parent component of a side nav-bar and child component which is nested in parent component's body and contains iframe.
  I want that when there's a click event on the iframe, I'll return to the parent that event has occurred so I can mark this video as watched in the parent's sidebar with a 'V'.</p>
  
  <p><strong>parent component.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// ..... 
  
  export class CoursePlayComponent implements OnInit {
      course: ICourse;
      courseId: number;
  
      // current user
      public currentUser: IUser;
  
      // variables for current lesson
      public current: IVideo;
        
      constructor(private courseService: CourseService,
       private route: ActivatedRoute,
       private router: Router,
       private userService: UserService) {
           this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
        }
         
      ngOnInit() {
       // save this course id from course-detail and get http request from the service
       this.courseId = JSON.parse(localStorage.getItem("courseId"));
       this.getCourse(this.courseId);
      }
      
      // get course by id from service
      getCourse(id:number) {...}
      
      // get current lesson by unit and lesson position in course
      getCurrent(unit_position: number, lesson_position: number) { ... }
      
      // check if the lesson already watched
      isLessonIncluded(course_id: number, lesson_id: number) {
        return this.userService.isLessonIncluded(course_id, lesson_id);
      }
    
      // check the value from child lesson and add the new lesson to the completed lessons array
      watched(state) {
        console.log("parent-video watched: ", state);
        
        // update user data array
        this.userService.addToCompletedLessons(this.course.id, this.current.id);
      }   
   }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>parent.component.html:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-sidenav-container fullscreen *ngIf="course"&gt;
    &lt;mat-sidenav #sidenav mode="side" class="app-sidenav"&gt;
      &lt;mat-toolbar id="sidenav" color="primary"&gt;
        &lt;button mat-icon-button (click)="sidenav.toggle()" class="mat-icon-button sidenav-toggle-button" [hidden]="!sidenav.opened"&gt;
          &lt;mat-icon aria-label="Menu" class="material-icons"&gt;close&lt;/mat-icon&gt;
        &lt;/button&gt;
      &lt;/mat-toolbar&gt;
        &lt;mat-nav-list *ngFor="let unit of course.units"&gt;
          &lt;h6 class="course-list-title"&gt;Unit {{ unit?.position }}: {{ unit?.name }}&lt;/h6&gt;
          &lt;a mat-list-item *ngFor="let lesson of unit.videos" class="sidenav-link course-item" [routerLink]="['/courses' , course?.id , 'unit' , unit?.position , 'lesson' , lesson?.position]" (click)="sidenav.toggle()" (click)="getCurrent(unit?.position,lesson?.position)"&gt;
            &lt;span mat-line class="title"&gt;Lesson {{lesson?.id}}: {{lesson?.name}}&lt;/span&gt;
            &lt;span *ngIf="isLessonIncluded(course.id, lesson.id)" class="fas fa-check" style="color:lightgreen;"&gt;&lt;/span&gt;
          &lt;/a&gt;
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
  
  &lt;!-- ... --&gt;
  
      &lt;div class="course-body container-fluid text-center"&gt;
        &lt;course-lesson *ngIf="showLesson == true" (clicked)="watched($event)" [lessonId]="current?.id" [lessonName]="current?.name" [lessonData]="current?.data" [totalLesoons]="totalLesoons"&gt;&lt;/course-lesson&gt;
     
      &lt;/div&gt;
  &lt;/mat-sidenav-container&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>child.component.ts:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// ....
  
  export class CourseLessonComponent implements OnInit {
    @Input() lessonId: number;
    @Input() lessonName: string;
    @Input() lessonData: string;
    @Input() totalLesoons: number;
    
    @Output() clicked = new EventEmitter();
  
    clicked: boolean = false;
  
    constructor(private courseService: CourseService,
        private route: ActivatedRoute,
        private router: Router) { }
  
    ngOnInit() { }
    
      watchedVideo() {
      console.log("child- video watched");
        this.clicked.emit(true);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>child.component.html:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 class="lesson-title"&gt;{{lessonName}}&lt;/h1&gt;
    &lt;p class="small-text" *ngIf="totalLesoons &gt; 0"&gt;lesson {{lessonId}} of {{totalLesoons}}&lt;/p&gt;
    &lt;hr&gt;
    &lt;iframe (click)="clicked = true" frameborder="0" allowfullscreen="true" [src]='lessonData | safe'&gt;&lt;/iframe&gt;</code></pre>
  </div>
  </div>
  </p>