Components: hide/delete underline input

[PatrickCharriere]

Bug

Property 'underlineRef' does not exist on type 'MdInputDirective'

However, underlineRef property exists if we log this MdInputDirective:

Expected behavior

@ViewChild('input') input: MdInputDirective;

ngOnInit(): void {
  this.input.underlineRef.nativeElement.className = null;  // Removes the input underline 
}

What is the current behavior?

Compilation error

What are the steps to reproduce?

Link of a discussion on the issue:
https://stackoverflow.com/questions/45556972/how-to-hide-delete-underline-input-angular-material

Is there anything else we should know?

Workaround

@ViewChild('input') input: MdInputDirective;

ngOnInit(): void {
  this.input['underlineRef'].nativeElement.className = null;  // Remove the input underline 
}

[willshowell]

Reproduction? This working example is from that SO conversation:

https://plnkr.co/edit/XMhDIVBDup29sM8oi2dL?p=preview

[gise88]

@willshowell I had the same problem and I have archived this with ViewEncapsulation.None. What do you recommend?
https://plnkr.co/edit/Xxe8Wyv0141Ewxgcij4s?p=preview

[willshowell]

Personally I'd opt for using css and leaving the underlineRef alone. I think the only reason it is exposed is for the datepicker to have a reference element to attach to, and I could easily see it going away or becoming internal-use-only.

I'd suggest a slight variation of your plunk:

// in global stylesheet
.mat-input-container.app-input-no-underline .mat-input-underline {
  display: none;
}

<md-input-container [class.app-input-no-underline]="!showUnderline">
  <input mdInput>
</md-input-container>

https://plnkr.co/edit/S8vHnOuzr6l6tYiMOnmi?p=preview

By adding it to a global stylesheet, you can keep view encapsulation on for your component.

[gise88]

Personally I'd opt for using css and leaving the underlineRef alone

Yep, I think the same.

And thanks for your tip! You are absolutely right

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}