lundi 20 juin 2022

Mat-Checkbox not working: What could the problem be?

This is what I tried doing:


<h1 mat-dialog-title> Service settings </h1>
<div class="inputgrid">
    <label for="visualizationInput"> Visualization server address </label>
    <input id="visualizationInput" matInput type="text" name="visualization" [value]="server"
        (input)="server = $event.target.value">
    <label for="lookupInput"> Assembly service address </label>
    <input id="lookupInput" matInput type="text" name="lookup" [value]="lookup" (input)="lookup = $event.target.value">
    <label for="gatewayInput"> API gateway address </label>
    <input id="gatewayInput" matInput type="text" name="gateway" [value]="gateway"
        (input)="gateway = $event.target.value">
    <input type="checkbox" id="gltf" (click)="ShowGLTFDataFormat()" /> Activate GLTF Data Transfer Format
</div>
    <mat-checkbox (change)="ShowGLTFDataFormat()">Activate GLTF Data Transfer Format</mat-checkbox>
<div mat-dialog-actions>
    <button mat-button (click)="onNoClick()">Discard</button>
    <button mat-button cdkFocusInitial (click)="updateAddresses()">Save</button>
</div>

My module.ts looks somewhat like this.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
    exports: [
        A11yModule,
        ClipboardModule,
        CdkStepperModule,
        CdkTableModule,
        CdkTreeModule,
        DragDropModule,
        MatAutocompleteModule,
        MatBadgeModule,
        MatBottomSheetModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatDividerModule,
        MatExpansionModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        MatTreeModule,
        MatFormFieldModule,
        OverlayModule,
        PortalModule,
        ScrollingModule,
    ]
})
export class MaterialModule { }

But I keep getting this error: 5 - error NG8001: 'mat-checkbox' is not a known element:

  1. If 'mat-checkbox' is an Angular component, then verify that it is part of this module.
  2. If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

13 <mat-checkbox (change)="ShowGLTFDataFormat()">Activate GLTF Data Transfer Format

I don't know what's wrong and I would extremely appreciate any help whatsoever about this as I am new to coding and I need this done as soon as possible.




Aucun commentaire:

Enregistrer un commentaire