title: Angular 6/7 library components - proper way to provide formGroup input?
body: <p><strong>Update 3</strong></p>
  
  <p>I worked through making my library component implement a CVA as suggested by @Ingo, but I discovered that since my component wraps @ng-select/ng-select, some of the requisite functions broke the basic functionality of ng-select.  Namely, when selecting a value from the item list, it would populate the value but it would remain hidden.  Removing all of the required CVA methods makes a working library component, but the challenge of surfacing the selected value in the calling form remains for me (still working on that).</p>
  
  <p>Alternately, adding an Event Emitter and defining an @Output seemed to run into a similar situation where attempting to intercept the change event in the ng-select results in breaking it.  It could very well be ng-select is a poor candidate for embedding in a library component.  </p>
  
  <p><strong>Update 2</strong></p>
  
  <p>From an abundance of sources, it seems like using @Output and EventEmitter is the correct answer to this.  If nobody else cares to offer an answer I will write one up when I have this all working and post then.</p>
  
  <hr>
  
  <p><strong>Original Question</strong></p>
  
  <p>I decided to start trying out the Angular 6 library feature but I've upgraded to the Angular 7 CLI.  I don't think that matters but I'm pretty green yet with Angular development.  </p>
  
  <p>The component I want to make into a library is a form control built on ng-select.  It receives the formGroup from the parent form component via the parent input.</p>
  
  <pre><code>&lt;div [formGroup]="parent" _ngcontent-ikt-1 class="container"&gt;
    &lt;ng-select 
      [items]="peopleBuffer"  
      bindLabel="text"
      bindValue="id"  
      [typeahead]="input$"     
      formControlName="assocNumber" 
      #select&gt;
        &lt;ng-template ng-option-tmp let-item="item" let-search="searchTerm"&gt;
          &lt;span [ngOptionHighlight]="search"&gt;{{item?.text}}&lt;/span&gt;
        &lt;/ng-template&gt;
    &lt;/ng-select&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>The .ts file for this has parent as an @Input()</p>
  
  <pre><code>@Input() parent: FormGroup;
  </code></pre>
  
  <p>And in the parent form component, I mount the control like this</p>
  
  <pre><code>&lt;app-lookuplist _nghost-ikt-1
      [parent]="form"&gt;
  &lt;/app-lookuplist&gt;
  </code></pre>
  
  <p>In the parent form .ts file, form is of type FormGroup and is constructed when @ngOnInit is called.   In a self contained project, this works fine.</p>
  
  <p><strong>My big question is</strong>, though, <em>what is the proper way to abstract this relationship</em>?  </p>
  
  <p>Should I be using a schematic rather than a library?  Or is there a proper way to expose this input so that this will build initially? I could put it into a test harness and provide that input like the self contained app, but at build time, it produces an error you're all probably very familiar with: </p>
  
  <blockquote>
    <p>Can't bind to 'formGroup' since it isn't a known property of 'div'.</p>
  </blockquote>
  
  <p>I followed several different tutorials which all seem to follow the same general structure.</p>
  
  <p><a href="https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5" rel="nofollow noreferrer">https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5</a></p>
  
  <p><a href="https://angular.io/guide/creating-libraries" rel="nofollow noreferrer">https://angular.io/guide/creating-libraries</a>  ... to name two  I suspect the answer is here but my understanding is still in its infancy on this subject.</p>
  
  <p>All help and instruction appreciated.</p>
  
  <p><strong>Update</strong></p>
  
  <p>The second link I provided above seems to offer the opinion that inputs should be stateless... </p>
  
  <blockquote>
    <p>To make your solution reusable, you need to adjust it so that it does
    not depend on app-specific code. Here are some things to consider in
    migrating application functionality to a library.</p>
    
    <p>Declarations such as components and pipes should be designed as
    stateless, <strong>meaning they don’t rely on or alter external variables</strong>.</p>
  </blockquote>
  
  <p>(emphasis added).  What I had been doing is making this input part of the form and then getting the values from the form on submit.  It sounds rather like I should invert this so that the library component emits an event, as in <a href="https://stackoverflow.com/a/52432632/2266428">this answer</a>.  The question remains if this is the best way.  It seems more logical to handle the values of the library component via an event.</p>