[inline] Selection isn't highlighted

Versions

Angular CLI: 9.1.9
Node: 12.14.1
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.9
@angular-devkit/core         9.1.9
@angular-devkit/schematics   9.1.9
@schematics/angular          9.1.9
@schematics/update           0.901.9
rxjs                         6.5.4

"ngx-daterangepicker-material": "^3.0.1"

Describe the bug When adding a simple in-line daterangepicker to a project which already has material installed and setup, the selection isn’t highlighted. Also the style is off but that seems to be a side-effect of that (maybe #282 is related?).

I’m new to angular and I don’t know what I’m missing here. Is there a step that’s not documented in the readme (like adding moment.js) or is this a bug?

To Reproduce Basically follow the readme:

• ng new repro-project --skipGit=true --interactive=false
• cd repro-project
• ng add @angular/material
  • Choose Ping/Blue Grey (two down + Enter)
  • Enter (no typography styles)
  • Enter (yes browser animations)
• npm i -D ngx-daterangepicker-material
• npm i moment (not in readme?)
• Import in app.module.ts

  import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
  NgxDaterangepickerMd.forRoot()
  

• ng generate @angular/material:navigation nav
• ng g component picker
• Copy basic in-line example from demo picker.component.html

  <ngx-daterangepicker-material
      [locale]="{ applyLabel: 'Done', firstDay: 1 }"
      name="inline-daterangepicker"
      (chosenDate)="chosenDate($event)"
  >
  </ngx-daterangepicker-material>
  <div>Chosen date: {{ inlineDate | json }}</div>
  

  picker.component.ts

  import { Component } from '@angular/core';
  import * as moment from 'moment';
  
  @Component({
    selector: 'app-picker',
    templateUrl: './picker.component.html',
    styleUrls: ['./picker.component.css']
  })
  export class PickerComponent {
    inlineDate: { chosenLabel: string; startDate: moment.Moment; endDate: moment.Moment };
  
    selected = {
        startDate: moment('2015-11-18T00:00Z'),
        endDate: moment('2015-11-26T00:00Z'),
    };
  
    chosenDate(chosenDate: { chosenLabel: string; startDate: moment.Moment; endDate: moment.Moment }): void {
        console.log(chosenDate);
        this.inlineDate = chosenDate;
    }
  }
  

• Replace contents of app.component.html with <app-nav></app-nav>
• Replace <!-- Add Content Here --> in nav.component.html with <app-picker></app-picker>
• ng serve
• Select two dates and press done.

Expected behavior The date is selected and displayed in the div below the picker.
The selection is highlighted like in the basic in-line demo.

Actual behavior The date is selected and displayed in the div below the picker but nothing is highlighted.

Screenshots Expected (taken from demo):

Actual (10. - 12. June should be highlighted but it’s not):

Stackblitz link I tried to create a stackblitz with the same steps but there are errors I don’t know how to fix 😕
https://stackblitz.com/edit/angular-ivy-z1rwff

Additional context Here’s a full project which was created by following the repro steps that shows the issue: repro-project.zip

Things I tried:

• Adding @import '../node_modules/ngx-daterangepicker-material/daterangepicker-theme.scss'; to the top of styles.css but doesn’t make a difference.
• Removing the built-in theme from the styles array in angular.json and instead importing it in styles.css with @import '../node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css';. No difference either.
• I checked the versions. I’m using angular >=9.0.0 with @angular/material so the version ^3.0.1 (which npm added automatically) should be fine.
• Checked the console (both browser and angular dev server) for errors but none appeared.
• A bit absurd but I also tried fixing the moment version to 2.24.0 which of course did nothing.

[Joelius300]

Just a note because someone else might trip on this: You need both styles in the styles array, otherwise it’s completely messed up.

When installing I got

"styles": [
    "./node_modules/ngx-daterangepicker-material/prebuilt-themes/pink-bluegrey.css",
    "src/styles.scss"
],

but you need

"styles": [
    "./node_modules/ngx-daterangepicker-material/prebuilt-themes/pink-bluegrey.css",
    "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
    "src/styles.scss"
],

[Joelius300]

@fetrarij Are you sure? The issue also reproduces without using ngModel like so:
(also why did you even think I used ngModel? I didn’t use it in my repro)

picker.component.html

<ngx-daterangepicker-material (chosenDate)="chosenDate($event)"></ngx-daterangepicker-material>
<div>Chosen date: {{ inlineDate | json }}</div>

picker.component.ts

import { Component, ViewChild } from '@angular/core';
import * as moment from 'moment';

@Component({
  selector: 'app-picker',
  templateUrl: './picker.component.html',
  styleUrls: ['./picker.component.css']
})
export class PickerComponent {
  inlineDate: { chosenLabel: string; startDate: moment.Moment; endDate: moment.Moment };

  chosenDate(chosenDate: { chosenLabel: string; startDate: moment.Moment; endDate: moment.Moment }): void {
      this.inlineDate = chosenDate;
  }
}

Also it’s not related to inline at all. You can also reproduce it like this:

<mat-form-field>
  <input
      type="text" <-- this line isn't documented but without it it doesn't work correctly (no styling and date isn't displayed)
      matInput
      ngxDaterangepickerMd
      showCancel="true"
      placeholder="Choose date"
      [(ngModel)]="selected"
      [showDropdowns]="true"
      [lockStartDate]="false"
      [customRangeDirection]="false"
      (ngModelChange)="ngModelChange($event)"
      (change)="change($event)"
  />
</mat-form-field>

import { Component } from '@angular/core';
import * as moment from 'moment';

@Component({
  selector: 'app-picker',
  templateUrl: './picker.component.html',
  styleUrls: ['./picker.component.css']
})
export class PickerComponent {
  selected = {
    startDate: moment('2015-11-18T00:00Z'),
    endDate: moment('2015-11-26T00:00Z'),
  };

  ngModelChange(e): void {
    console.log(e);
  }

  change(e): void {
      console.log(e);
  }
}

The code is taken from the link you posted (your demo page).

I’m almost certain this has to be a styling bug in regard to the pre-built styles because the here mentioned workaround fixes the issue. However, it’s not documented anywhere and I believe a lot of people (especially beginners who have trouble helping themselfs with angular) use angular material with pre-built themes.

Could you please investigate this again?

Ps. Cannot reopen because I didn’t close it myself.