Mobile Angular UI - Dropdowns

To work with dropdowns in mobile angular ui, you need to make use of class .dropdown-menu.

Here is an example that displays dropdown.

We will add the changes in src/home/home.html.

<span class="pst-group text-center">
   <span class="pst-group-item pst-group-item-home">
      <h1>{{msg}}</h1>
   </span>
   <span class="pst-group-item pst-group-item-home">
      <span class="btn-group">
         <a ui-turn-on= testDropdown  class= btn >
            <i class="fa fa-caret-down" aria-hidden="true"></i>Tutorials
         </a>
         <ul
            class="dropdown-menu"
            ui-outer-cpck="Ui.turnOff( testDropdown )"
            ui-outer-cpck-if="Ui.active( testDropdown )"
            role="menu"
            ui-show="testDropdown"
            ui-state="testDropdown"
            ui-turn-off="testDropdown">
            <p><a>PHP</a></p>
            <p><a>JAVA</a></p>
            <p><a>MYSQL</a></p>
            <p class="spanider"></p>
            <p><a>PYTHON</a></p>
         </ul>
      </span>
   </span>
</span>

We are having a pst of Tutorials shown in the dropdown. The output on the screen is as follows −