Angular - Boostrap modal nie pokazuje się

Mam boostrap model jako oddzielny komponent żeby można było z różnych komponentów go włączać. Myślę że problem jest z <app-modal>. Po naciśnięciu guzika model się włącza ale jest sam pasek i nie pokazuje formularza . Brak errorow w konsoli. Kod jest tu :

Kod HTML modalu:

<ng-template #addJokeModal>
    <div class="modal-content my-custom-modal">
        <div class="modal-header">
            <h4 class="modal-title pull-left">Dodawanie żartu</h4>
            <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
                <span aria-hidden="true" class="visually-hidden">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="adding-joke" *ngIf="!isloading">
                <form method="POST" [formGroup]="addJokeForm" (ngSubmit)="addJoke()">
                    <div class="joke-category">
                        <select name="group" class="custom-select" formControlName="category">
                            <option value="" disabled selected hidden>Wybierz kategorię</option>
                            <option *ngFor="let category of categories">{{ category.name }}</option>
                        </select>
                    </div>
                    <div class="joke-content">
                        <input placeholder="Wprowadź treść" type="text" class="form-control" formControlName="content">
                    </div>
                    <div class="cancel-joke">
                        <button class="cancel-button" (click)="cancelJoke()">Anuluj</button>
                    </div>
                    <div class="add-joke">
                        <button class="add-button" id="add_joke_button">
                            Dodaj
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</ng-template>

i typescript:

import { Component, OnInit, TemplateRef, VERSION } from '@angular/core';
import { PagesService } from '../pages.service';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-add-joke-modal',
  templateUrl: './add-joke-modal.component.html',
  styleUrls: ['./add-joke-modal.component.css']
})
export class AddJokeModalComponent {

  public jokes: any = [];
  isLoading = true
  modalRef?: BsModalRef;
  public categories: any = [];
  public isloading = true;
  addJokeForm!: FormGroup;
  get addJokeF() { return this.addJokeForm.controls; }
  constructor(
    private PagesService: PagesService,
    private modalService: BsModalService,
    private formBuilder: FormBuilder,
    private router: Router,
  ) { }

  ngOnInit(): void {
    this.addJokeForm = this.formBuilder.group({
      category: ['', Validators.required],
      content: ['', Validators.required],
    });
    this.isloading = false;
    this.loadCategories();
  }

openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
  addJoke() {
    if (this.addJokeForm.invalid) {
      return;
    } else {
      const json_data = {
        category: this.addJokeF['category'].value,
        content: this.addJokeF['content'].value,
      }
      this.PagesService.AddJoke(json_data).subscribe(response => {
        {
          this.router.navigate(['../home']);
        }
      })
    }
  }
  loadCategories() {
    this.PagesService.LoadCategories().subscribe(response => {
      this.categories = response
      console.log(response)
    })
  }
  cancelJoke() {
    this.modalRef?.hide();
}

}

A tu jest drugi komponent w którym ten moduł powinien być wyświetlany:

<button class="add" (click)="openModal(addJokeModal)">Dodaj</button>

<ng-template #addJokeModal>
  <app-add-joke-modal></app-add-joke-modal>
</ng-template>

<div class="jokes">
  <div class="col-lg-6 col-sm-12 joke" *ngFor="let joke of jokes">
    <div class="category">
      {{joke.category}}
    </div>
    <div class="conent">
      {{joke.content}}
    </div>
    <button class="delete" (click)="deleteJoke(joke.id)">Usuń</button>
  </div>
</div>

i typescript:

import { Component } from '@angular/core';
import { PagesService } from '../pages.service';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { AddJokeModalComponent } from '../add-joke-modal/add-joke-modal.component';
import { Router } from '@angular/router';

@Component({
  selector: 'app-all-jokes',
  templateUrl: './all-jokes.component.html',
  styleUrls: ['./all-jokes.component.css']
})
export class AllJokesComponent {

  public jokes: any = [];
  modalRef?: BsModalRef;

  constructor(
    private PagesService: PagesService,
    private modalService: BsModalService,
    private router: Router,
  ) { }

  ngOnInit(): void {
    this.loadData();
  }

  loadData() {
    this.PagesService.LoadJokes().subscribe(response => {
      console.log(response)
      this.jokes = response;
    });
  }

  deleteJoke(jokeId: number) {
    this.PagesService.DeleteJoke(jokeId).subscribe(response => {
      // Po usunięciu żartu z bazy danych wykonaj odpowiednie działania (np. odświeżenie listy żartów)
      this.loadData();
    });
  }
  openModal(template: any) {
    this.modalRef = this.modalService.show(template);
  }
}

w module.ts mam w deklaracjach ten komponent.

Może ktoś mógłby pomóc.