title: Angular TemplateRefs and Undefined Class Variables
body: <p>I'm trying to use <code>TemplateRef</code>s in my Angular component so that the user of the package can get the benefit of the component but define the styles on their own. <a href="https://blog.angularindepth.com/use-ng-template-c72852c37fba" rel="nofollow noreferrer">This is a good example of what I'm talking about</a>. The component I'm working on is <a href="https://www.npmjs.com/package/angular-tag-select" rel="nofollow noreferrer">this one</a>, from the <code>angular-tag-select</code> package. It takes a list of potential "tags" and allows the user to select certain ones from the list. Currently, you're limited to the default styles, and you have to pass in all the link classes, and it's really hard to overwrite the styles. By using <code>ng-template</code> and <code>TemplateRef</code>, you could get all the benefits of the tag select, with the logic being taken care of in the <code>TagSelect</code> component but you get to decide the layout.</p>
  
  <p>I think I've gotten a good start on it, by adding the following to the <code>TagSelect</code> component:</p>
  
  <pre><code>&lt;ng-container *ngTemplateOutlet="layoutTemplate; context: ctx"&gt;&lt;/ng-container&gt;
  </code></pre>
  
  <p>The <code>ctx</code> variable for the context is the following:</p>
  
  <pre><code>public ctx: any = {
    tagsSelectedAtStart: this.tagsSelectedAtStart,
    tagsToSelect: this.tagsToSelect,
    tagMapping: this.tagMapping,
    tagItemIdentifierPlural: this.tagItemIdentiferPlural,
    canDynamicallyAdd: this.canDynamicallyAdd,
    possibleTags: this.possibleTags,
    selectedTags: this.selectedTags,
    filterText: this.filterText,
    filteredTagsLength: this.filteredTagsLength,
    fns: { 
      toggleTag: this.toggleTag
    }
  }
  </code></pre>
  
  <p>I'm basically putting all the <code>@Input</code> variables and local class variables for the component on the context object. I'll go through and clean that out as I figure out what exactly needs to be there and doesn't need to be there.</p>
  
  <p>One of the inputs on the <code>TagSelect</code> component is a list of possible tags that can be selected. I have provided an array of possible tags to select, and while I can confirm that it is passed in to the component, it's not output to the parent component to list out on the screen. If I pre-populate the possible tags list inside the <code>TagSelect</code> component with an item, then I 
  can see those pre-populated items, but not the ones that are passed in, in the parent component. Also, when toggling a tag in the parent component, there is an error because the array that we save the selected tags to is <code>undefined</code>. But that array is defaulted to an empty array on component initialization.</p>
  
  <p>It's like the component is initialized, but then the state of all the class variables is lost; I don't know how else to explain it.</p>
  
  <p>I know this is probably really confusing, but I'm testing this functionality <a href="https://stackblitz.com/edit/template-ref-examples" rel="nofollow noreferrer">on StackBlitz here</a>. If you have any questions that I can clear up, let me know, but that's the point I'm stuck at as of now.</p>