title: Angular Material Select - Customize Template
body: <p>We are currently using NG Bootstrap and need to replace it for a variety of reasons.  I am advocating using Angular Material in its place.  However, for the multi-select dropdown we need the output of mat-select to look more like this:</p>
  
  <p><a href="https://i.stack.imgur.com/wRpiL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wRpiL.png" alt="ng-dropdown example"></a></p>
  
  <p>rather than this:</p>
  
  <p><a href="https://i.stack.imgur.com/6Xq5C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Xq5C.png" alt="mat-select example"></a></p>
  
  <p>The thing to note is that each item is a separate widget, with a close link (the x) attached to it.  The link can be clicked, and clicking it removes the item.  </p>
  
  <p>Inspecting the output of the ng-select gives you this output:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ng-value-container"&gt;&lt;div class="ng-placeholder"&gt;Select States...&lt;/div&gt;&lt;!--bindings={
    "ng-reflect-ng-if": "false"
  }--&gt;&lt;!--bindings={
    "ng-reflect-ng-if": "true"
  }--&gt;&lt;!--bindings={
    "ng-reflect-ng-template-outlet-context": "[object Object]",
    "ng-reflect-ng-template-outlet": "[object Object]"
  }--&gt;&lt;!--bindings={
    "ng-reflect-ng-for-of": "[object Object],[object Object"
  }--&gt;&lt;div _ngcontent-c61="" class="ng-value"&gt;&lt;span _ngcontent-c61="" class="ng-value-label"&gt;&lt;i _ngcontent-c61="" class="icon-earth"&gt;&lt;/i&gt; Alabama (AL)&lt;/span&gt;&lt;span _ngcontent-c61="" aria-hidden="true" class="ng-value-icon right"&gt;×&lt;/span&gt;&lt;/div&gt;&lt;div _ngcontent-c61="" class="ng-value"&gt;&lt;span _ngcontent-c61="" class="ng-value-label"&gt;&lt;i _ngcontent-c61="" class="icon-earth"&gt;&lt;/i&gt; Arizona (AZ)&lt;/span&gt;&lt;span _ngcontent-c61="" aria-hidden="true" class="ng-value-icon right"&gt;×&lt;/span&gt;&lt;/div&gt;&lt;div _ngcontent-c61="" class="ng-value"&gt;&lt;span _ngcontent-c61="" class="ng-value-label"&gt;&lt;i _ngcontent-c61="" class="icon-earth"&gt;&lt;/i&gt; California (CA)&lt;/span&gt;&lt;span _ngcontent-c61="" aria-hidden="true" class="ng-value-icon right"&gt;×&lt;/span&gt;&lt;/div&gt;&lt;!----&gt;&lt;!----&gt;&lt;div class="ng-input"&gt;&lt;input role="combobox" type="text" autocomplete="a409ea53b6de" autocorrect="off" autocapitalize="off" aria-expanded="true" aria-owns="a409ea53b6de" aria-activedescendant="aa8ba66e7ecc"&gt;&lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And inspecting the output of the mat-select gives you this output: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="ng-tns-c5-5 ng-star-inserted"&gt;Alabama (AL), Arizona (AZ), California (CA)&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, the latter just outputs a single blob of text, separated by commas.</p>
  
  <p>Looking through the API documentation (<a href="https://material.angular.io/components/select/api" rel="nofollow noreferrer">https://material.angular.io/components/select/api</a>) and examples (<a href="https://material.angular.io/components/select/examples" rel="nofollow noreferrer">https://material.angular.io/components/select/examples</a>) I don't see a way to do this.  Most of the searches I've done on google have produced results pertaining to styling and theming.  I did find this link (<a href="https://stackoverflow.com/questions/53871857/custom-parent-container-for-angular-material-overlay-container">Custom parent container for Angular material overlay container?</a>) but it doesn't go into a lot of detail and I'm not even sure if that's what I'm trying to do.</p>
  
  <p>Has anyone done this?  In ng-bootstrap it's very easy.  Just provide an ng-template with the correct directive, and it will override the default template.  </p>
  
  <p>Thank you.</p>
  
  <p>Aaron</p>