I am using Angular 7 with Bootstrap 4. I am getting below error in console.
Uncaught Error: Template parse errors: 'mdb-icon' is not a known element:
- If 'mdb-icon' is an Angular component, then verify that it is part of this module.
- If 'mdb-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("class="table-add float-right mb-3 mr-2"> [ERROR ->] "): ng:///AppModule/AppComponent.html@9:10
app.module.ts-
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatTableModule, MatCheckboxModule } from '@angular/material'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MatTableModule,
MatCheckboxModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
app.component.html
<div class="card">
<h3 class="card-header text-center font-weight-bold text-uppercase py-4">Editable table</h3>
<div class="card-body">
<div id="table" class="table-editable">
<span class="table-add float-right mb-3 mr-2">
<a class="text-success" (click)="add()">
<mdb-icon fas icon="plus" size="2x"></mdb-icon>
</a>
</span>
<table class="table table-bordered table-responsive-md table-striped text-center">
<tr>
<th class="text-center">Person Name</th>
<th class="text-center">Age</th>
<th class="text-center">Company Name</th>
<th class="text-center">Country</th>
<th class="text-center">City</th>
<th class="text-center">Sort</th>
<th class="text-center">Remove</th>
</tr>
<tr *ngFor="let person of personList; let id = index">
<td>
<span (keyup)="changeValue(id, 'name', $event)" (blur)="updateList(id, 'name', $event)" contenteditable="true">{{person.name}}</span>
</td>
<td>
<span contenteditable="true" (keyup)="changeValue(id, 'age', $event)" (blur)="updateList(id, 'age', $event)">{{person.age}}</span>
</td>
<td>
<span contenteditable="true" (keyup)="changeValue(id, 'companyName', $event)" (blur)="updateList(id, 'companyName', $event)">{{person.companyName}}</span>
</td>
<td>
<span contenteditable="true" (keyup)="changeValue(id, 'country', $event)" (blur)="updateList(id, 'country', $event)">{{person.country}}</span>
</td>
<td>
<span contenteditable="true" (keyup)="changeValue(id, 'city', $event)" (blur)="updateList(id, 'city', $event)">{{person.city}}</span>
</td>
<td>
<span class="table-up">
<a class="indigo-text">
<mdb-icon fas icon="long-arrow-alt-up"></mdb-icon>
</a>
</span>
<span class="table-down">
<a class="indigo-text">
<mdb-icon fas icon="long-arrow-alt-down"></mdb-icon>
</a>
</span>
</td>
<td>
<span class="table-remove">
<button type="button" mdbBtn color="danger" rounded="true" size="sm" class="my-0" (click)="remove(id)">Remove</button>
</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- Editable table -->
<router-outlet></router-outlet>
angular.json-
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"AdminApp": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/AdminApp",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [],
"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "AdminApp:build"
},
"configurations": {
"production": {
"browserTarget": "AdminApp:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "AdminApp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"AdminApp-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "AdminApp:serve"
},
"configurations": {
"production": {
"devServerTarget": "AdminApp:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "AdminApp"
}
app.module.ts. - Antoine Clavijo