Problems on reloading component Angular

Question

I've got my courses page with Join/Unjoin button. All I want is that after clicking on Join button angular should reload page (component) (or just button if its possible) and I should see Unjoin button. For now I have trouble that I need manually reload page by F5 to see if button changed. What I tried to do is to call loadOnCourseInit() in subscribeCourse() function, but with no success. here is my component.ts file:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AuthService } from '../../services/auth.service'
import { UpdateService } from '../../services/update.service'
import { Router } from '@angular/router'
import { Subscription } from 'rxjs/Subscription';

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

  CourseId: String;
  course: any;
  user:any;
  subscriptions:any;
  flag:boolean;

  constructor(private route: ActivatedRoute, private authService: AuthService, private router: Router, private updateService:UpdateService) { }

  ngOnInit() {
    this.loadCourseOnInit();
    this.authService.getProfile().subscribe(profile=>{
      this.user = profile.user;
      this.subscriptions = profile.user.subscriptions;
      this.subscriptionCheck(this.subscriptions, this.CourseId);
    },
    err=>{
      console.log(err);
      return false;
    });  
  }

  onSubscribeClick(){
    this.updateService.subscribeOnCourse(this.CourseId, this.user).subscribe(data=>{
      console.log("subscribedata")
      console.log(data);      
      this.loadCourseOnInit();  
    })     
  }

  onUnsubscribeClick(){
    this.updateService.unsubscribeFromCourse(this.CourseId, this.user).subscribe(data=>{
      console.log(data);
      this.loadCourseOnInit();          
    })
  }

  subscriptionCheck(subscriptions, CourseId){
    this.flag = false
    console.log(this.subscriptions)
    if(subscriptions.length != null){
      for(let subscription of this.subscriptions){
        if(subscription == CourseId){
          console.log("true"); 
          this.flag = true; 
          return this.flag
        }
        else{
          console.log("false from subscription == CourseId");
          this.flag = false;    
        }
      }
    }else{
      console.log("false from subscriptions.length != null")
     this.flag = false;   
    }
  }

  loadCourseOnInit(){
    this.CourseId = this.route.snapshot.params['id']
    this.authService.getCoursesById(this.CourseId).subscribe(data=>{
      this.course =[data.course];
    },
    err=>{
      console.log(err);
      return false;
    });
  }
}

here are my buttons

    <a *ngIf="flag == true" (click)="onUnsubscribeClick()" >
      <button type="button" class="btn btn-danger btn-lg btn-block">Unjoin</button>
    </a>
    <a *ngIf="flag == false" (click)="onSubscribeClick()">
        <button type="button" class="btn btn-success btn-lg btn-block">Join</button>
    </a>

Does anyone have any ideas?

Answer 1

Is the button supposed to change its text based on the this.flag flag?

If so, then something like this:

  <button (click)='someMethod()' 
          [ngClass]="{'otherStyle': flag }">
              {{flag ? 'Join' : 'Unjoin'}}
  </button>