Impossoble to have the same rendering as on angular material

[Unknown]

Hello,

I'm using angular material components and ej2 in the same time.

The appearence of the controls are not the same from angular material and ej2.

Could you please provide me some sample to have the same appearence ? 

Here some screenshot : 

How to have the same font-family here i would like to have rubik. 

And same size of control  ? 

thx

[Sevvandhi Nagulan]

Hi Foulont, 

 

 

Greetings from Syncfusion support. 

 

By overriding the class below, you can configure the height of the TimePicker component by using the same height given for the Angular material component. 

 

 

.e-float-input.e-control-wrapper.e-input-group.e-outline.e-time-wrapper{ 

  height: 52px; 

} 

 

 

 

Sample: https://stackblitz.com/edit/angular-material-display-outline-textbox-pfw7vp?file=src%2Fapp%2Fapp.component.css 

Regards, 

Sevvandhi N 

[Unknown]

Thx for your answer. It works.

Another question : 
In angular material we can use mat form field and set hideRequiredMarker  to false and set required to input or another component to true like that : 

    [hideRequiredMarker]="options?.hideRequired ? 'true' : 'false'">

     *ngIf="!options?.notitle">{{options?.title}}

     matPrefix *ngIf="options?.prefix || options?.fieldAddonLeft"

      [innerHTML]="options?.prefix || options?.fieldAddonLeft">

     matInput  [value]="controlValue" 

          [required]="options?.required">

  

How can be achieved to add required  and add marker to ejs-timepicker, datetimepicker, datepicker ? 

[Sevvandhi Nagulan]

Hi Foulont,  

  

We would like to inform you that Syncfusion Input components does not have the support for appending the asterix icon in front of the placeholder. If we want to add it for the Syncfusion component, we need to append it manually.  Refer to the code below, 

 

  onCreated(e){ 

          for(let i: number = 0; i< document.getElementsByClassName('e-float-text').length; i++ ){ 

        let element: Element = document.getElementsByClassName('e-float-text')[i]; 

        if((element as any).innerText.indexOf('*') === -1){ 

        element.innerHTML = "<span>" + element.innerHTML + "</span><span class='e-error'> * </span>"; 

        } 

      } 

  } 

 

 

Sample: https://stackblitz.com/edit/angular-material-display-outline-textbox-uk4dkf?file=src%2Fapp%2Fapp.component.html 

Regards,  

Sevvandhi N.