Using dependency injection in Angular 2 to customize an attribute-based component NgbDatepicker

Question

I cannot comprehend how DI can be used to provide a specific constructor argument in a component that i have imported. The NgbDatePicker contains a custom formatter interface (NgbDateParserFormatter), which, when implemented, can be passed in the constructor to the component to display custom date formats. I am using the NgbDatePicker component as follows:

<input class="form-control" placeholder="yyyy-mm-dd" ngbDatepicker
    name="dp-start" [(ngModel)]="startDate"
    #dpStart="ngbDatepicker" id="dp-start">

If I wrapped the NgbDatePicker in my own component, then i could pass the custom NgbDateParserFormatter through my constructor and apply it. However, i do not wish to have a separate component.

How can i configure an external component such as the NgbDatePicker through DI from Angular 2?

Answer 1

The ng-bootstrap team still doesn't have a demo for this so here's how you can provide a custom formatter for your NgbDatePickers via your NgModule providers array.

Custom parse formatter will have a parse and a format function which are required. Parse is responsible for the internal model information being set and format handles display.

custom.formatter.ts

import { NgbDatepickerConfig, NgbDateParserFormatter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";

export class CustomDateParserFormatter extends NgbDateParserFormatter {
    parse(value: string): NgbDateStruct {
        if (value) {
            const dateParts = value.trim().split('-');
            if (dateParts.length === 1 && isNumber(dateParts[0])) {
                return { month: toInteger(dateParts[0]), day: null, year: null };
            } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
                return { month: toInteger(dateParts[0]), day: toInteger(dateParts[1]), year: null };
            } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
                return { month: toInteger(dateParts[0]), day: toInteger(dateParts[1]), year: toInteger(dateParts[2]) };
            }
        }
        return null;
    }

    format(date: NgbDateStruct): string {
        return date ? `${isNumber(date.month) ? padNumber(date.month) : ''}-${isNumber(date.day) ? padNumber(date.day) : ''}-${date.year}` : "";
    }
}

// lifted out of ng-bootstrap
function toInteger(value: any): number {
    return parseInt(`${value}`, 10);
}

function padNumber(value: number) {
    if (isNumber(value)) {
        return `0${value}`.slice(-2);
    } else {
        return '';
    }
}

function isNumber(value: any): boolean {
    return !isNaN(toInteger(value));
}

module.ts

import {CustomDateParserFormatter} from "src/custom.datepicker-parser-formatter"
import {NgbDateParserFormatter} from "@ng-bootstrap/ng-bootstrap"

<...>
@NgModule({<...>, providers: [
    { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
])

Note that this is all based off of their own source code

Here's a Plunker

Answer 2

you can use component providers to only apply it to that component

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css'],
  providers: [
    {provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter},
    {provide: NgbCalendar, useClass: NgbCalendarPersian},
    {provide: NgbDatepickerI18n, useClass: NgbDatepickerI18nPersian}
  ]
})
export class CalendarComponent {}