Looking to add some unique styling to just one of the many Mat dialog components in my project. It seems like modifying the parent element based on the child is trickier than expected, with attempts to access the DOM through the <mat-dialog-container> class proving unsuccessful.
Can applying styles by selecting class names in Angular be a solution? Relevant examples include:
How to apply styles to elements by selecting using class names in angular?
How can I select an element in a component template?
https://i.stack.imgur.com/CiASZ.png
TS:
export class UpUppdragsloggDialogComponent implements AfterViewInit {
constructor(public dialogRef: MatDialogRef<UpUppdragsloggDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: UppdragsloggDialogData,
private elementRef: ElementRef) {
}
ngAfterViewInit(): void {
const dom: HTMLElement = this.elementRef.nativeElement;
// Attempting to access it with dom.querySelector('mat-dialog-container') has also been made
const elements = dom.querySelectorAll('.mat-dialog-container');
console.log(elements);
elements.forEach((domElement) => {
domElement.classList.add('resize-container');
});
}
/**
Other not relevant stuff in the component
*/
}
CSS:
/* Making dialog components resizeable */
.resize-container {
resize: both;
overflow: auto;
z-index: 5;
}
Any suggestions on how to effectively access the DOM element for <mat-dialog-component> within Angular? (Utilizing Angular 10 platform)