Can't bind to 'mdbCollapse' since it isn't a known property

Topic: Can't bind to 'mdbCollapse' since it isn't a known property of 'div'

Constantin Exari free asked 7 years ago

I copied this code in my angular component

<button class="btn btn-primary waves-light" type="button" (click)="test.toggle()" mdbRippleRadius>
    Toggle collapse
</button>

<div class="" [mdbCollapse]="isCollapsed" #test="bs-collapse">
    <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
</div>

but it doesn't work, it show's me this error: Template parse errors: Can't bind to 'mdbCollapse' since it isn't a known property of 'div'.

milestoneadmin pro commented 6 years ago

I found the same issue, but I wasn't able to solve even after following of below all suggestion. Please help me out with same. Thank you!!!

Damian Gemza staff commented 6 years ago

Dear milestoneadmin, Could you provide me reproduction steps? And please show me your app.module.ts file (or another module where you're using our MDB Angular library). Best Regards, Damian

milestoneadmin pro commented 6 years ago

Here you can see app.module.ts file. import { RouterModule, Routes } from '@angular/router'; import { ToastModule } from './typescripts/pro/alerts/toast/toast.module'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { MDBBootstrapModule } from './typescripts/free/index'; import { MDBBootstrapModulePro } from './typescripts/pro/index'; import { MDBSpinningPreloader } from './typescripts/pro/index'; import { AgmCoreModule } from '@agm/core'; import { AppComponent } from './app.component'; const appRoutes: Routes = [ { path: '', loadChildren: './account/account.module#AccountModule' }, { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' } ]; @NgModule({ declarations: [ AppComponent ], imports: [ RouterModule.forRoot( appRoutes, { enableTracing: true } // <-- debugging purposes only ), BrowserModule, BrowserAnimationsModule, FormsModule, HttpModule, ToastModule.forRoot(), MDBBootstrapModule.forRoot(), MDBBootstrapModulePro.forRoot(), AgmCoreModule.forRoot({ // https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key apiKey: 'Your_api_key' }) ], providers: [MDBSpinningPreloader], bootstrap: [AppComponent], schemas: [NO_ERRORS_SCHEMA] }) export class AppModule { }

Here you can see app.module.ts file.

import { RouterModule, Routes } from '@angular/router';
import { ToastModule } from './typescripts/pro/alerts/toast/toast.module';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MDBBootstrapModule } from './typescripts/free/index';
import { MDBBootstrapModulePro } from './typescripts/pro/index';
import { MDBSpinningPreloader } from './typescripts/pro/index';
import { AgmCoreModule } from '@agm/core';
import { AppComponent } from './app.component';

const appRoutes: Routes = [
  { path: '', loadChildren: './account/account.module#AccountModule' },
  { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }
];

@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 RouterModule.forRoot(
 appRoutes,
 { enableTracing: true } // <-- debugging purposes only
 ),
 BrowserModule,
 BrowserAnimationsModule,
 FormsModule,
 HttpModule,
 ToastModule.forRoot(),
 MDBBootstrapModule.forRoot(),
 MDBBootstrapModulePro.forRoot(),
 AgmCoreModule.forRoot({
 // https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key
 apiKey: 'Your_api_key'
 })
 ],
 providers: [MDBSpinningPreloader],
 bootstrap: [AppComponent],
 schemas: [NO_ERRORS_SCHEMA]
})

export class AppModule { }

Please insert min. 15 characters.

Damian Gemza staff commented 6 years ago

Dear milestoneadmin, Could you please send me your project without node_modules at d.gemza@mdbootstrap.com? It would help me to debug your problem. Best Regards, Damian

milestoneadmin pro commented 6 years ago

I can't provide code, But as I said before I had used same code whichever given in toggle example. version: 5.2.3 Here you go:- https://mdbootstrap.com/angular/advanced/collapse

Damian Gemza staff commented 6 years ago

Dear milestoneadmin, I'm unable to reproduce it on MDB Angular 5.2.3 and on MDB Angular Admin Dashboard 5.2.3. Could you please send me your project without node_modules directory at d.gemza@mdbootstrap.com? I could debug your app and check what's wrong. Best Regards, Damian

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Please show me the code you are using to render collapse component. This is how the correct syntax should look like:

<button class="btn btn-primary waves-light" type="button" (click)="test.toggle()" mdbWavesEffect>
  Toggle collapse
</button>

<div mdbCollapse [isCollapsed]="true" #test="bs-collapse">
  <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
    craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
</div>

Add comment

abadilah free answered 6 years ago

0 0 Best answer

Hi there, Facing the same issue with the [mdbCollapse]. I've included the collapse module and collapseDirective module also.
Can't bind to 'default' since it isn't a known property of 'mdb-accordion'

This is my module:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AdminRoutingModule } from './admin-routing.module';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { CollapseModule, WavesModule } from 'angular-bootstrap-md';

import { AdminComponent } from './admin/admin.component';
import { HeaderComponent } from './header/header.component';
import { ProfileComponent } from './profile/profile.component';
import { AsideComponent } from './aside/aside.component';

