title: Extend the provided html content with components in Angular
body: <p>I have some text written by users in html editor. They do not write custom elements in html code (I want to avoid that). Text is about currencies and can reference users or countries... looks like:</p>
  
  <pre><code>Nam odio EUR et USD metus @blandit Austria eu ante.
  Donec @blandit aar @sagittis dui USD eu leo consequat.
  </code></pre>
  
  <p>Is it possible to identify "supported" currencies (EUR, USD), countries (Austria) and users (blandit and sagittis) inside text from service and <strong>enhance it with components</strong> in Angular? So, any currency identified in article will be display as hyperlink with information panel and graphs. The components should display user, currency or country details. I can't figure out how to do it right. I don't want to force users to select countries or currencies, as recognizing currencies and countries in text is quite easy.</p>
  
  <p>Is the following procedure correct for Angular project with this intent?</p>
  
  <p>1) <em>Recognize currencies / countries and users (with regex?) and split text to parts.</em> In this point I create this array <code>["Nam odio", "EUR", "et", "USD", "metus", "@blandit", "Austria", "eu ante. Donec", "@blandit", "aar", "@sagittis", "dui", "USD", "eu leo consequat."]</code> To save resources, I only do this once when saving an article.</p>
  
  <p>2) I create components for "text", "currency", "country" and "user".</p>
  
  <p>3) I use ngSwitch to switch between this components based on type of object in array from step 1.</p>
  
  <p>But what if some tags overlap? <code>Nam &lt;b&gt;odio EUR&lt;/b&gt; et &lt;span class="a"&gt;USD &lt;ul&gt;&lt;li&gt;metus @blandit&lt;/li&gt;&lt;li&gt;Austria eu ante.&lt;/li&gt;&lt;/ul&gt;&lt;/span&gt;</code></p>
  
  <p>Question: <strong>Is there another / Angular option to display some "recognizable objects" in html text like components?</strong></p>