title: Display the selected option on a select with a different text Angular
body: <p>I have done this select</p>
  <pre><code>&lt;select [(ngModel)]=&quot;phoneCode&quot; name=&quot;paises&quot;&gt;
     &lt;option *ngFor=&quot;let pais of (paises$ | async)&quot; [value]=&quot;pais.phonecode&quot;&gt;{{pais.nicename}} (+{{pais.phonecode}})&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  <p>I need to show the <strong>selected</strong> option with only the code (without the country name). How can I do it? I have it like the first picture, I need it like the last one.</p>
  <p><a href="https://i.stack.imgur.com/oITtR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oITtR.png" alt="enter image description here" /></a><a href="https://i.stack.imgur.com/x1NhJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x1NhJ.png" alt="enter image description here" /></a></p>