@NgModule({
 declarations: [AdminComponent, HeaderComponent, ProfileComponent, AsideComponent],
 imports: [
 CommonModule,
 AdminRoutingModule,
 FontAwesomeModule,
 CollapseModule.forRoot(),
 WavesModule,
 ],
 schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AdminModule { }

But when it display the collapsable is not displaying neat:

Please insert min. 20 characters.

Hi there, Facing the same issue with the [mdbCollapse]. I've included the collapse module and collapseDirective module also. Can't bind to 'default' since it isn't a known property of 'mdb-accordion'

This is my module:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule } from '@angular/common';

import { AdminRoutingModule } from './admin-routing.module'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { CollapseModule, WavesModule } from 'angular-bootstrap-md';

import { AdminComponent } from './admin/admin.component'; import { HeaderComponent } from './header/header.component'; import { ProfileComponent } from './profile/profile.component'; import { AsideComponent } from './aside/aside.component';

@NgModule({ declarations: [AdminComponent, HeaderComponent, ProfileComponent, AsideComponent], imports: [ CommonModule, AdminRoutingModule, FontAwesomeModule, CollapseModule.forRoot(), WavesModule, ], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AdminModule { }

But when it display the collapsable is not displaying neat:

Add comment

Lowisz pro answered 6 years ago

0 0 Best answer

Hi there, Facing the same issue with the [mdbCollapse]. I've included the collapse module and collapseDirective module also.

Can't bind to 'mdbCollapse' since it isn't a known property of 'div'.

Damian Gemza staff commented 6 years ago

Dear Lowisz, Please add schemas: [NO_ERRORS_SCHEMA] into your app.module.ts (or other module where you're using MDB), and let me know. Best Regards, Damian

Lowisz pro commented 6 years ago

Hi Damian, Thanks for the support. After adding the above suggested, [mdbCollapse] started working but still getting the height issue. It's giving height: '0' all the time and not adding the [data-] & [aria-] attributes.

Damian Gemza staff commented 6 years ago

Dear Lowisz, Could you please provide me with the code which you're using and screenshots which show me the actual behavior of collapse? Best Regards, Damian

Add comment

andrews88l pro answered 6 years ago

0 0 Best answer

I'm having the same issue with MDB Pro version 5... Literally copied and pasted the example code and it doesn't work.

Damian Gemza staff commented 6 years ago

Dear Andrews, Please add schemas: [NO_ERRORS_SCHEMA] to your app.module.ts Best Regards, Damian

Lilcoder premium commented 6 years ago

I'm having similar issue with MDB Pro version 5 Error msg: "Identifier 'isCollapsed' is not defined. The component declaration, template variable declarations, and element references do not contain such a member" And [NO_ERRORS_SCHEMA] is already applied app.module.ts

Dawid Adach pro commented 6 years ago

Lili27, could you please check whether the same happens on fresh MDB project?

Lilcoder premium commented 6 years ago

Hi David, yes I just download version "mdb-angular-pro-6.0.1" to test and added the Collapse script, and same issue appear. The project already comes with the statement: import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; in the app.module.ts The collapse will work, but I can't deploy it to Heroku with this kind of error msg "Identifier 'isCollapsed' is not defined. The component declaration, template variable declarations, and element references do not contain such a member"

Dawid Adach pro commented 6 years ago

Dear Lil27, unfortunately, this looks like an issue with Heroku and their deployment. As you mentioned MDB itself works fine. We are not aware of deployment model of Heroku. Please try to contact them, it looks like they were ignoring import flag. Also please provide us with steps to reproduce deployment, we will look into that in next sprint. I also advise to try to install MDB using npm instead of zip file, perhaps that will help.

Lilcoder premium commented 6 years ago

That would be great David if you guys will look into it. And I will contact Heroku in the meantime. Did you want the steps to deploy to Heroku here? Should I submit them someplace else?

Dawid Adach pro commented 6 years ago

You can write them here as an answer, that will be more readable :)

Lilcoder premium commented 6 years ago

Hi David, here's a link to prepare your Angular app for Heroku https://www.codewithjason.com/deploy-angular-cli-webpack-project-heroku/ In addition, here's my settings in package.json { "name": "mdbootstrappro", "version": "5.2.3", "license": "MIT", "scripts": { "ng": "ng", "start": "http-server", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "aot:build": "ng build --prod --sm=false --aot=true --output-path=dist --build-optimizer=false", "pre-commit": "ng lint", "preinstall": "npm install -g http-server", "postinstall": "ng build --aot --target=production && mv dist/* ." },

Please insert min. 15 characters.

Add comment

Witold Tkaczyk free answered 7 years ago

0 0 Best answer

Hi Constantin Exari,

Sorry, I cannot reproduce your error. Would you please send me some code or even your package in order to investigate your error? You can send it to w.tkaczyk@mdbootstrap.com.

Regards

Add comment

Constantin Exari free answered 7 years ago

0 1 Best answer