Error with CalendarComponent in ejs-datepicker

Question

I'm following the example of the documentation to open the calendar according to the link https://ej2.syncfusion.com/angular/documentation/datepicker/how-to/open-datepicker-popup-on-input-click/. However, when it comes to the this.datepickerObj.show () line; lint accuses that "Property 'show' does not exist on type 'CalendarComponent'". I have the latest version of the @ syncfusion / ej2-angular-calendars package, that is, 18.2.44. And I don't know what to do! Wait the return.

I'm doing this:

HTML

<ejs-datepicker id = "calendar" #calendar (focus) = "onOpenCalendar ($ event)" placeholder = "Date of Birth *" floatLabelType = "Auto" formControlName = "BirthDate"> </ ejs -datepicker>

COMPONENT

@ViewChild ('calendar', {static: false}) calendar: CalendarComponent;

onOpenCalendar (args: FocusEventArgs) {

this.calendar.show ();

}

Berly Christopher · Accepted Answer

Hi Fabiano, 
  
Greetings from Syncfusion support. 
  
We suggest you to make the strictOutputEventTypes as false in your tsconfig.json file to get rid of the reported issue. To know more about this issue, please refer the below GitHub link. 
  




"angularCompilerOptions": { 
  "strictTemplates": true, 
  "strictOutputEventTypes": false 
} 
 
  
GitHub: https://github.com/angular/angular/issues/38342 
  
Also, we have considered the reported issue as an bug at our end and this fix will be available in our upcoming Volume 1 Main release 2021 which is expected to be rolled out on end of March 2021.  
  
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   
  
https://www.syncfusion.com/feedback/17157/ 
  
We request you to use this workaround until then and we intimate you once the fix is available for download.   
  
Regards, 
Berly B.C

Jeyanth Muthu Pratheeban Sankara Subramanian · Answer

Hi Fabiano,Greetings from Syncfusion support.We would like to inform you that show() method exists for Datepicker component and not for Calendar component. So we suggest you to change the type as DatepickerComponent instead of CalendarComponent to get rid of this issue and we will update these changes in our documentation and refresh it soon.API Link : https://ej2.syncfusion.com/angular/documentation/api/datepicker#show 




import { Component, ViewEncapsulation,ViewChild,  Inject } from '@angular/core'; 
import { DatePickerComponent, FocusEventArgs } from '@syncfusion/ej2-angular-calendars'; 
@Component({ 
    selector: 'app-root', 
    styleUrls: ['app.component.css'], 
    templateUrl: 'app.component.html', 
    encapsulation: ViewEncapsulation.None 
}) 
export class AppComponent { 
 
  @ViewChild('default') 
    public datepickerObj: DatePickerComponent; 
 
    onFocus(args: FocusEventArgs): void { 
        this.datepickerObj.show(); 
    } 
 
} 

We have also made a sample for this. Please find the sample in the attachment and kindly check the same and get back to us if you need any further assist on this.Sample Link: https://stackblitz.com/edit/angular-q6ezww?file=app.component.tsRegards,Jeyanth.

Fabiano Melo · Answer

Hello.  The error was actually in the documentation available on the Syncfusion website. I just changed the object type to DatePickerComponent and everything worked perfectly.

Jeyanth Muthu Pratheeban Sankara Subramanian · Answer

Hi Fabiano,Thanks for you update.We are glad to know that your issue has been resolved. We will update the content and refresh it in the documentation soon.Regards, Jeyanth.

Deepak Kumar · Answer

It's still not resolved.

Berly Christopher · Answer

Hi Deepak, 
  
The provided work around solution is working fine in the latest Syncfusion version. Please find the sample from the below link. 
Sample Link: https://stackblitz.com/edit/angular-q6ezww-mhfe9u?file=app.component.html  
  
So, please share the issue reproducing sample or code example that will help us to check and proceed further at our end.  
  
Regards, 
Berly B.C

Oscar A. · Answer

Hello, I'm having some issue with the documentation, it should reflect by now the correct way to use the component, but it still shows CalendarComponent.

After fixing the DatePickerComponent another error arrouse;

error TS2722: Cannot invoke an object which is possibly 'undefined'.

<ejs-datepicker #default (focus)='onFocus($event)' placeholder='Choose a date'></ejs-datepicker>

informing the error in (focus)='onFocus($event)'.

When angular compiles, sometimes it works, and it is a successful compilation, an when you change or update the component, just by changing a title, and compiles again it stops working.

I made the simples app to show the problema, if at first its a successful compilation, try changing the title and then compiling it again, it will show the error.

Thank you.

Attachment: datepicker_c41323a5.7z