Giters

sebaferreras / Ionic3-MultiLevelSideMenu

Ionic 3 demo of a two-level side menu.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

adding the component to project

sirin8 opened this issue · comments

commented

Hi,

My scenario is

  1. Login to application
  2. Homapage should display the MultiLevelSideMenu in the Home Page.

I tried

  1. copied the shared component folder into my project.

  2. copied the app.component.ts to my project.

  3. copied the below code into my home.html
    <ion-menu persistent="true" [content]="content" (ionClose)="collapseMenuOptions()">


    {{ (sideMenuSettings.accordionMode ? 'Accordion' : 'Default') + ' menu' }}

     <!-- Side Menu -->
 <side-menu-content [settings]="sideMenuSettings" [options]="options" (selectOption)="selectOption($event)"></side-menu-content>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false">

Getting error below
Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'settings' since it isn't a known property of 'side-menu-content'.

  1. If 'side-menu-content' is an Angular component and it has 'settings' input, then verify that it is part of this module.

  2. If 'side-menu-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

     <!-- Side Menu -->
 <side-menu-content [ERROR ->][settings]="sideMenuSettings" [options]="options" (selectOption)="selectOption($event)"></side-menu-c"): ng:///HomePageModule/HomePage.html@67:21

Can't bind to 'options' since it isn't a known property of 'side-menu-content'.

  1. If 'side-menu-content' is an Angular component and it has 'options' input, then verify that it is part of this module.

  2. If 'side-menu-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

     <!-- Side Menu -->
 <side-menu-content [settings]="sideMenuSettings" [ERROR ->][options]="options" (selectOption)="selectOption($event)"></side-menu-content>

"): ng:///HomePageModule/HomePage.html@67:51
'side-menu-content' is not a known element:

  1. If 'side-menu-content' is an Angular component, then verify that it is part of this module.

  2. If 'side-menu-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

     <!-- Side Menu -->
 [ERROR ->]<side-menu-content [settings]="sideMenuSettings" [options]="options" (selectOption)="selectOption($ev"): ng:///HomePageModule/HomePage.html@67:2

Error: Template parse errors:
Can't bind to 'settings' since it isn't a known property of 'side-menu-content'.

  1. If 'side-menu-content' is an Angular component and it has 'settings' input, then verify that it is part of this module.

  2. If 'side-menu-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

     <!-- Side Menu -->
 <side-menu-content [ERROR ->][settings]="sideMenuSettings" [options]="options" (selectOption)="selectOption($event)"></side-menu-c"): ng:///HomePageModule/HomePage.html@67:21

Can't bind to 'options' since it isn't a known property of 'side-menu-content'.

  1. If 'side-menu-content' is an Angular component and it has 'options' input, then verify that it is part of this module.

  2. If 'side-menu-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

     <!-- Side Menu -->
 <side-menu-content [settings]="sideMenuSettings" [ERROR ->][options]="options" (selectOption)="selectOption($event)"></side-menu-content>

"): ng:///HomePageModule/HomePage.html@67:51
'side-menu-content' is not a known element:

  1. If 'side-menu-content' is an Angular component, then verify that it is part of this module.

  2. If 'side-menu-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

     <!-- Side Menu -->
 [ERROR ->]<side-menu-content [settings]="sideMenuSettings" [options]="options" (selectOption)="selectOption($ev"): ng:///HomePageModule/HomePage.html@67:2

    at syntaxError (http://localhost:8101/build/vendor.js:80553:34)
    at TemplateParser.parse (http://localhost:8101/build/vendor.js:91791:19)
    at JitCompiler._compileTemplate (http://localhost:8101/build/vendor.js:105985:39)
    at http://localhost:8101/build/vendor.js:105904:62
    at Set.forEach ()
    at JitCompiler._compileComponents (http://localhost:8101/build/vendor.js:105904:19)
    at http://localhost:8101/build/vendor.js:105791:19
    at Object.then (http://localhost:8101/build/vendor.js:80542:143)
    at JitCompiler._compileModuleAndComponents (http://localhost:8101/build/vendor.js:105790:26)
    at JitCompiler.compileModuleAsync (http://localhost:8101/build/vendor.js:105719:37)
    at c (http://localhost:8101/build/polyfills.js:3:19132)
    at Object.reject (http://localhost:8101/build/polyfills.js:3:18554)
    at NavControllerBase._fireError (http://localhost:8101/build/vendor.js:44355:16)
    at NavControllerBase._failed (http://localhost:8101/build/vendor.js:44343:14)
    at http://localhost:8101/build/vendor.js:44398:59
    at t.invoke (http://localhost:8101/build/polyfills.js:3:14356)
    at Object.onInvoke (http://localhost:8101/build/vendor.js:4247:33)
    at t.invoke (http://localhost:8101/build/polyfills.js:3:14296)
    at r.run (http://localhost:8101/build/polyfills.js:3:9523)
    at http://localhost:8101/build/polyfills.js:3:19622
    Ionic Framework: 3.7.1
    Ionic App Scripts: 3.0.0
    Angular Core: 4.4.3
    Angular Compiler CLI: 4.4.3
    Node: 8.1.2
    OS Platform: Windows 7
    Navigator Platform: Win32
    User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64)

Please can you help me how to use the component in my scenario.

commented

Hi. Seems like you forgot to add the component to the declarations array of your AppModule (in the app.module.ts file):

import { SideMenuContentComponent } from '../path/to/side-menu-content.component';

@NgModule({
  declarations: [
    // ...
    SideMenuContentComponent
  ],
  // ...
})
export class AppModule { }

I'll close this issue seems is not related to the component itself. Feel free to re-open it if needed. Thanks :)