Display the start and end date calendars when clicking on a button

[dresdner-barry-IBM]

Hi, I am unable to display the start and end date calendars when clicking on a button. I have the following:

  <input ngxDaterangepickerMd [(ngModel)]="selected" #picker="ngxDaterangepickerMd"
    style="display: none"
    [autoApply]="true"
    [showDropdowns]="true"
    [locale]="{ format: 'MM/DD/YYYY' }"
    (chosenDateRange)="onChosenDate($event)"
  />

  <!-- Button to open the calendar -->
  <button class="btn btn-primary" (click)="picker.open()">
    📅 Select Date Range
  </button>

My app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
	NoopAnimationsModule,
    FormsModule,
	ReactiveFormsModule,
    NgxDaterangepickerMd.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

But I get the following error when compiling:
[ERROR] NG8003: No directive found with exportAs 'ngxDaterangepickerMd'. [plugin angular-compiler]

Are there any working examples of this?