title: Dynamically Generate Angular material Input Field by javascript (check reference code it is not working style is not working)
body: <p>This code Javascript helps me generate a new html code when i drag and drop to new box but with angular material style is not coming with it ... 
      i have included in app.module.ts and made new angular-material.ts but its not working. </p>
  
  <p>if include</p>
  
  <pre><code>&lt;mat-form-field class="example-full-width"&gt;
     &lt;input matInput placeholder="Favorite food" value="Sushi"&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>in dashboard.html it working excellent but when i do this with Javascript it doesn't work as expected .. style doesn't show.</p>
  
  <p>any suggestions?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function nameFunction() {
            var r = document.createElement('div');
            var y = document.createElement("INPUT");
            r.setAttribute("value", "Name");
            r.innerHTML = '&lt;form class="example-form"&gt;&lt;mat-form-field class="example-full-width"&gt; &lt;input matInput placeholder="Favorite food" value="Sushi"&gt; &lt;/mat-form-field&gt; &lt;mat-form-field class="example-full-width"&gt; &lt;textarea matInput placeholder="Leave a comment"&gt;&lt;/textarea&gt; &lt;/mat-form-field&gt; &lt;/form&gt;';
            y.setAttribute("type", "text");
            y.style.float = "left";
            r.style.float = "left";
            r.style.margin = "1%";
            var g = document.createElement("i");
            g.setAttribute("class", "fas fa-times-circle text-danger pl-2 pr-2");
            increment();
            y.setAttribute("Name", "textelement_" + i);
            r.appendChild(y);
            g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
            r.appendChild(g);
            r.setAttribute("id", "label" + i);
      
      
            document.getElementById("myForm").appendChild(r);
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    
          &lt;div class="row"&gt;
     &lt;div class="col-md-12" [style.background]="color" id="newArea" (drop)="drop($event)" (dragover)="allowDrop($event)" [style.background]="color1" style=" padding: 10px; min-height: 550px;"&gt; 
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>