1

I have multiple Mat dialog components In my project and I want to add styling to just one of them. I'm thinking that the only way to modify parent depending on child is to add styling to the DOM element <mat-dialog-container> with the class .mat-dialog-container. But when I try to access the parent element by the class .mat-dialog-container I can not access it.

According to these examples, this should work?

How to apply styles to elements by selecting using class names in angular?

How can I select an element in a component template?

mat-dialog-container

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;
// I have also tried to access it with  dom.querySelector('mat-dialog-container'); instead 
            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:

   /* Make dialog components resizeable  */
    .resize-container {
      resize: both; 
      overflow: auto;
      z-index: 5;
    }

How to access the DOM element for <mat-dialog-component> in Angular? (I'm using Angular 10 if it makes any difference.)

Filip Huhta
  • 2,043
  • 7
  • 25
  • What I know when using Angular, you should avoid to use document.getElementsByClassName(), and use Angulars methods to access the dom element instead. – Filip Huhta Jun 22 '21 at 09:03

1 Answers1

2

If you know, by using JS/TS, which element is the one you want to style, then you might want to use element.closest(<selector>) function. It will give the access to the closest parent container with a specific class. Then you could an additional class to it.

sunpietro
  • 2,059
  • 4
  • 24
  • 42
  • Thank you! I know which element I want to style so this works in my case, but I would prefere if there is another way to do this without accessing just the closest parent element.. – Filip Huhta Jun 22 '21 at 08:18