Angular: hiding a component with *ngIf doesn't work

I'm just starting with Angular and have already faced an issue: a button actually toggles the variable I need (show) but it doesn't affect the course.component

course.component must show app-csgo-course, boolean show is true because the component is visible, but after it toggles in navbar.component, nothing changes.

<app-csgo-course *ngIf="show"> </app-csgo-course>

import { Component, OnInit} from '@angular/core';
import { CourseService } from 'src/app/course.service';


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

  constructor() { }

  ngOnInit(): void { }

  service = new CourseService;
  show = this.service.GetShow();
}

In navbar.component there's a button which toggles the "show" variable

      <button (click)="ToggleShow()" >
        <li class="nav-item active" id="csgo-logo">
          <a href="#">
            <img class="game-logo" src="assets\img\csgo-logo.png" title="Counter Strike: Global Offensive">
            <!-- <a>CS:GO <span class="sr-only">(current)</span></a> -->
          </a>
        </li>
      </button> 

import { CourseService } from 'src/app/cheat.service';
import { Component, OnInit, Input, Output, } from '@angular/core';

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

  service = new CourseService;
  show = this.service.GetShow();

  ngOnInit(): void {
    
  }

  public ToggleShow() {

    this.service.show = this.service.ToggleShow();
    console.log(this.service.show);
    return this.service.show;
  }
}

The course.service file

@Injectable({
  providedIn: 'root'
})
export class CourseService {

  show: boolean = true;

  GetShow() {
    return this.show;
  }

  ToggleShow() {
    return this.show = !this.show
  }

  constructor() { }
  }
}

Would appreciate your help!