title: Can't bind to 'icon' since it isn't a known property of 'app-button'
body: <p>I have modal components built with ngx-bootstrap and <code>&lt;app-button&gt;</code> components from myself.
  I created a <code>modal.module.ts</code> file to declare all the modal components to the app. The <code>ButtonComponent</code> is declared in my <code>app.module.ts</code> file to be available everywhere.</p>
  
  <p>modal.module.ts:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { BsModalService } from 'ngx-bootstrap';
  
  import { KeyboardComponent } from '../keyboard/keyboard.component';
  import { AlertModalComponent } from './alert-modal/alert-modal.component';
  import { ConfirmModalComponent } from './confirm-modal/confirm-modal.component';
  import { LanguageModalComponent } from './language-modal/language-modal.component';
  import { KeyboardModalComponent } from './keyboard-modal/keyboard-modal.component';
  
  @NgModule({
    imports: [
      CommonModule,
    ],
    entryComponents: [
      AlertModalComponent,
      ConfirmModalComponent,
      LanguageModalComponent,
      KeyboardModalComponent
    ],
    declarations: [
      KeyboardComponent,
      AlertModalComponent,
      ConfirmModalComponent,
      LanguageModalComponent,
      KeyboardModalComponent
    ]
  })
  export class ModalModule {
  
    constructor(
      private modalService: BsModalService
    ) {
      modalService.config.backdrop = false;
      modalService.config.ignoreBackdropClick = true;
    }
  
  }
  </code></pre>
  
  <p>app.module.ts:</p>
  
  <pre><code>import { ModalModule } from './components/modal/modal.module';
  
  ...
  
  import { AppComponent } from './app.component';
  import { ButtonComponent } from './components/button/button.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      ButtonComponent,
      ...
    ],
    imports: [
      ...
      ModalModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>button.component.ts:</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'app-button',
    templateUrl: './button.component.html',
    styleUrls: ['./button.component.scss']
  })
  export class ButtonComponent {
  
    @Input() icon: string;
    @Input() color: string;
    @Input() label: string;
  
  }
  </code></pre>
  
  <p>alert-modal.component.html:</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
      &lt;p [innerHTML]="message"&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
      &lt;app-button [icon]="'validate'" [color]="'red'" [label]="'OK'" (tap)="validate()"&gt;&lt;/app-button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, I have an error at runtime:</p>
  
  <pre><code>compiler.js:2175 Uncaught Error: Template parse errors:
  Can't bind to 'icon' since it isn't a known property of 'app-button'.
  1. If 'app-button' is an Angular component and it has 'icon' input, then verify that it is part of this module.
  2. If 'app-button' 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. ("
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
      &lt;app-button [ERROR -&gt;][icon]="'validate'" [color]="'red'" [label]="'OK'" (tap)="validate()"&gt;&lt;/app-button&gt;
  &lt;/div&gt;
  "): ng:///ModalModule/AlertModalComponent.html@4:18
  </code></pre>
  
  <p>The <code>icon</code> property is well defined as a property of a <code>&lt;app-button&gt;</code> so I don't see this error as a legit one.</p>