title: How to reuse angular 4 component
body: <p>I'm using in my project some components from primeNG (<a href="https://www.primefaces.org/primeng" rel="nofollow noreferrer">https://www.primefaces.org/primeng</a>). These components have its own properties and events. </p>
  
  <p>I may customize these components sometime, so I'm creating my own components importing these components, but when accessing my components I can't use the properties and events of the primeng components.</p>
  
  <p>Am I reusing the components correctly? How is the correct way to have reusable components in a Angular 4 project?</p>
  
  <p>For better understanding:</p>
  
  <p>I have a component called checkbox</p>
  
  <p>.HTML
  </p>
  
  <pre><code>&lt;div&gt;
      &lt;p-checkbox [ngModel]="check" (ngModelChange)="onChange($event)"  binary="true"&gt;&lt;/p-checkbox&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.TS</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
  
  
  @Component({
    selector: 'app-input-checkbox',
    templateUrl: './checkbox.component.html',
  
  })
  
  export class CheckBoxComponent implements OnInit {
  
    @Input()  check: boolean;
    @Output() checkChange: EventEmitter&lt;boolean&gt; = new EventEmitter();
  
    onChange($event) {
        this.check = $event;
        this.checkChange.emit($event);
    }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>And I can reuse this way:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;app-input-checkbox [(check)]="input.read"&gt;  &lt;/app-input-checkbox&gt;
  </code></pre>
  
  <p>But I cannot use the primeng properties like disabled this way</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;app-input-checkbox [(check)]="input.read" [disabled]="true"&gt;  &lt;/app-input-checkbox&gt;
  </code></pre>
  
  <p>How is the right way to use all properties from primeng?</p>
  
  <p>App Module:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { AppRoutingModule } from './app.routing.module';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpModule } from '@angular/http';
  import { RouterModule } from '@angular/router';
  import { FormsModule } from '@angular/forms'; // &lt;-- NgModel lives here
  // import {NgbModule} from '@ng-bootstrap/ng-bootstrap'
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  
  
  import {
    InputTextModule, CheckboxModule, DropdownModule,
    ToolbarModule, SpinnerModule,
    ButtonModule,
    AccordionModule,
    DialogModule,
    InputTextareaModule} from 'primeng/primeng';
  import { AppComponent } from './app.component';
  
  // Shared Folder
  import { NavBarComponent } from './shared/nav-bar/nav-bar.component';
  import { HeaderComponent } from './shared/header/header.component';
  import { CheckBoxComponent } from './shared/input/checkbox/checkbox.component';
  import { InputTextComponent } from './shared/input/text/text.component';
  
  
  import { UserPermissionsComponent } from './components/user-permissions/user-permissions.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      NavBarComponent,
      HeaderComponent,
      InputTextComponent,
      CheckBoxComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      AppRoutingModule,
      InputTextModule,
      CheckboxModule,
      DropdownModule,
      ToolbarModule,
      ButtonModule,
      AccordionModule,
      SpinnerModule,
      InputTextareaModule,
      HttpModule,
      DialogModule,
      RouterModule.forRoot([
        {
          path: 'administration',
          component: AccordionAdministrationComponent
        },
        {
          path: 'permission',
          component: AccordionPermissionComponent
        }
      ]),
      FormsModule, // &lt;-- import the FormsModule before binding with [(ngModel)]
      // NgbModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>