Angular Material Theme in not being applied on mtx-datetimepicker - css

Question

Scenario:
I'm using directives from ng-matero for DateTime and using Angular Material for overall designing my application. Overall the functionality works fine. However angular material theme doesn't get apply on the dateTimepicker element as shown
Code
My app.module.ts file looks like this
import { HttpClientModule } from '#angular/common/http';
import { NgModule } from '#angular/core';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module';
import { SearchComponent } from './components/search/search.component';
import { JourneysListComponent } from './components/journeys-list/journeys-list.component';
import { FlexLayoutModule } from '#angular/flex-layout';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MtxDatetimepickerModule } from '#ng-matero/extensions/datetimepicker';
import { MtxNativeDatetimeModule } from '#ng-matero/extensions/core';
#NgModule({
declarations: [
AppComponent,
SearchComponent,
JourneysListComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
MaterialModule,
FlexLayoutModule,
BrowserAnimationsModule,
MtxDatetimepickerModule,
MtxNativeDatetimeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
HTML
<div class="login-wrapper" fxLayout="row" fxLayoutAlign="center center">
<mat-card class="box">
<mat-card-header>
<mat-card-title>Planner</mat-card-title>
</mat-card-header>
<form class="example-form">
<mat-card-content>
<mat-form-field class="example-full-width">
<input matInput placeholder="Origin" matInput required>
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="Destination" matInput required>
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-placeholder>Date & Time</mat-placeholder>
<mtx-datetimepicker #datetimePicker
[type]="type"
[mode]="mode"
[multiYearSelector]="multiYearSelector"
[startView]="startView"
[twelvehour]="twelvehour"
[timeInterval]="timeInterval"
[touchUi]="touchUi"
[timeInput]="timeInput"></mtx-datetimepicker>
<input [mtxDatetimepicker]="datetimePicker" [formControl]="datetime" matInput required>
<mtx-datetimepicker-toggle [for]="datetimePicker" matSuffix></mtx-datetimepicker-toggle>
</mat-form-field>
</mat-card-content>
<button mat-stroked-button color="accent" class="btn-block">Search</button>
</form>
</mat-card>
</div>
TS
import { Component, OnInit } from '#angular/core';
import {MtxCalendarView,MtxDatetimepickerMode,MtxDatetimepickerType} from '#ng-matero/extensions/datetimepicker';
import { MTX_DATETIME_FORMATS } from '#ng-matero/extensions/core';
import { UntypedFormControl } from '#angular/forms';
#Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss'],
providers: [
{
provide: MTX_DATETIME_FORMATS,
useValue: {
parse: {
dateInput: 'YYYY-MM-DD',
monthInput: 'MMMM',
yearInput: 'YYYY',
timeInput: 'HH:mm',
datetimeInput: 'YYYY-MM-DD HH:mm',
},
display: {
dateInput: 'YYYY-MM-DD',
monthInput: 'MMMM',
yearInput: 'YYYY',
timeInput: 'HH:mm',
datetimeInput: 'YYYY-MM-DD HH:mm',
monthYearLabel: 'YYYY MMMM',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
popupHeaderDateLabel: 'MMM DD, ddd',
},
},
},
],
})
export class SearchComponent implements OnInit {
type: MtxDatetimepickerType = 'datetime';
mode: MtxDatetimepickerMode = 'auto';
startView: MtxCalendarView = 'month';
multiYearSelector = false;
touchUi = false;
twelvehour = false;
timeInterval = 1;
timeInput = true;
datetime = new UntypedFormControl();
constructor() { }
ngOnInit(): void {
}
}
Question
Do I need to set theme exclusively for mtx-datetimepicker? if yes, How could I do that?

Answer 1

After import modules, you must define a theme.
#use '#ng-matero/extensions' as mtx;
#include mtx.all-component-themes($theme);