MatDialog viewContainerRef invalid

[alvin0216]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

version 14.2.7
code here:

import { Component, Inject, ViewChild, ViewContainerRef, } from '@angular/core';
import { Dialog, DIALOG_DATA } from '@angular/cdk/dialog';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
export interface DialogData {
  animal: 'panda' | 'unicorn' | 'lion';
}

@Component({
  selector: 'cdk-dialog-data-example-dialog',
  templateUrl: 'cdk-dialog-data-example-dialog.html',
  styleUrls: ['./cdk-dialog-data-example-dialog.css'],
})
export class CdkDialogDataExampleDialog {
  constructor(@Inject(DIALOG_DATA) public data: DialogData) {}
}

/**
 * @title Injecting data when opening a dialog
 */
@Component({
  selector: 'cdk-dialog-data-example',
  templateUrl: 'cdk-dialog-data-example.html',
})
export class CdkDialogDataExample {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(public dialog: MatDialog, private viewContainerRef: ViewContainerRef) {}

  openDialog() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.viewContainerRef = this.container;
    const dialogRef = this.dialog.open(CdkDialogDataExampleDialog, dialogConfig);
  }
}

cdk-dialog-data-example.html

<button (click)="openDialog()">Open dialog</button>
<div #container>xxx</div>

Reproduction

Steps to reproduce:
1.
2.

Expected Behavior

I want the dialog to mount to the specified dom instead of overlay.

Actual Behavior

MatDialog viewContainerRef invalid

Environment

• Angular: ~14.0.0
• CDK/Material: 14.2.7
• Browser(s): chrome
• Operating System (e.g. Windows, macOS, Ubuntu): window11

[alvin0216]

I don't know how to solve this problem, the api in the documentation is invalid

[alvin0216]

I want to override dialog.open method, there is a DOM hanging on overlay, I called TopDom，

Every time the dialog.open method is called, I want the component to be inserted before the TopDom, what should I do?

I want the default behavior to be: TOPDOM always last-child

I hope I can pass in different parameters through the open method to control the behavior of appChild and insertBefore

what should I do？

[crisbeto]

The overlay container is used to ensure that the dialog stacks relative to other overlays and that it isn't clipped by overlay: hidden. As such we don't support setting the rendering location in the DOM. The ViewContainerRef only determines where the dialog is rendered in the DI tree.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}