Can't bind to 'opened' since it isn't a known property of 'ng-sidebar'.

[hadirsa]

hi, i have imported SidebarModule.forRoot(), in shared module and y shared module is imported in app.module :

@NgModule({
    imports: [ 
        SidebarModule.forRoot()
    ],
    exports: [
    ],
    providers: [ 
    ]
})
export class SharedLibsModule {
}

and i use sample code in my main layout like below:

main.layout.html:

<ng-sidebar-container>

    <!-- A sidebar -->
    <ng-sidebar [(opened)]="_opened">
        <p>Sidebar contents</p>
    </ng-sidebar>

    <!-- Page content -->
    <div ng-sidebar-content>
        <button (click)="_toggleSidebar()">Toggle sidebar</button>
    </div>

</ng-sidebar-container>

main.component.ts:

.
.
   private _opened: boolean = false;
.
.
    private _toggleSidebar() {
        this._opened = !this._opened;
    }
.
.

I run the app and get this error:

Can't bind to 'opened' since it isn't a known property of 'ng-sidebar'.
1. If 'opened' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("meContent" #iframeContent> </div> </div> <sa-footer></sa-footer> <ng-sidebar-container> <ng-sidebar [ERROR ->][(opened)]="_opened"> <p>Sidebar contents</p> </ng-sidebar> <div ng-sidebar-content> <button (click)="): ng:///FRMLayoutModule/FRMNg2MainComponent.html@0:397
'ng-sidebar' is not a known element:
1. If 'ng-sidebar' is an Angular component, then verify that it is part of this module.
2. If 'ng-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("ve" id="iframeContent" #iframeContent> </div> </div> <sa-footer></sa-footer> <ng-sidebar-container> [ERROR ->]<ng-sidebar [(opened)]="_opened"> <p>Sidebar contents</p> </ng-sidebar> <div ng-sidebar-content> <but"): ng:///FRMLayoutModule/FRMNg2MainComponent.html@0:385
'ng-sidebar-container' is not a known element:

I cant understand why i get this error.

[sJohnsonStoever]

The module you've pasted here is SharedLibsModule, is this the module that gets bootstrapped by your main.ts? I tried moving the SidebarModule.forRoot() import to another module imported by the main bootstrapped module and the error that I get now is consistent with what you posted.

As far as I can tell, any module for which you call forRoot() must be imported in app.module and nowhere else.

[hadirsa]

thanks for response.I'm going to check and i will share the result. 👍

[Jiehong]

You probably have to also have to import SidebarModule in your main.module as well as having your SidebarModule.forRoot() in your app.module.

[bramhgupt]

Is ng-sidebar supports Angular 9/10 as I am getting error 'ng-sidebar-container' is not a known element?

> 'ng-sidebar-container' is not a known element:
> 1. If 'ng-sidebar-container' is an Angular component, then verify that it is part of this module.
> 2. If 'ng-sidebar-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component
> to suppress this message.

I am not able to figure out why Angular is throwing such errors when I have added all desired entries in the App Module.

import { SidebarModule,SidebarContainer } from 'ng-sidebar';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,

    WorkerFormComponent,
    TopbarNavComponent,
    TogglerComponent,
    SidebarNavComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SidebarModule.forRoot(),

...]

NG Version Details.

Angular CLI: 10.0.2
Node: 12.18.2
OS: win32 x64

Angular: 10.0.3
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.2
@angular-devkit/build-angular     0.1000.2
@angular-devkit/build-optimizer   0.1000.2
@angular-devkit/build-webpack     0.1000.2
@angular-devkit/core              10.0.2
@angular-devkit/schematics        10.0.2
@angular/cli                      10.0.2
@angular/fire                     6.0.2
@ngtools/webpack                  10.0.2
@schematics/angular               10.0.2
@schematics/update                0.1000.2
rxjs                              6.5.5
typescript                        3.9.6
webpack                           4.43.0