Changing iframe src without page reload in Angular 4

I want to play multiple videos on my page based on a button clicked by the user. I overcame all the hurdles of safe urls and updated the src on a button click, but when I change the source I see a page reload which I feel as a severe flaw, since on the reload page all data in my services will be lost.

Can anyone suggest how to do this without reloading the page?

Below is my code:

Template

<iframe width="600" height="400" [src]="VideoURL" frameborder="0"></iframe>
    <ul>
        <li *ngFor="let course of courses">
            <button (click)="changeVideo(course.url)">{{course.name}}</button>
        </li>
    </ul>

      

        
        
        
      

    

Component

export class CoursesComponent implements OnInit  {
  constructor(public router: Router,private sanitizer: DomSanitizer,private _coursesService: CoursesService) { }

  courses=this._coursesService.getCourses();
  ngOnInit() {
  }
    trustSrcUrl = function(data){
    return this.sanitizer.bypassSecurityTrustResourceUrl(data);
  }
  VideoURL=this.trustSrcUrl(this.courses[0].url);
  changeVideo=function(url){
      this.VideoURL=this.trustSrcUrl(url);
  }

      

        
        
        
      

    

Every example I see on the net, both in angular and plain javascript, has this page reload disadvantage.