botones incluidos en un menu desplegable (aún sin formato)

src/app/app.module.ts

@@ -11,12 +11,14 @@ import { AppComponent } from './app.component';
 import { PerfilDiscotecaPage } from './perfil-discoteca/perfil-discoteca.page';
 import { PromptEventoPage} from './prompt-evento/prompt-evento.page'
 import { GaleriamodalPageModule } from './galeriamodal/galeriamodal.module';
+import { MatMenuModule } from '@angular/material/menu';
 import { LoginPage } from './login/login.page';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 
 @NgModule({
   declarations: [AppComponent, PerfilDiscotecaPage, PromptEventoPage, LoginPage],
   entryComponents: [],
-  imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule, ReactiveFormsModule, GaleriamodalPageModule],
+  imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule, ReactiveFormsModule, GaleriamodalPageModule, MatMenuModule, BrowserAnimationsModule],
   providers: [
     StatusBar,
     SplashScreen,

src/app/perfil-discoteca/perfil-discoteca.page.html

@@ -8,40 +8,13 @@
 
 <ion-content [fullscreen]="true">
 
-
-  
     <div class='fotoPerfil'>
       <ion-grid>
       <ion-row>
-        <ion-col>
           <ion-img class="fotoPerfil" width="100%" height="100%" [src]='fotoSrc' alt='barraquinha'></ion-img>
           <div class="textoPie">{{nombre}}</div>
-
-          <div class="addFoto">
-            <ion-button [disabled]='editDisabled'>
-              <ion-icon name="image" slot="icon-only"></ion-icon>
-              <input type="file" (change)="loadImageFromDevice($event);cargarImagen()" id="file-input-perfil" accept="image/png, image/jpeg">
-            </ion-button>
-          </div>
-
-          <div>
-            <ion-button (click)="enableEdit()" label="editar" [disabled]='editEnabled'>
-              <ion-icon name="create"></ion-icon>
-            </ion-button>
-            <div id="botonesHidden1" class="botonesHidden">
-              <ion-button (click)="saveEdit()" label="guardar" [disabled]='editDisabled'>
-              <ion-icon name="save"></ion-icon>
-            </ion-button>
-            <ion-button (click)="cancelEdit()" [disabled]='editDisabled'>
-              Cancelar
-            </ion-button></div>
-          </div>
-          
-
-
-        </ion-col>
       </ion-row>
-    
+
 
       <ion-row>
         <ion-col>
@@ -52,10 +25,16 @@
             <div [contentEditable]='editEnabled'>{{localizacion}}</div>
           </div>
         </ion-col>
-
+        
         <ion-col>
+          <div>{{descripcion}}</div>
+        </ion-col>
+      </ion-row>
+
+      <ion-row>
           <div class="galeria">
             Galería de Fotos
+
             <input type="file" (change)="loadImageFromDevice($event)" id="file-input-galeria" accept="image/png, image/jpeg">
             <ion-slides (ionDrag)="onSlideChanged()" [options]="sliderOpts">
               <ion-slide *ngFor="let foto of galeriaFotos">
@@ -69,18 +48,8 @@
               </ion-slide>
             </ion-slides>
           </div>
-        </ion-col>
       </ion-row>
       
-      
-      <ion-row>
-          <ion-button (click)="addEvento()">
-            <ion-icon name="add-circle-outline">
-            </ion-icon>
-            Añadir evento
-          </ion-button>
-      </ion-row>
-
       <ion-row>
         <div *ngIf="eventos.length>0" class="eventos">
           <ion-list>
@@ -102,13 +71,40 @@
           </ion-list>
         </div>
       </ion-row>
+
+      <ion-row>
+        <button mat-icon-button [matMenuTriggerFor]="menu">
+          <ion-icon name="create"></ion-icon>
+        </button>
+
+        <mat-menu #menu="matMenu">
+        <button mat-menu-item [disabled]='editDisabled'>
+          <ion-icon name="image" slot="icon-only"></ion-icon>
+          <input type="file" (change)="loadImageFromDevice($event);cargarImagen()" id="file-input-perfil" accept="image/png, image/jpeg">
+        </button>
+
+
+        <button mat-menu-item (click)="enableEdit()" label="editar" [disabled]='editEnabled'>
+          <ion-icon name="create"></ion-icon>
+        </button>
+
+        <button mat-menu-item (click)="saveEdit()" label="guardar" [disabled]='editDisabled'>
+        <ion-icon name="save"></ion-icon>
+        </button>
+
+        <button mat-menu-item (click)="cancelEdit()" [disabled]='editDisabled'>
+          Cancelar
+        </button>
+
+        <button mat-menu-item (click)="addEvento()">
+          <ion-icon name="add-circle-outline">
+          </ion-icon>
+          Añadir evento
+        </button>
+
+      </mat-menu>
+      </ion-row>
     </ion-grid>  
     </div>
 
-  
-
-
-
-
-
 </ion-content>

src/app/perfil-discoteca/perfil-discoteca.page.ts

@@ -5,6 +5,7 @@ import { AlertController } from '@ionic/angular';
 import { ViewChild } from '@angular/core';
 import { Evento } from '../evento';
 import { Router } from '@angular/router';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
 import { GaleriamodalPage } from '../galeriamodal/galeriamodal.page';
 import { stringify } from '@angular/compiler/src/util';
@@ -17,6 +18,7 @@ import { stringify } from '@angular/compiler/src/util';
 export class PerfilDiscotecaPage implements OnInit {
 
   @ViewChild('IonSlides') slides: IonSlides;
+  @ViewChild('MatMenuTrigger') trigger: MatMenuTrigger;
   nombre: string;
   telefono: number;
   localizacion: string;