Comparison of HTML usage in Material for Angular and Bootstrap

markup.md

Here's our custom Angular for an input (admittedly, mine, so not so the best way to Angular)

<app-label-input-pair labelText="Your name" inputId="your-name"></app-label-input-pair>

Here's the HTML output (which we write ourselves, following Bootstrap conventions)

<div class="form-group">
  <label for="your-name">Your name</label>
  <input type=“text” class="form-control" id="your-name">
</div>

---

Here's Material for Angular's code for the same thing

<mat-form-field>
    <input matInput placeholder=“Your name“>
</mat-form-field>

and the HTML output:

<mat-form-field class="mat-form-field ng-tns-c26-88 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-should-float mat-form-field-hide-placeholder">
    <div class="mat-form-field-wrapper">
        <div class="mat-form-field-flex">
            <!---->
            <div class="mat-form-field-infix">
                <input class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored" matinput="" placeholder="Your name"
                    id="mat-input-22" aria-invalid="false" aria-required="false">
                <span class="mat-form-field-label-wrapper">
                    <!---->
                    <label class="mat-form-field-label ng-tns-c26-88 ng-star-inserted" for="mat-input-22" aria-owns="mat-input-22">
                        <!---->
                        <!---->Your name
                        <!---->
                        <!---->
                    </label>
                </span>
            </div>
            <!---->
        </div>
        <!---->
        <div class="mat-form-field-underline ng-tns-c26-88 ng-star-inserted">
            <span class="mat-form-field-ripple"></span>
        </div>
        <!---->
        <div class="mat-form-field-subscript-wrapper">
            <!---->
            <!---->
            <div class="mat-form-field-hint-wrapper ng-tns-c26-88 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);">
                <!---->
                <div class="mat-form-field-hint-spacer"></div>
            </div>
        </div>
    </div>
</mat-form-field>