title: Angular hide and showing multiple divs
body: <p>Farely new to angular, and I've tried looking online for examples of what I'm trying to achieve, but all of the examples don't seem to be helping me</p>
  
  <p>I have 5 tabs, each tab represents a body of info. I want it to originally show the first boxes info, but when you click on the other boxes, it will replace it with the other boxes info</p>
  
  <p>So basically, a hide and show. Only showing the info of the box I clicked. Heres a layout of what I mean
  HTML:</p>
  
  <pre><code>&lt;div class="boxes"&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="box1-content"&gt;Lorem ipsum 1&lt;/div&gt;
  &lt;div class="box2-content"&gt;Lorem ipsum 1&lt;/div&gt;
  &lt;div class="box3-content"&gt;Lorem ipsum 1&lt;/div&gt;
  &lt;div class="box4-content"&gt;Lorem ipsum 1&lt;/div&gt;
  &lt;div class="box5-content"&gt;Lorem ipsum 1&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> .boxes {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 10px;
      }
  
      .box {
       height: 100px;
       background: red;
      }
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/gZZYpR" rel="nofollow noreferrer">https://codepen.io/anon/pen/gZZYpR</a></p>