primeng scheduler: what's the recommended approach for setting properties not exposed by the component

Question

While looking at the docs, I've noticed that the scheduler component does not expose the slotLabelFormat from the fullcalendar control. What's the recommended workaround to set this property?

thanks,

Luis

Answer 1

After some digging (ie, looking at the source code found here, it turns out that the Schedule control exposes a property called schedule which allows you to access the jquery fullcalendar plugin. With this info, now it's just a matter of using the API:

ngAfterViewInit(){
    //this._agenda is of type Schedule
    this._agenda.schedule.fullCalendar("option", "slotLabelFormat", "HH:mm");
 }

Answer 2

I needed to do something similar for another component before. It turns out just because the property is not an @Input(), or even not explicitly set to public, doesn't mean you can't reach it.

I did in a way similar to this:

@Component({
  selector: 'blah',
  template: `<custom-component #foo ></<custom-component>`
}) 
export class MyComponent {
  // You can leave it as `any` or use the actual component type if available
  @ViewChild("foo") myCustomComponent;

  ngAfterViewInit() {
    this.myCustomComponent.prop = 'value';
    // Above should work with `any`. 
    // If you are using component type, and it fails, try `any` or try:
    this.myCustomComponent["prop"] = 'value';
  }
}

It doesn't work all the time, and maybe ngAfterViewInit will be too late for setting the property.

Another option is to inherit the component. That's creating
class CustomComponentChild extends CustomComponent. To do this, you need Angular 2.3 at least, and you'll have to go the actual component and copy the entire @Component() decorator, as decorators are not copied or merged to child components in Angular.