title: How to avoid extra mat-form-field-underline in Angular material
body: <p>I am having an issue finding why I get an extra mat-form-field-underline when using a component.</p>
  <p>My page uses this markup:</p>
  <pre><code>&lt;mat-form-field class=&quot;col-md-6&quot;&gt;
          &lt;app-mat-select-all 
              [data]=&quot;tractList$&quot;
              formControlName=&quot;tractList&quot;
              fieldName=&quot;name&quot;
              [multiselect]=true
              labelText=&quot;Tract List&quot;
              idField=&quot;guid&quot;
              &gt;
          &lt;/app-mat-select-all&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>And my custom component has the following template code</p>
  <pre><code>&lt;form novalidate [formGroup]=&quot;form&quot;&gt;
      &lt;mat-form-field&gt;
      &lt;mat-label&gt;{{labelText}}&lt;/mat-label&gt;
      &lt;mat-select  #select [multiple]=&quot;multiselect&quot; [formControl]=&quot;selectField&quot; &gt;
        &lt;div class=&quot;select-all&quot;&gt;
            &lt;mat-checkbox *ngIf=&quot;multiselect&quot; [(ngModel)]=&quot;allSelected&quot;
                            [ngModelOptions]=&quot;{standalone: true}&quot;
                            [indeterminate]=&quot;isIndeterminate()&quot;
                            [checked]=&quot;isChecked()&quot; 
                            (click)=&quot;$event.stopPropagation()&quot;
                            (change)=&quot;toggleAllSelection($event)&quot;&gt;{{text}}&lt;/mat-checkbox&gt;
        &lt;/div&gt;
        &lt;mat-option *ngFor=&quot;let item of data&quot; [value]=&quot;item[idField]&quot;&gt;
          {{item[fieldName]}}
        &lt;/mat-option&gt;
      &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
      &lt;/form&gt;
  </code></pre>
  <p>And it looks like this on the rendered page</p>
  <p><a href="https://i.stack.imgur.com/Ilzj9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ilzj9.png" alt="enter image description here" /></a></p>
  <p>When I go and add the following line to my parent style sheet all mat-form-field-underlines are gone which is not what I want. If I go and remove the mat-form-field in my custom component I only get one line but then the alignment of the mat-form-field-underline is off with the other components on page. So I need to find a way to only target the 2nd underline to be able to remove.</p>
  <pre class="lang-scss prettyprint-override"><code>    ::ng-deep .mat-form-field-underline {
          display: none;
      }
  </code></pre>
  <p>Here is a stackblitz sample which demonstrate this issue of the 2nd underline <a href="https://stackblitz.com/edit/angular-ivy-t2mbpo?file=src/app/mat-select/mat-select.component.ts" rel="nofollow noreferrer">StackBlitz Sample</a></p>
  <p>Here is the code when i inspect it and it seems that for some reason there is a mat-form-field inside a mat-form-field. Not sure why ?</p>
  <pre><code>&lt;mat-form-field _ngcontent-jtb-c709=&quot;&quot; class=&quot;mat-form-field col-md-6 ng-tns-c393-17 mat-primary mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-hide-placeholder&quot;&gt;&lt;div class=&quot;mat-form-field-wrapper ng-tns-c393-17&quot;&gt;&lt;div class=&quot;mat-form-field-flex ng-tns-c393-17&quot;&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;false&quot;
  }--&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;0&quot;
  }--&gt;&lt;div class=&quot;mat-form-field-infix ng-tns-c393-17&quot;&gt;&lt;app-mat-select-all _ngcontent-jtb-c709=&quot;&quot; formcontrolname=&quot;tractList&quot; fieldname=&quot;name&quot; labeltext=&quot;Tract List&quot; idfield=&quot;guid&quot; _nghost-jtb-c804=&quot;&quot; ng-reflect-field-name=&quot;name&quot; ng-reflect-label-text=&quot;Tract List&quot; ng-reflect-id-field=&quot;guid&quot; ng-reflect-name=&quot;tractList&quot; ng-reflect-form-control-name=&quot;tractList&quot; class=&quot;ng-tns-c393-17 ng-untouched ng-pristine ng-valid&quot; ng-reflect-multiselect=&quot;true&quot; ng-reflect-data=&quot;[object Object],[object Object&quot;&gt;&lt;form _ngcontent-jtb-c804=&quot;&quot; novalidate=&quot;&quot; ng-reflect-form=&quot;[object Object]&quot; class=&quot;ng-untouched ng-pristine ng-valid&quot;&gt;&lt;mat-form-field _ngcontent-jtb-c804=&quot;&quot; class=&quot;mat-form-field ng-tns-c393-18 mat-primary mat-form-field-type-mat-select mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-has-label mat-form-field-hide-placeholder ng-untouched ng-pristine ng-valid&quot;&gt;&lt;div class=&quot;mat-form-field-wrapper ng-tns-c393-18&quot;&gt;&lt;div class=&quot;mat-form-field-flex ng-tns-c393-18&quot;&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;false&quot;
  }--&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;0&quot;
  }--&gt;&lt;div class=&quot;mat-form-field-infix ng-tns-c393-18&quot;&gt;&lt;mat-select _ngcontent-jtb-c804=&quot;&quot; role=&quot;combobox&quot; aria-autocomplete=&quot;none&quot; aria-haspopup=&quot;true&quot; class=&quot;mat-select ng-tns-c500-19 ng-tns-c393-18 ng-star-inserted mat-select-empty mat-select-multiple ng-untouched ng-pristine ng-valid&quot; ng-reflect-multiple=&quot;true&quot; ng-reflect-form=&quot;[object Object]&quot; aria-labelledby=&quot;mat-form-field-label-19 mat-select-value-15&quot; id=&quot;mat-select-14&quot; tabindex=&quot;0&quot; aria-expanded=&quot;false&quot; aria-required=&quot;false&quot; aria-disabled=&quot;false&quot; aria-invalid=&quot;false&quot;&gt;&lt;div cdk-overlay-origin=&quot;&quot; class=&quot;mat-select-trigger ng-tns-c500-19&quot;&gt;&lt;div class=&quot;mat-select-value ng-tns-c500-19&quot; ng-reflect-ng-switch=&quot;true&quot; id=&quot;mat-select-value-15&quot;&gt;&lt;span class=&quot;mat-select-placeholder mat-select-min-line ng-tns-c500-19 ng-star-inserted&quot;&gt;&lt;/span&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-switch-case&quot;: &quot;true&quot;
  }--&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-switch-case&quot;: &quot;false&quot;
  }--&gt;&lt;/div&gt;&lt;div class=&quot;mat-select-arrow-wrapper ng-tns-c500-19&quot;&gt;&lt;div class=&quot;mat-select-arrow ng-tns-c500-19&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--bindings={
    &quot;ng-reflect-offset-y&quot;: &quot;0&quot;
  }--&gt;&lt;/mat-select&gt;&lt;span class=&quot;mat-form-field-label-wrapper ng-tns-c393-18&quot;&gt;&lt;label class=&quot;mat-form-field-label ng-tns-c393-18 mat-empty mat-form-field-empty ng-star-inserted&quot; ng-reflect-disabled=&quot;true&quot; id=&quot;mat-form-field-label-19&quot; ng-reflect-ng-switch=&quot;true&quot; for=&quot;mat-select-14&quot; aria-owns=&quot;mat-select-14&quot;&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-switch-case&quot;: &quot;false&quot;
  }--&gt;&lt;mat-label _ngcontent-jtb-c804=&quot;&quot; class=&quot;ng-tns-c393-18 ng-star-inserted&quot;&gt;Tract List&lt;/mat-label&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-switch-case&quot;: &quot;true&quot;
  }--&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;false&quot;
  }--&gt;&lt;/label&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;true&quot;
  }--&gt;&lt;/span&gt;&lt;/div&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;0&quot;
  }--&gt;&lt;/div&gt;&lt;div class=&quot;mat-form-field-underline ng-tns-c393-18 ng-star-inserted&quot;&gt;&lt;span class=&quot;mat-form-field-ripple ng-tns-c393-18&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;true&quot;
  }--&gt;&lt;div class=&quot;mat-form-field-subscript-wrapper ng-tns-c393-18&quot; ng-reflect-ng-switch=&quot;hint&quot;&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-switch-case&quot;: &quot;error&quot;
  }--&gt;&lt;div class=&quot;mat-form-field-hint-wrapper ng-tns-c393-18 ng-trigger ng-trigger-transitionMessages ng-star-inserted&quot; style=&quot;opacity: 1; transform: translateY(0%);&quot;&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;&quot;
  }--&gt;&lt;div class=&quot;mat-form-field-hint-spacer ng-tns-c393-18&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-switch-case&quot;: &quot;hint&quot;
  }--&gt;&lt;/div&gt;&lt;/div&gt;&lt;/mat-form-field&gt;&lt;/form&gt;&lt;/app-mat-select-all&gt;&lt;span class=&quot;mat-form-field-label-wrapper ng-tns-c393-17&quot;&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;false&quot;
  }--&gt;&lt;/span&gt;&lt;/div&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;0&quot;
  }--&gt;&lt;/div&gt;&lt;div class=&quot;mat-form-field-underline ng-tns-c393-17 ng-star-inserted&quot;&gt;&lt;span class=&quot;mat-form-field-ripple ng-tns-c393-17&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;true&quot;
  }--&gt;&lt;div class=&quot;mat-form-field-subscript-wrapper ng-tns-c393-17&quot; ng-reflect-ng-switch=&quot;hint&quot;&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-switch-case&quot;: &quot;error&quot;
  }--&gt;&lt;div class=&quot;mat-form-field-hint-wrapper ng-tns-c393-17 ng-trigger ng-trigger-transitionMessages ng-star-inserted&quot; style=&quot;opacity: 1; transform: translateY(0%);&quot;&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-if&quot;: &quot;&quot;
  }--&gt;&lt;div class=&quot;mat-form-field-hint-spacer ng-tns-c393-17&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;!--bindings={
    &quot;ng-reflect-ng-switch-case&quot;: &quot;hint&quot;
  }--&gt;&lt;/div&gt;&lt;/div&gt;&lt;/mat-form-field&gt;
  </code></pre>