title: How to make custom tags with angular 2?
body: <p>I have a problem with a custom component. The problem is that the link it with the model [(ngModule)] = &quot;value&quot; and gives an error is as follows:</p>
  <pre><code>Unhandled Promise rejection: Template parse errors:
  Can't bind to 'ngModule' since it isn't a known property of 'gpi-input'.
  1. If 'gpi-input' is an Angular component and it has 'ngModule' input, then verify that it is part of this module.
  2. If 'gpi-input' is a Web Component then add &quot;CUSTOM_ELEMENTS_SCHEMA&quot; to the '@NgModule.schemas' of this component to suppress this message.
  (&quot;
  &lt;div&gt;
      &lt;h1&gt;Input:&lt;/h1&gt;
      &lt;gpi-input name=&quot;someValue&quot; [ERROR -&gt;][(ngModule)]=&quot;valueInput&quot;&gt;
          Escriu algu plis!!
      &lt;/gpi-input&gt;
  </code></pre>
  <p>The code components are:</p>
  <pre><code>import { Component, forwardRef } from '@angular/core';
  import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
  
  const noop = () =&gt; {
  };
  
  export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() =&gt; GpiInputComponent),
      multi: true
  };
  
  @Component({
      selector: 'gpi-input',
      template: `&lt;div class=&quot;form-group&quot;&gt;
                      &lt;label&gt;
                          &lt;ng-content&gt;&lt;/ng-content&gt;
                      &lt;/label&gt;
                      &lt;input [(ngModel)]=&quot;value&quot; class=&quot;form-control&quot;         (blur)=&quot;onBlur()&quot;&gt;
                  &lt;/div&gt;`,
      providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
  
  })
  export class GpiInputComponent implements ControlValueAccessor {
  
      //The internal data model
      private innerValue: any = '';
  
      //Placeholders for the callbacks which are later provided
      //by the Control Value Accessor
      private onTouchedCallback: () =&gt; void = noop;
      private onChangeCallback: (_: any) =&gt; void = noop;
  
      //get accessor
      get value(): any {
          return this.innerValue;
      };
  
      //set accessor including call the onchange callback
      set value(v: any) {
          if (v !== this.innerValue) {
              this.innerValue = v;
              this.onChangeCallback(v);
          }
      }
  
      //Set touched on blur
      onBlur() {
          this.onTouchedCallback();
      }
  
      //From ControlValueAccessor interface
      writeValue(value: any) {
          if (value !== this.innerValue) {
              this.innerValue = value;
          }
      }
  
      //From ControlValueAccessor interface
      registerOnChange(fn: any) {
          this.onChangeCallback = fn;
      }
  
      //From ControlValueAccessor interface
      registerOnTouched(fn: any) {
          this.onTouchedCallback = fn;
      }
  
  }
  </code></pre>
  <p>And the app.module.ts</p>
  <pre><code>import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  import { AppComponent } from './app.component';
  import { GpiInputComponent } from &quot;../formularis/input/gpi-input&quot;;
  
  @NgModule({
      imports: [BrowserModule, FormsModule, NgbModule.forRoot()],
      declarations: [AppComponent, GpiInputComponent],
      bootstrap: [AppComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  
  export class AppModule { }
  </code></pre>
  <p>app.component:</p>
  <pre><code>import { Component } from '@angular/core';
  
  import '../../public/css/styles.css';
  
  @Component({
      selector: 'my-app',
      templateUrl: './src/app/app.component.html',
      //styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      valueInput: string = &quot;&quot;;
  }
  </code></pre>
  <p>Can anyone dirme where the problem or give me a reference of what could be please. Thank you!! =)</p>
  <blockquote>
  <h2>Note:</h2>
  <p>I've seen other questions to the community CUSTOM_ELEMENTS_SCHEMA adds the file to app.module @NgModule within shcemas, but the problem persists.</p>
  </blockquote>