The Angular Material Theme is not being properly displayed on the mtx-datetimepicker component

Issue: While using directives from ng-matero for DateTime with Angular Material for application design, the dateTimepicker element is not applying the angular material theme as desired. https://i.sstatic.net/zPBp3.png

Code Example The app.module.ts file includes the following code:

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 Snippet

<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>

TypeScript (TS) Section

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:

Is it necessary to set a theme exclusively for mtx-datetimepicker? If yes, how can this be accomplished?

Answer №1

It is essential to specify a theme after importing modules.

@use '@ng-matero/extensions' as ext;

@include ext.load-all-themes($theme);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The alignment of image and text next to each other is not functioning as intended

I've been attempting to display an image and text next to each other, but I'm encountering some issues. The current output looks like the figure below: https://i.stack.imgur.com/WxxrS.jpg The desired layout is as shown in the following link: ht ...

Enhancing React components with dynamic background colors for unique elements

I am encountering an issue while using a map in my code. Specifically, I want to set the background of a particular element within the map. The element I am referring to is "item .title". I aim for this element to have a background color like this: https:/ ...

Position a dynamic <div> in the center of the screen

My goal is to design a gallery page with a list of thumbnails, where clicking on a thumbnail will open the related image in a popup div showing its full size. The issue I'm facing is how to center the popup div on the screen, especially when each pic ...

How can I attach :after and :before pseudo-elements to a submit button?

I'm attempting to enhance my submit button with :after/:before elements, but I'm having trouble getting it to work properly. Specifically, I want to add a swipe (Sweep To Right) transition effect on the button from left to right. Similar to - th ...

Numerous lists conveniently consolidated within a single navigation bar

I am currently exploring the functionality of StumbleUpon's navigation bar by attempting to replicate it. My approach involves using 3 lists within 1, structured like this: <nav role="navigation"> <ul id="rightnav"> & ...

changing the breadcrumb item to a dropdown item in a dynamic way

Hey there, I'm currently working on creating a breadcrumb item using Angular. Here is what I have so far: https://i.stack.imgur.com/zt5yX.png I decided to add a dropdown for the breadcrumb item, but I'm facing a challenge: I want to be able to ...

populate a bootstrap column with numerous span elements containing varying numbers on different rows

Wondering if it's possible to have a div with the bootstrap class "column" filled with multiple span elements that may break into more than one line. The challenge lies in making sure that each line of spans stretches and fills the line, even if there ...

Transform the color of Max Mega Menu items on hover with another item in WordPress

Seeking help to change the color of my megamenu item when hovering over other items in the menu. Take a look at this image for reference: I've tried using these CSS styles but it didn't work as expected. #mega-menu-wrap-primary-menu #mega-menu-p ...

Mouse over effect to highlight the crosshair on a table

My code currently enables a crosshair function, but I am looking for a way to limit the highlight effect only within the cursor (hover) area. Instead of highlighting in a "cross" shape, I would like it to show a backward "L" shape. This means that the hig ...

Using an AWS API Gateway, an HTTP client sends a request to access resources

I have a frontend application built with Angular and TypeScript where I need to make an HTTP request to an AWS API Gateway. The challenge is converting the existing JavaScript code into TypeScript and successfully sending the HTTP request. The AWS API gat ...

Achieving the grid-column property as you navigate deeper into the tree

Currently, I am in the process of integrating a CSS design that utilizes grid and grid-column into my Angular application. The design itself is quite effective, structured similar to this: .grid { display: grid; grid-template-columns: repeat(3, 1 ...

Looking to clean up unnecessary <b></b> tags from my Wordpress website - how can I do this?

One of my sites is located at . When inspecting the source code through the browser, I noticed the presence of empty tags. Does anyone know why these empty tags are being generated and how they can be removed? I have thoroughly searched through all files ...

What is the best way to link to this list of options?

#episode-list { padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0,0,0,.8) } input { width: 100%; padding: .5em; font-size: 1.2em; border-radius: 3px; border: 1px solid #d9d9d9 } <div id="epis ...

Ways to conceal HTML tags within a text box

Currently, I am utilizing PHP to extract content from a text file and display it in a textbox. However, I am interested in finding a way to conceal the HTML tags within the textbox (as shown in the image) without deleting them, making them invisible to use ...

clicking on a DIV element

I am trying to trigger a JavaScript function by clicking on a DIV element, but for some reason it is not working as expected. I have gone through various examples provided by the helpful people here, but still can't figure out what I'm doing wron ...

The type 'Observable<boolean>' cannot be assigned to type 'Observable<UserRegistration>'

function completeRegistration(email: string, password: string, firstName: string, lastName: string, location: string): Observable<UserDetails> { let body = JSON.stringify({ email, password, firstName, lastName,location }); let headers = new H ...

What is the best way to customize the appearance of a form element within an angular-schema-form schema without affecting the overall

Currently, I am in the process of constructing a form using the incredible angular-schema-form. Creating the form schema object has been a success so far. My goal is to configure all the form components within the schema using the x-schema-form property in ...

Showing a div with a smooth fade-in effect while switching its display property to inline using jQuery

Currently, I am working on a project that involves implementing a "side pop up". To ensure it doesn't flicker like it does with jQuery's "hide()" method, I want to start by setting the display property to none using CSS. My main question is: - Ho ...

Implementing Azure Active Directory Authentication for Angular 4 or Angular 2 - Retrieving Access Tokens

I'm in the process of authenticating an Angular 4/Angular 2 app with Azure Active Directory to obtain a token code for passing as a Bearer token when calling a REST API. For this purpose, I've utilized 'ng2-adal' available at https://g ...

Unable to access due to CORS policy restriction in Ionic 5 Angular platform

Encountering an error, seeking guidance on the issue. Configuration has been done in proxy.conf.json. Headers with base url have been set in user.service.ts. import { Injectable } from '@angular/core'; import { Http, Headers, RequestOptions } fr ...