CODEWITHSUNDEEP
javascripthtmlangular
ERROR 401
ERROR 401

Reputation: 129

how to use element reference using material UI in angular?

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>

Upvotes: 0

Views: 203

Answers (1)

JsNgian
JsNgian

Reputation: 835

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>

Upvotes: 1

Related Questions