title: How to apply CSS styles to dynamically created DOM objects in Angular
body: <p>Please could I ask for help with the following?</p>
  <p>I am working in Visual Studio Code. I have an Angular project.</p>
  <p>My app.component.html is trivial and is as follows:</p>
  <pre><code>&lt;button #CreateButton style=&quot;position:absolute;width:120px;height:20px&quot; (click)=&quot;OnCreateButtonClicked($event.target)&quot;&gt;Create Button1&lt;/button&gt;
  </code></pre>
  <p>My app.component.css file is trivial also, and is as follows:</p>
  <pre><code>button { color: yellow; background-color: #b87dee; }
  </code></pre>
  <p>Am using Renderer2 in my app.compoenent.ts:</p>
  <pre><code>constructor (private renderer: Renderer2)
  </code></pre>
  <p>When I run the app I see my styled button:</p>
  <p><a href="https://i.stack.imgur.com/mEhPi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mEhPi.jpg" alt="enter image description here" /></a></p>
  <p>Now, if I use that OnCreateButtonClicked event to dynamically create a button like so:</p>
  <pre><code>CreateButton(szNullabelID = null, nLeft = 0, nTop = 0, nWidth = 120, nHeight = 20) 
  {
      let szID = (szNullabelID == null) ? 'Button' + (this.m_buttons.length + 1) : szNullabelID;
  
      const newButton = this.renderer.createElement('input');
      
      this.renderer.setProperty(newButton, 'type', 'button');
      this.renderer.setProperty(newButton, 'id', szID);
      this.renderer.setProperty(newButton, 'value', szID);
      
      this.renderer.appendChild(document.body, newButton);
  }
  </code></pre>
  <p>The button is not styled:</p>
  <p><a href="https://i.stack.imgur.com/uDFaZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uDFaZ.jpg" alt="enter image description here" /></a></p>
  <p>How can I get this dynamically created button to follow the css rule?</p>