title: How to hide certain characters from selected option's label in angular 5?
body: <p>I am using angular material select in angular 5 framework like this.</p>
  
  <pre><code>&lt;mat-form-field&gt;
     &lt;mat-select (change)="viewdropdownchange($event.target.value)" [(ngModel)]='this.current_view_id'&gt;
  
  &lt;mat-option *ngFor="let viewname of secondMenu;" value={{viewname.id}}&gt;  
   &lt;span&gt;{{viewname.value}}&lt;/span&gt;
    &lt;mat-chip-list style="float: right;margin-top: 7px"&gt;
    &lt;mat-chip style="background-color: #3f51b5;color: #fff;"&gt;Edit &lt;/mat-chip&gt;
    &lt;mat-chip  style=" background-color: #ff4081;color: #fff;"&gt;Clone&lt;/mat-chip&gt;
    &lt;mat-chip     style="background-color: #f44336;color: #fff;"&gt;Delete&lt;/mat-chip&gt;
  &lt;/mat-chip-list&gt;
  
  
  &lt;/mat-option&gt;
  
     &lt;/mat-select&gt;
  
  &lt;/mat-form-field&gt; 
  </code></pre>
  
  <p>But the selected option's label contains chip title like, edit, clone delete etc. I want to remove them while showing as a selected option in select box. </p>
  
  <p>&lt; Selected Option , edit, delte, clone ></p>
  
  <p>How to remove the remaining edit, delete,clone?  </p>