Dropdown Checkbox does not react when clicking on it

Sebastian Jelsch commented a year ago

I am so sorry, but I just cannot make it work. I think I followed all the necessary steps from the installation guide and I don't know what else I should do.

Here are some important files: app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule} from '@angular/common/http';

import { AppComponent } from './app.component';
import { QuizComponent } from './quiz/quiz.component';
import { TopicsComponent } from './topics/topics.component';
import { QuestionsComponent } from './topics/sections/questions/questions.component';
import { AnalyticsComponent } from './analytics/analytics.component';
import { HeaderComponent } from './header/header.component';
import { DropdownDirective } from './shared/dropdown.directive';
import { SectionsComponent } from './topics/sections/sections.component';
import { HomeComponent } from './home/home.component';
import { TopicsCreateComponent } from './topics/topics-create/topics-create.component';
import { SectionsCreateComponent } from './topics/sections/sections-create/sections-create.component';
import { QuestionsCreateComponent } from './topics/sections/questions/questions-create/questions-create.component';
import { MdbCheckboxModule } from 'mdb-angular-ui-kit/checkbox';
import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';

@NgModule({
  declarations: [
    AppComponent,
    QuizComponent,
    TopicsComponent,
    QuestionsComponent,
    AnalyticsComponent,
    HeaderComponent,
    DropdownDirective,
    SectionsComponent,
    HomeComponent,
    TopicsCreateComponent,
    SectionsCreateComponent,
    QuestionsCreateComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule,
    MdbCheckboxModule,
    MdbDropdownModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json

{
  "name": "quiz-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.0.0",
    "@angular/cdk": "^16.0.0",
    "@angular/common": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@angular/forms": "^16.2.4",
    "@angular/platform-browser": "^16.0.0",
    "@angular/platform-browser-dynamic": "^16.0.0",
    "@angular/router": "^16.0.0",
    "@fortawesome/fontawesome-free": "^6.4.2",
    "bootstrap": "^5.0.0",
    "mdb-angular-ui-kit": "^5.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.0.5",
    "@angular/cli": "~16.2.1",
    "@angular/compiler-cli": "^16.0.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~5.0.2"
  }
}

styles.scss

@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "@fortawesome/fontawesome-free/scss/solid.scss";
@import "@fortawesome/fontawesome-free/scss/regular.scss";
@import "@fortawesome/fontawesome-free/scss/brands.scss";

@import "mdb-angular-ui-kit/assets/scss/mdb.scss";

.border-red {
    border-color: red !important;
}

.error-text {
    font-size: 12px; 
    color: red;
}

.custom-button {
    width: 50%;
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss"
    }
  },
  "projects": {
    "quiz-app": {
      "projectType": "application",
      "schematics": {
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/quiz-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css", 
              "node_modules/bootstrap/dist/css/bootstrap.min.css"      
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "quiz-app:build:production"
            },
            "development": {
              "browserTarget": "quiz-app:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "quiz-app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

Your help is highly appreciated!

Arkadiusz Idzikowski staff commented a year ago

The MDB Angular configuration looks correct, I could not find any errors in the code you provided. Bootstrap and Font Awesome styles imports should no longer be needed in the angular.json styles array because these styles are already imported in the styles.scss file (we import Bootstrap styles internally in mdb.scss).

Did you also update the component HTML code after switching to MDB Angular? The code you mentioned in the first post will work only in MDB Standard. In MDB Angular version you need to use slightly different syntax that you can find in our documentation:

Dropdown: https://mdbootstrap.com/docs/angular/components/dropdowns/

Checkbox: https://mdbootstrap.com/docs/angular/forms/checkbox/