Hello everyone, I'm fairly new to working with Angular and I've been trying to implement expanding sections in my application by following the example provided in this link. However, I'm facing an issue where the underline is not displayed when I click on the input field.
Here is the HTML code in my component:
<mat-accordion class="example-headers-align">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>{{ SECTION_HEADER_GENERAL_TITLE }}</mat-panel-title>
<mat-panel-description>
<mat-icon>{{ SECTION_HEADER_GENERAL_ICON }}</mat-icon>
{{ SECTION_HEADER_GENERAL_DESCRIPTION }}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field appearance="fill">
<mat-label>{{ GENERAL_FIELD_NAME_LABEL }}</mat-label>
<input matInput >
</mat-form-field></mat-expansion-panel> </mat-accordion>
Upon inspecting the element, it appears that the underline is disabled for some reason as shown in this image. Additionally, you can see how the input field looks like in Firefox in this image.
My component.scss file is currently empty, so there are no specific CSS styles applied to the component.
app.module.ts:
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './components/main-app/app.component';
import { LoginComponent } from './components/login/login.component';
import { FlexLayoutModule } from "@angular/flex-layout";
import { LayoutModule } from '@angular/cdk/layout';
... (remaining module imports and configurations)
Package.json:
"name": "ca-application",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
... (remaining scripts)
},
"private": true,
"dependencies": {
... (list of dependencies)
},
"devDependencies": {
... (list of dev dependencies)
}
}
If anyone could provide some insights on what I might be doing wrong in this scenario, I would greatly appreciate it. Thank you!