Remplir un mat-menu dynamiquement

Bonjour

Je ne connais pas très bien Angular et Material, mais je dois me former.
Je suis devant un exercice que j'ai du mal à réaliser car je ne trouve pas de littérature qui parle de ce sujet.

Je dois faire un menu pour un site. Ce menu sera différent en fonction des pages dans lesquelles l'utilisateur se promène.
J'ai donc fait un Component dans lequel je voudrais placer un Mat-menu vu que le composant me semble pas mal.
Côté HTML cela donné un code qui ressemble à cela :
Code:

1 2 <button mat-button [matMenuTriggerFor]="animals" class="btnMenu"><mat-icon class="color-icon">home</mat-icon></button> <mat-menu #animals="matMenu"></mat-menu>
Côté TS, je n'arrive pas à trouver comment faire pour remplir le menu, avec une notion de sous menu.
Le back va m'envoyer un tableau de donnée avec un texte à afficher dans el menu, une URL pour faire le lien et des colonne qui vont me permettre de savoir qui l'enfant de qui. J'ai la main sur le Back ; donc je peux modifier la structure du tableau à volonté. Cela sera transmis sous forme de JSON.

J'ai épluché la documentation de Angluar.io, de Material.io, j'ai fait des recherchez avec google pour voir ce que dit stackoverflow, openclassroom et consort. je en trouve rien. J'ai même demandé à Chat GPT et c'est le flop aussi.

Si vous pouviez me donner un point de départ pour gérer la chose, cela serait super gentil. Je ne comprends pas comment j'injecte le mat-menu dans le côté HTML.
Je pense aussi qu'il va me falloir faire une fonction récursive et je sens le gros souci arriver, j'ai toujours eu des souci avec ce genre de chose.

Merci pour votre aide.