Ggtcf

So I am using angular-calendar and I have a dialog for when I press a button, right now I add a random event object to my calendarservice events array for testing purposes:

 onButtonClick() 
 var date = addHours(new Date(), 2)
 this.calendarService.onCreateEvent('test added',date )
 console.log(date)
 

which adds it to my injected service:

export class CalendarService {
 events: CalendarEvent[] = [
 title: "my test event 1", start: new Date() ,
 title: "my test event 2", start: addDays(new Date(), 1) 
 ];

Right now I use ngOnit to set the local events array in the component:

export class ScheduleCalendarComponent implements OnInit{
 constructor(
 private calendarService: CalendarService,
 public dialog: MatDialog
 ) 

 view: string = "month";

 viewDate: Date = new Date();

 events: CalendarEvent[] = [];

 refresh: Subject<any> = new Subject();

 ngOnInit(): void 
 this.events = this.calendarService.events;
 

So right now it pulls the correct events but when I add an event it doesnt update the DOM because I only update the array OnInit so only after changing pages and coming back, Using the calendarservice events array it works if I change the update method:

 onCreateEvent(title: string, start: any) 
 this.events = [...this.events, title: title, start: start]
 

I use this and add it to the calendar like so:

 <mwl-calendar-day-view
 *ngSwitchCase="'day'"
 [viewDate]="viewDate"
 [events]="this.calendarService.events"
 (hourSegmentClicked)="openDialog()"
 >
 </mwl-calendar-day-view>

but how would I do this using the components own array rather than the service array? And is it better practice for the component to use its own array like max did than just take straight from the service?

I'd like to do it using the components array but It wont update on button click:

 <mwl-calendar-day-view
 *ngSwitchCase="'day'"
 [viewDate]="viewDate"
 [events]="events"
 (hourSegmentClicked)="openDialog()"
 >
 </mwl-calendar-day-view>

Hope that makes sense

Thanks you!

Its happening because there are different changeDetectionStrategy and the one which you are seeing is changeDetectionStrategy.onPush under @Component

changeDetection: ChangeDetectionStrategy.OnPush

Why don't you create a new array copy using

ngOnInit(): void 
 this.events = [...this.calendarService.events];

OR

ngOnInit(): void 
 this.events = JSON.parse(JSON.stringify(this.calendarService.events));

and then you wont modify service array events and can easily use:

onCreateEvent(title: string, start: any) 
 this.events = [...this.events, title: title, start: start]