We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Mat-select component in editorTemplate not working

Hello

First, I'm wondering if it's ok to add angular material components to editorTemplate?
for me mat-select is not working



<ng-template #editorTemplate>

<mat-form-field>
<mat-select>
<mat-option *ngFor="let location of locations" [value]="location.id">
{{location.name}}
</mat-option>
</mat-select>
</mat-form-field>
</ng-template>

7 Replies

HB Hareesh Balasubramanian Syncfusion Team July 12, 2019 06:12 AM

Hi Hasan, 
 
Greetings from Syncfusion Support. 
 
We have prepared a sample with the angular material components inside the editor template. And for the same we have prepared sample which can be viewed from the following link, 
 
  <mat-form-field> 
     <textarea matInput id="Subject" class="e-field e-input" type="text" value="{{data.Subject}}" name="Subject" style="width: 100%"></textarea> 
  </mat-form-field> 
  
Please try out the sample. Let us know you need any further assistance. 
 
Regards, 
Hareesh. 



HR Hasan Rifaii July 12, 2019 07:14 AM

Hello 

First, Thank you for support.
I have tried to add mat-select to your sample and still not working. please check it https://stackblitz.com/edit/angular-2icgfu-rihhov

Moreover, there is an issue in dateParser while it's called continuously, please check console -> https://stackblitz.com/edit/angular-2icgfu-rihhov

 



VD Vinitha Devi Murugan Syncfusion Team July 16, 2019 05:28 AM

Hi Hasan, 
 
Thanks for your update. 
 
Q1: We provided the ‘e-field’ support only for limited JS2 Syncfusion components like datepicker, datetimepicker, dropdownlist, multiselect, checkbox and input components . For other JS2 components and angular material component, you have to handle the ‘getting and setting the values to those fields’ in sample end using actionBegin and popupOpen event. 
 
Q2: To overcome this problem, we suggest you to use below highlighted code and same can be available in following link. 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'], 
  providers: [DayService, WeekService, WorkWeekService,MonthService, AgendaService, MonthAgendaService], 
  encapsulation: ViewEncapsulation.None, 
  changeDetection:ChangeDetectionStrategy.OnPush 
}) 
 
 
Kindly try with the above sample and let us know, if you need any further assistance on this. 

Regards, 
M.Vinitha devi. 
 



SA sai July 28, 2020 09:05 PM

hello,

I am also having the same problem. Did u resolve it?
if you find the solution please share it.

thanks in advance


VM Vengatesh Maniraj Syncfusion Team July 29, 2020 09:25 PM

Hi Sai, 

Greetings from Syncfusion Support. 

We already resolved this problem and provided the solution in our previous updates. Please check our previous updates and share the issue details if you still face the problem. 

For more reference, please check the samples. 


Regards, 
Vengatesh  



DR Dragos March 2, 2021 03:35 AM

Hello,

From what I see, the problem is not solved. The person wanted to use a mat-select control, but you provided a sample with a text area.
I also have a case in which I want to use mat-select and it's not working. The options are expanding somehow in the back of the dialog (as in the sample provided by the person above). 

A strange behavior caused by using mat-select is present also if a custom template is provided for the quick add window (the popup window just closes on the dropdown selection change).

Thank you!



HB Hareesh Balasubramanian Syncfusion Team March 3, 2021 05:14 AM

Hi Dragos, 

Thanks for the update. 

We have prepared a sample based on your shared query “Need to render the Mat-Select Angular component inside the Scheduler’s editor template as a custom filed” using editorTemplate, actionBegin and popupOpen events of the Scheduler, which can be viewed from the following link. 


