angular / angular/components

bug(OverlayContainer, MatDialog): MatDialog not rendering inside custom OverlayContainer in angular 15

Ouverte
#26,542 5 commentaires 7 réactions 0 personnes assignées Voir sur GitHub
area: cdk/overlay area: material/dialog P3 troubleshooting
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

In Angular 15, if a component is provided with OverlayContainer and overridden to use it as a custom container element, individual overlay elements are not rendering inside the container (), instead is appended to the document body(default behavior).

```@Injectable()
export class OverlayService extends OverlayContainer{
constructor(
@Inject(DOCUMENT) _document: any,
platform: Platform,
private problem: ElementRef
) {
super(_document, platform);
}

protected override _createContainer(): void {
const containerClass = "cdk-overlay-container";
const container = this._document.createElement("div");
container.classList.add(containerClass);

this.problem.nativeElement.appendChild(container);
this._containerElement = container;
}

}

@Component({
selector: 'app-problem',
templateUrl: './problem.component.html',
styleUrls: ['./problem.component.css'],
providers: [
DialogServiceService,
MatDialog,
{ provide: OverlayContainer, useClass: OverlayService },
]
})
```

Expected behavior:

```


....




```

I was expecting the MatDialog to render inside the custom container as in previous angular versions.

### What troubleshooting steps have you tried?

Current behavior(Angular 15):

```




```

### Reproduction

https://stackblitz.com/edit/angular-pfwikb?file=src%2Fapp%2Fproblem%2Fproblem.component.ts

### Environment

- Angular: 15
- CDK/Material: 15.1.2
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Mac

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz dans src/app/problem/problem.component.ts et inspectez l’implémentation de OverlayService._createContainer ainsi que le provider OverlayContainer au niveau du composant. Comparez le DOM rendu avec la structure custom-container attendue, puis vérifiez que MatDialog utilise ce conteneur avec Angular 15. C’est terminé lorsque la boîte de dialogue est ajoutée à l’intérieur du cdk-overlay-container personnalisé plutôt que directement sous body.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
28/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.