I am trying to make an update in database for a collection and if it’s ok, I want to set a new background color for a div. My code doesn’t set the color. It works only when I refresh the page and load from database my data that have been saved. The update of database and color method it’s called when I click on a div from child component.
I have a parent component and a child, also I am using https://mattlewis92.github.io/angular-calendar/#/clickable-events
How to pass from parent to child the info that my data has been saved and change the color?
Child component:
@Component({
// tslint:disable-next-line:component-selector
selector: 'mwl-demo-component',
templateUrl: 'month-calendar.component.html',
})
export class MonthCalendarComponent implements OnInit {
view = 'month';
@Input() viewDate: Date = new Date();
@Input() holidayClicked: Function;
daySelectedCssClass: string = day_selected_cell;
ngOnInit() {
this. boundCallBack = this.callback.bind(this);
}
dayClicked(day: CalendarMonthViewDay): void {
const sub = this.holidayClicked(day);
sub.subscribe(isHoliday => {
if (isHoliday) {
delete day.cssClass;
} else {
day.cssClass = 'cal-day-selected';
}
});
}
html code
<mwl-calendar-month-view
*ngSwitchCase="'month'"
[viewDate]="viewDate"
(dayClicked)="dayClicked($event.day)">
</mwl-calendar-month-view>
parent component:
export class CalendarComponent implements OnInit {
@ViewChildren(MonthCalendarComponent) months: any[];
constructor(private calendarService: CalendarService) {
}
ngOnInit() {
this.holidayClicked = function (day: CalendarMonthViewDay): Observable<boolean> {
const username = 'username';
const holiday = new Holiday();
holiday.date = day.date;
return this.calendarService.updateEmployee(username, holiday).map(
response => {
if (holiday) {
return true;
} else {
return false;
}
});
};
}
public getHolidayClicked() {
return this.holidayClicked;
}
}
html code
<div class="container-calendar1">
<mwl-demo-component [holidayClicked]="holidayClicked" ></mwl-demo-component>
</div>
and service method
updateEmployee(userName: string, holiday: Holiday): Observable<Holiday> {
const url = this._employeeUrl + '/holiday?userName=' + userName;
return this.http.put(url, holiday)
.map((res: Holiday) => res)
.catch(this.handleError);
}
Source: Angular
angular, bootstrap-4, css, html
