title: Correct way for manipulating/referencing DOM elements in Angular
body: <p>I have the following ion-segment HTML code:</p>
  
  <pre><code>&lt;ion-segment (ionChange)="segmentChanged($event)" scrollable&gt;
      &lt;ion-segment-button checked value="calendar"&gt;
          &lt;ion-icon name="calendar"&gt;&lt;/ion-icon&gt;
      &lt;/ion-segment-button&gt;
      &lt;ion-segment-button  value="list-box"&gt;
          &lt;ion-icon name="list-box"&gt;&lt;/ion-icon&gt;
      &lt;/ion-segment-button&gt;  
  &lt;/ion-segment&gt; 
  
  &lt;ion-card [hidden]="true"&gt;
      test
  &lt;/ion-card&gt;
  &lt;ion-card&gt;
      test
  &lt;/ion-card&gt;
  </code></pre>
  
  <p>I want to swap which card becomes visible when I press the segment button. Now I could easily fix this using Jquery, but I want to do this without JQuery.</p>
  
  <p>I have the following event, which is being triggered correctly atm:</p>
  
  <p><code>segmentChanged(): void {
      console.log("I triggered")
    }</code></p>
  
  <p>What is the best (or a good) way to implement this functionality?</p>