import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, ViewChild } from "@angular/core";

@Component({
 selector: "app-your-component",
 templateUrl: "./your-component.component.html",
 styleUrls: ["./your-component.component.css"]
})
export class YourComponent implements AfterViewInit {
 @ViewChild("referenceElement") referenceElement: ElementRef;

 constructor(private cdr: ChangeDetectorRef) {}

 ngAfterViewInit() {
 // You may need to add a delay if the referenceElement"s width is not available immediately
 setTimeout(() => {
 // Set the initial width on component initialization
 this.setDropdownWidth();
 });
 }

 getDropdownWidth(): number {
 // Calculate and return the width dynamically
 return this.referenceElement.nativeElement.offsetWidth;
 }

 setDropdownWidth(): void {
 // Update the dropdown width when needed
 // This method can be called whenever the dropdown should update its width
 this.cdr.detectChanges();
 }

 // ... other component logic
}