xPosition et yPosition dans le menu mat ne fonctionnent pas

Cela fonctionne parfaitement pour moi. Vous ne manquez rien. Le code est correct. Cela dépend de l'orientation à laquelle vous essayez d'ajouter.

image1:

image2:

Dans ces images, il y a le même code, dans la première photo il n'y a pas de place sous le bouton.

Vous l'avez probablement résolu, mais je publie quand même ceci, peut-être que c'est utile pour quelqu'un.
Si vous suivez la documentation , cela devrait fonctionner parfaitement (voir # section customizing-menu-position ).
La raison pour laquelle cela pourrait ne pas fonctionner dépend probablement de la position dans laquelle vous avez placé le menu: par exemple, si vous essayez de l'ouvrir avec yPosition = ci-dessus, il doit avoir suffisamment d'espace pour s'ouvrir au-dessus, sinon il s'ouvrira en dessous. Idem pour la xPosition.
Je sais que cela peut sembler stupide, mais pour moi, c'était la raison pour laquelle cela ne fonctionnait pas.
HTML:

.myButton{
  margin-top: 90px;
}

CSS:

    <button class="myButton" mat-button [matMenuTriggerFor]="menu">Menu</button>
  <mat-menu yPosition="above" #menu="matMenu">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu> 

C'est vraiment pénible, mais j'ai une solution de contournement. Dans un fichier css séparé, vous pouvez mentionner:

::ng-deep.cdk-overlay-pane{
  transform: translate(0px, 32px);
}

Mais si même après ce changement vous rencontrez ce problème, passez à l'étape suivante pour superposer le panneau:

::ng-deep.mat-menu-panel {
/* These numbers are my requirement, put something which suits yours */
  transform: translate(0px, 32px); 
}

Bonne chance. J'espère que cela vous aidera ...