how to use element reference using material UI in angular?

Question

I have trouble getting the reference of an element, what I want to do is I want to wrap the material UI elements to a div and need to make an opacity: 0, so that it won't be shown in HTML and I will handle the value in my component.ts, the purpose is I need to customize its input element. However, it does not work when putting an element reference id, as you will see I put a #datepicker inside element mat-datepicker-toggle and tried to add a mouse event in my div wrapper <div (focus)="datepicker.click()" and tried to find an alternative but still, I have received an error and says : error TS2551: Property 'open' does not exist on type 'MatDatepickerToggle<any>'.

Here is my code:

<div
  (focus)="datepicker.click()"
  class="
  cursor-pointer
  input-text
  d-flex
  justify-content-between
  label
  flex-grow-1
  text-dark-gray
  align-items-center
">
    <mat-form-field>
    <input matInput [ngxMatDatetimePicker]="picker" 
     placeholder="Select Date"
     [formControl]="dateControl"
     [min]="minDate" [max]="maxDate" 
     [disabled]="disabled">
   <mat-datepicker-toggle matSuffix [for]="picker" #datepicker>
   </mat-datepicker-toggle>
    <ngx-mat-datetime-picker #picker 
     [showSpinners]="showSpinners" 
     [showSeconds]="showSeconds"
     [stepHour]="stepHour" [stepMinute]="stepMinute" 
     [stepSecond]="stepSecond"
     [touchUi]="touchUi"
     [color]="color">
    </ngx-mat-datetime-picker>
  </mat-form-field>
</div>

JsNgian · Accepted Answer · 2021-08-16 14:32:41Z

1

You can use [style.opacity]="opacityVariable" and control the value of opacityVariable from component.

<div
  [style.opacity]="opacityVariable"
  (focus)="datepicker.click()"
  class="
  cursor-pointer
  input-text
  d-flex
  justify-content-between
  label
  flex-grow-1
  text-dark-gray
  align-items-center
">

...

</div>

answered Aug 16, 2021 at 14:32

JsNgian

8356 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ERROR 401 Over a year ago

Hi thanks. But how can I make a mouse event where I will trigger it using an element reference id like my problem when I do this <mat-datepicker-toggle matSuffix [for]="picker" #datepicker> the #datepicker is an error and is not known property of (focus)="datepicker.click()"

JsNgian Over a year ago

Are you trying to open the date picker when the div is focused? try using (focus)="picker.open()" (focusout)="picker.close()

Collectives™ on Stack Overflow

how to use element reference using material UI in angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related