Opening a menu using position, angular2 material

I am making a project in which I need to open a menu in front of the x-position. I added the code mentioned in material.angular.io but it doesn't work.

<p class="more" [mdMenuTriggerFor]="menu">+7 others</p>

<md-menu xPosition="before" #menu="mdMenu" [overlapTrigger]="false">
   <span md-menu-item>Rahul</span>
   <span md-menu-item>Sneha</span>
</md-menu>

      

        
        
        
      

    

please tell me where am i going wrong?