javascript - javascriptでAngularマテリアル入力フィールドを動的に生成します（参照コードを確認してください。スタイルが機能していません）

Question

このコードJavascriptは、新しいボックスにドラッグアンドドロップすると新しいhtmlコードを生成するのに役立ちますが、角度のあるマテリアルスタイルには付属していません...私はapp.module.tsに含めて新しいangular-material.tsを作成しましたが、その動作していません。

含める場合

<mat-form-field class="example-full-width">
   <input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>

dashboard.html ではうまく動作しますが、Javascript でこれを行うと、期待どおりに動作しません。スタイルが表示されません。

助言がありますか？

function nameFunction() {
          var r = document.createElement('div');
          var y = document.createElement("INPUT");
          r.setAttribute("value", "Name");
          r.innerHTML = '<form class="example-form"><mat-form-field class="example-full-width"> <input matInput placeholder="Favorite food" value="Sushi"> </mat-form-field> <mat-form-field class="example-full-width"> <textarea matInput placeholder="Leave a comment"></textarea> </mat-form-field> </form>';
          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);
        }

    
        <div class="row">
   <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;"> 
   </div>
</div>