p-dialog из primeng 9.1.2 в Angular 9.1.3 отображается непосредственно на моем компоненте вместо наложения

Question

Как объясняется в заголовке, при щелчке я могу отобразить то, что хочу, но не в виде оверлея windows, как ожидалось.

Вот мой html код:

<div class="col-sm-2">
  <img style="width: 75px;" (click)="showGenresExclus()" src="url">
</div>
<p-dialog [(visible)]="displayGenresExclus">
 <div *ngFor="let genre of genresExclus">
  <div class="col-sm-2">
    <label for="{{ genre }}">{{ genre }} : </label>
    <input type="checkbox" id="{{ genre }}" (change)="genreSelected()" class="form-control">
  </div>    
 </div>
</p-dialog>

мой код TypeScript:

public showGenresExclus(){
this.displayGenresExclus = true;
}

И в случае, если вам нужна версия всех моих зависимостей (потому что я был на Angular 10 с Primeng 8 и удалил все это утро, но все еще не работал):

"dependencies": {
"@angular-devkit/build-angular": "^0.900.7",
"@angular/animations": "^9.1.3",
"@angular/cdk": "^9.1.3",
"@angular/cli": "^9.1.3",
"@angular/common": "^9.1.3",
"@angular/compiler": "^9.1.3",
"@angular/compiler-cli": "^9.1.3",
"@angular/core": "^9.1.3",
"@angular/forms": "^9.1.3",
"@angular/material": "^9.1.3",
"@angular/platform-browser": "^9.1.3",
"@angular/platform-browser-dynamic": "^9.1.3",
"@angular/router": "^9.1.3",
"@ngtools/webpack": "^9.1.3",
"angularx-social-login": "^2.3.1",
"bootstrap": "^3.4.1",
"core-js": "^2.5.4",
"jquery": "^3.5.1",
"primeng": "^9.1.2",
"rxjs": "~6.6.0",
"tslib": "^1.9.0",
"typescript": "^3.6.5",
"zone.js": "~0.10.3"
},

Я пробовал почти все свойства, описанные в https://www.primefaces.org/primeng/showcase/# / dialog .

Я был на всех форумах, где некоторые вопросы были похожи на мои, но факт остается , отображение хорошее, только не в оверлее, и я этого хочу.