0

I have an issue with Angular2 project.
I have two components, Departments component and Full-Layout component.
I'm trying to pass data from Full-Layout component to Departments by using Input().

full-layout.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './full-layout.component.html',
})
export class FullLayoutComponent implements OnInit {
  public disabled:boolean = false;
  public status:{isopen:boolean} = {isopen: false};

  constructor (

  ) { }

  ngOnInit (

  ): void { }


  dropDownItems = [
    { routerLink: '/departments',               name: 'Artshums' },
    { routerLink: '/components/social-buttons', name: 'Dentistry' },
    { routerLink: '/components/cards',          name: 'Law' },
    { routerLink: '/components/forms',          name: 'IOPPN' },
    { routerLink: '/components/modals',         name: 'LSM' },
    { routerLink: '/departments',               name: 'NMS' },
    { routerLink: '/components/tables',         name: 'Nursing' },
    { routerLink: '/components/tabs',           name: 'SSPP' },
    { routerLink: '/components/tabs',           name: 'Health' }
  ];
}

full-layout.component.html

<li class="nav-item" *ngFor="let item of dropDownItems">
    <a #clicked class="nav-link" routerLinkActive="active" [routerLink]="[item.routerLink]" (click)="onClick(clicked)">
    <i class="icon-puzzle"></i>{{item.name}}
      <app-departments [valueToPass] = "item"></app-departments>
    </a>
</li>

Departments.component.ts

import {Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'app-departments',
  templateUrl: './departments.component.html',
  inputs: ['valueToPass']
})
export class DepartmentsComponent implements OnInit {
  @Input() valueToPass;
  public _departments;
  constructor () { }
  ngOnInit() {
    console.log(this.valueToPass.name);
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';
import { DropdownModule } from 'ng2-bootstrap/dropdown';
import { TabsModule } from 'ng2-bootstrap/tabs';
import { NAV_DROPDOWN_DIRECTIVES } from './shared/nav-dropdown.directive';

import { ChartsModule } from 'ng2-charts/ng2-charts';
import { SIDEBAR_TOGGLE_DIRECTIVES } from './shared/sidebar.directive';
import { AsideToggleDirective } from './shared/aside.directive';
import { BreadcrumbsComponent } from './shared/breadcrumb.component';
import { MaterialModule } from '@angular/material';

import 'hammerjs';
// Routing Module
import { AppRoutingModule } from './app.routing';

// Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
import {HttpModule, JsonpModule} from "@angular/http";
import {DepartmentsComponent} from "./components/departments/departments.component";
import {DepartmentsModule} from "./components/departments/departments.module";
@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    DropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    MaterialModule.forRoot(),
    HttpModule,
    JsonpModule,
    DepartmentsModule
  ],
  declarations: [
    AppComponent,
    FullLayoutComponent,
    SimpleLayoutComponent,
    NAV_DROPDOWN_DIRECTIVES,
    BreadcrumbsComponent,
    SIDEBAR_TOGGLE_DIRECTIVES,
    AsideToggleDirective,
    DepartmentsComponent
  ],
  providers: [{
    provide: LocationStrategy,
    useClass: HashLocationStrategy
  }],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

But I get the following error:

Can't bind to 'valueToPass' since it isn't a known property of 'app-departments'.

  • If 'app-departments' is an Angular component and it has 'valueToPass' input, then verify that it is part of this module.
  • If 'app-departments' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("cked)">

How can I fix this issue?

Faegy
  • 942
  • 1
  • 12
  • 29
  • Have you verified that DepartmentsComponent is part of the angular module (i.e. is in the `declarations` of the NgModule), as the error message suggests? Also, why do you have `inputs: ['valueToPass']`? The Input decorator is enough. – JB Nizet Feb 16 '17 at 22:55
  • Ig i do mention it. I get this error DepartmentsComponent is part of the declarations of 2 modules: AppModule and DepartmentsModule! @JBNizet – Jeroen Keppens Feb 16 '17 at 22:59
  • Then remove it from one of them. – JB Nizet Feb 16 '17 at 23:00
  • But if i do remove from one of them. I get this error: Component DepartmentsComponent is not part of any NgModule or the module has not been imported into your module. @JBNizet – Jeroen Keppens Feb 16 '17 at 23:04
  • Then it probably means you forgot to add DepartmentsModule to the imports of AppModule, as the error message says. It would be much easier to answer your question if you posted all the relevant code and errors. – JB Nizet Feb 16 '17 at 23:06
  • i did add it. @JBNizet Ok ill add everything – Jeroen Keppens Feb 16 '17 at 23:06
  • I don't see any DepartmentsComponentin your AppModule. And I don't see any imported DepartmentsModule either. – JB Nizet Feb 16 '17 at 23:17
  • @JBNizet My problem here is, that even though I add it. I get the error: Component DepartmentsComponent is not part of any NgModule or the module has not been imported into your module. Check my edited app.module.ts – Jeroen Keppens Feb 16 '17 at 23:22
  • Previously, you said you had the error "DepartmentsComponent is part of the declarations of 2 modules", which has a much bigger chance of happening with the new code you posted, since now you're declaring the component in AppModule, and **probably** also in DepartmentsModule, that you didn't post. – JB Nizet Feb 16 '17 at 23:27
  • What Im confused about is that im only declairing them in appModule. No where else? @JBNizet – Jeroen Keppens Feb 16 '17 at 23:29
  • Take a step back. Make sure the component is declared once and only once. Then edit your question to post **all** the relevant code you're really using, and the actual error you get with that code. – JB Nizet Feb 16 '17 at 23:33

0 Answers0