Rotation de l'image zoomée

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
+import { trigger,state, style } from '@angular/animations';
 
 import { ImageService } from '../../services/image.service';
 import { ServiceComm } from '../../services/service-comm.service';
@@ -12,6 +13,14 @@ import { AddAction } from '../../models/add-action.enum';
   selector: 'app-list-of-images',
   templateUrl: './list-of-images.component.html',
   styleUrls: ['./list-of-images.component.css'],
+  animations: [
+      trigger('rotatedState', [
+        state('default', style({ transform: 'rotate(0)' })),
+        state('rot90', style({ transform: 'rotate(-90deg)' })),
+        state('rot180', style({ transform: 'rotate(-180deg)' })),
+        state('rot270', style({ transform: 'rotate(-270deg)' })),
+    ])
+  ]
 })
 export class ListOfImagesComponent implements OnInit {
   public displayedColumns: Array<string> = ['comment', 'data'];
@@ -22,6 +31,7 @@ export class ListOfImagesComponent implements OnInit {
   public showPopin: boolean;
   public dataSourceTable: MatTableDataSource<ImageResp>;
   public resultsLength = 0;
+  public stateRotation: string = 'default';
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
@@ -112,4 +122,16 @@ export class ListOfImagesComponent implements OnInit {
   closeModal() {
     this.showPopin = false;
   }
+
+  rotate() {
+    if (this.stateRotation === 'default') {
+      this.stateRotation = 'rot90';
+    } else if (this.stateRotation === 'rot90') {
+      this.stateRotation = 'rot180';
+    } else if (this.stateRotation === 'rot180') {
+      this.stateRotation = 'rot270';
+    } else {
+      this.stateRotation = 'default';
+    }
+  }
 }