[editorTemplate] snippet: 
                                <ng-template #editorTemplate let-data> 
                                                <table *ngIf="data != undefined" class="custom-event-editor" width="100%" cellpadding="5"> 
                                                                <tbody> 
                                                                                <tr> 
                                                                                                <td class="e-textlabel">Summary</td> 
                                                                                                <td colspan="4"> 
                                                                                                                <textarea matInput id="Subject" class="e-field e-input" type="text" value="{{data.Subject}}" name="Subject" 
                style="width: 100%"></textarea> 
                                                                                                </td> 
                                                                                </tr> 
                                                                                <tr> 
                                                                                                <td class="e-textlabel">Status</td> 
                                                                                                <td colspan="4"> 
                                                                                                                <ejs-dropdownlist id='Status' class="e-field" data-name="Status" placeholder='Choose Status' 
                                                                                                                                [dataSource]='StatusData' [fields]='statusFields' value='{{data.Status}}'> 
                                                                                                                </ejs-dropdownlist> 
                                                                                                </td> 
                                                                                </tr> 
                                                                                <tr> 
                                                                                                <td class="e-textlabel">Country</td> 
                                                                                                <td colspan="4"> 
                                                                                                                <mat-form-field> 
                                                                                                                                <mat-select name="countryVaraible" [(value)]="selectedCountry" placeholder="Country"> 
                                                                                                                                                <mat-option *ngFor="let country of countries" [value]="country.short"> 
                                                                                                                                                                {{country.full}} 
                                                                                                                                                </mat-option> 
                                                                                                                                </mat-select> 
                                                                                                                </mat-form-field> 
                                                                                                </td> 
                                                                                </tr> 
                                                                                <tr> 
                                                                                                <td class="e-textlabel">From</td> 
                                                                                                <td colspan="4"> 
                                                                                                                <ejs-datetimepicker id="StartTime" class="e-field" data-name="StartTime" 
                                                                                                                                format="M/dd/yy h:mm a" [value]="dateParser(data.startTime || data.StartTime)"> 
                                                                                                                </ejs-datetimepicker> 
                                                                                                </td> 
                                                                                </tr> 
                                                                                <tr> 
                                                                                                <td class="e-textlabel">To</td> 
                                                                                                <td colspan="4"> 
                                                                                                                <ejs-datetimepicker id="EndTime" class="e-field" data-name="EndTime" format="M/dd/yy h:mm a" 
                                                                                                                                [value]='dateParser(data.endTime || data.EndTime)'></ejs-datetimepicker> 
                                                                                                </td> 
                                                                                </tr> 
                                                                                <tr> 
                                                                                                <td class="e-textlabel">Reason</td> 
                                                                                                <td colspan="4"> 
                                                                                                                <textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" 
                value="{{data.Description}}" style="width: 100%; height: 60px !important; resize: vertical"></textarea> 
                                                                                                </td> 
                                                                                </tr> 
                                                                </tbody> 
                                                </table> 
                                </ng-template> 

[actionBegin & popupOpen events] snippets: 

 public onActionBegin(args: any): void
    if (args.requestType === "eventCreate") { 
      let country = this.countries.filter( 
        x => x.short == this.selectedCountry 
      )[0].full; 
      args.data[0].Country = country; 
    } else if (args.requestType === "eventChange") { 
      let country = this.countries.filter( 
        x => x.short == this.selectedCountry 
      )[0].full; 
      args.data.Country = country; 
    } 
  } 
  public onPopupOpen(args: any): void { 
    if (args.type == "Editor") { 
      if (args.target.classList.contains("e-work-cells")) { 
        this.selectedCountry = ""; 
      } else { 
        this.selectedCountry = this.countries.filter( 
          x => x.full == args.data.Country 
        )[0].short; 
      } 
    } 
  } 

Note: We provided the ‘e-field’ support only for limited JS2 Syncfusion components like datepicker, datetimepicker, dropdownlist, multiselect, checkbox and input components . For other JS2 components and angular material component, you have to handle the ‘getting and setting the values to those fields’ in sample end using actionBegin and popupOpen events of the Scheduler. 

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you..! 

Regards, 
Hareesh 


Loader.
Live Chat Icon For mobile
Up arrow icon