IT관련/Angular

자식요소에서 부모요소의 height셋팅값 알아내는 방법

파란하늘999 2025. 6. 10. 13:47

css로는 한계가 있어서 로직으로 구현.

//constructor 에 추가.
    private elementRef: ElementRef,      
    
  @HostListener('window:resize', ['$event'])
  onResize(event: any) {
    setTimeout(()=>{
      this.getContainerHeight();
    }, 500)
  }

  getContainerHeight() {
    let parent = this.elementRef.nativeElement.parentElement;
    while (parent) {
      //값을 찾아내자 마자 값 셋팅후 리턴.      
      if (parent.style.height.includes('px')) {
        console.log('Container 높이 (부모 탐색):', parent, parent.style.height, parseInt(parent.style.height));
        //여기에 자신의 로직에 맞게 셋팅.
        
        break;
      }
      parent = parent.parentElement;
    }
  }
반응형