Expose events as @Input() again (like in v4)

In v5, the component has only one input for all the options and I think this is a drawback for doing things the Angular way. I strongly prefer the v4 way of having everything as input or output, it’s clearer and conforms better to the Angular pattern, by the way…

[options] should be used for static configuration properties that presumably didn’t change during the lifespan of the component but events can change frequently and can be useful to have their input property expecially when using async pipe.

Here are two examples of (simplified) code taken from a project of mine that uses NGRX and where events can change from actions outside the calendar component (filtered by a search, added…).

Current v5 implementation:

template: <full-calendar *ngIf="(calendarOptions$ | async) as options" [options]="options"></full-calendar>
...

  private readonly calendarOptions = {
    plugins: [dayGridPlugin, timeGrigPlugin, interactionPlugin, listPlugin],
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    ...
  };

  ngOnInit() {
    this.calendarOptions$ = this.store.pipe(
      select(EventsSelectors.selectEvents),
      map(events => {
        const newEvents = events
          .map(event => ({
              id: event.id,
              title: event.title,
              date: event.dueDate.toISOString(),
              allDay: true,
              editable: true,
          }));

        return { ...this.calendarOptions, events: newEvents };
      })
    );
  }

Proposed implementation:

template: <full-calendar [options]"calendarOptions" [events]="events$ | async"></full-calendar>
...
  public readonly calendarOptions = {
    plugins: [dayGridPlugin, timeGrigPlugin, interactionPlugin, listPlugin],
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    ...
  };

  ngOnInit() {
    this.events$ = this.store.pipe(
      select(EventsSelectors.selectEvents),
      map(events => events.map(event => ({
              id: event.id,
              title: event.title,
              date: event.dueDate.toISOString(),
              allDay: true,
              editable: true,
          }))
      )
    );
  }

[irustm]

@arshaw what do you think about it? I’m ready to change the API, and go back to the old way.

[blackholegalaxy]

Agreed. Having to change options object when updating the events is kind of messy. As stated by @osmolo we load our events through NGRX effects and rely heavily on our store to get updated and new events. We expect to be able to pass the events like: [events]="events$ | async"