hide/delete underline input

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]

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.

[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.}