title: How can I get the width and height of a component in angular?
body: <p>I've designed a loading component for the forms input elements in my angular forms to be displayed while the fields are loaded from the api. Here, I have to provide the height and the width of the component to the <code>app-loader</code> component so that it can occupy space accordingly.</p>
  <p>For now what I have done is manually use a switch-case and provide heights and widths within that. However, this is hard since I have many other input types to be developed and also it's even harder to make it responsive. My question is, is there a more efficient way to dynamically pass the height and the width of the component relevant to that particular switch case to the <code>app-loader</code> component?</p>
  <p>What I have so far is shown below.</p>
  <pre><code>&lt;ng-container
    *ngIf=&quot;!formInput.loaded&quot;
    [ngSwitch]=&quot;formInput.type&quot;&gt;
    &lt;div *ngSwitchCase=&quot;FORM_INPUT_TYPE.CHECKBOX&quot;&gt;
      &lt;app-loader width=&quot;409&quot; height=&quot;24&quot;&gt;&lt;/app-loader&gt;
    &lt;/div&gt;
    &lt;div *ngSwitchCase=&quot;FORM_INPUT_TYPE.IMAGE_DROP_AREA&quot;&gt;
      &lt;app-loader width=&quot;414.66&quot; height=&quot;96&quot;&gt;&lt;/app-loader&gt;
    &lt;/div&gt;
    &lt;div *ngSwitchCase=&quot;FORM_INPUT_TYPE.RATING&quot;&gt;
      &lt;app-loader width=&quot;409&quot; height=&quot;30&quot;&gt;&lt;/app-loader&gt;
    &lt;/div&gt;
    &lt;div *ngSwitchDefault&gt;
      &lt;app-loader width=&quot;645&quot; height=&quot;39.75&quot;&gt;&lt;/app-loader&gt;
    &lt;/div&gt;
  &lt;/ng-container&gt;
  </code></pre>