override styles multiple date pickers on same page

Related examples:

• override styles single datepicker
• change color theme of datepicker

<input angular-mydatepicker [(ngModel)]="model1" [options]="myDatePickerOptions1" 
    #dp1="angular-mydatepicker">

<input angular-mydatepicker [(ngModel)]="model2" [options]="myDatePickerOptions2" 
    #dp2="angular-mydatepicker">

import {IAngularMyDpOptions} from 'angular-mydatepicker';

export class MyApp {

    /*
    It is possible to set unique styles to each datepicker as follows.
    */

    myDatePickerOptions1: IAngularMyDpOptions = {
        stylesData: {
            selector: 'dp1',  // unique class selector string
            styles: `
                .dp1 .myDpIconLeftArrow,  // above unique class selector is also added to each rule
                .dp1 .myDpIconRightArrow {
                    color: red;
                }  
            `
        }
        // other options here
    }

    myDatePickerOptions2: IAngularMyDpOptions = {
        stylesData: {
            selector: 'dp2',  // unique class selector string
            styles: `
                .dp2 .myDpIconLeftArrow,   // above unique class selector is also added to each rule
                .dp2 .myDpIconRightArrow {
                    color: blue;
                }  
            `
        }
        // other options here
    }

    constructor() {}
}