Display Html element according to a template variable

Question

An HTML template of my application has 3 div Each of these divs has a specific template variable. Let’s assume the following code:

<div class="container">
  <div #variable1>Some content 1</div>
  <div #variable2>Some content 2</div>
  <div #variable3>Some content 3</div>
</div>

I would like to have a function in the model that works on the basis of a switch. Depending on the variable, I could display the contents of the desired div element. The mechanism of the function might look like this:

  displaySpecificDiv(element: HTMLElement) {
    switch (element) {
      case 'variable1':
      // display div 1
      case 'variable2':
      // display div 2
      // And so on...
    }
  }

Then I could call this function through a menu that would allow me to display divs like this:

   <ul class="menu">
    <li
        (click)="displaySpecificDiv(variable1)"
        <span>item 1</span>
    </li>
    <li
      (click)="displaySpecificDiv(variable2)"
      <span>item 2</span>
    </li>
    <li
      (click)="displaySpecificDiv(variable3)"
      <span>item 3</span>
    </li>
  </ul>

Thanks for your help