Get element by classname from one component for use in another component using Angular

Question

I have a background image on a component however in another component when an item is clicked, I would like for the background image in the other component to shrink. The component is current not being picked up

Bg.html (The component with the background I'd like to shorten)

 <section ngClass="main-bg">
  </section>

box.component.ts (The component where I'd like to shorten the bg)

  export class BoxComponent implements OnInit {
     
    main: any;

  }

  ngOnInit(): void {
    this.main = (this.ElByClassName.nativeElement).querySelector('.main-bg');
  }




    ShortedBg()
    {
      if (this.main != null) {
          this.main.style.height = "31vh";
          console.log("section picked up");
        }
        else {
          console.log("section not picked up");
        }
    }