Make list able to just show closest with animation

src/app/timezone/components/timezone-list/timezone-list.component.html

@@ -1,8 +1,14 @@
-<div class="background">
-    <ng-container *ngFor="let timezone of timezones">
-        <div class="container">
+<div class="background" [@displayState]="state" (@displayState.start)="animationEvent($event)" (@displayState.done)="animationEvent($event)">
+    <ng-container *ngIf="showAllItems; else single" >
+        <div *ngFor="let timezone of timezones" class="container" [ngStyle]="{'height': timezones.length == 1 ? '100%' : 'auto'}">
             <h1 class="timezone">{{timezone.name}}</h1>
             <h2 class="time">{{timezone.time?.toFormat('tt')}}</h2>
         </div>
     </ng-container>
+    <ng-template #single >
+        <div *ngIf="closest" class="single-container">
+            <h1 class="timezone">{{closest.name}}</h1>
+            <h2 class="time">{{closest.time?.toFormat('tt')}}</h2>
+        </div>
+    </ng-template>
 </div>

src/app/timezone/components/timezone-list/timezone-list.component.ts

@@ -1,21 +1,58 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { interval, Observable } from 'rxjs';
+import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { Timezone } from '../../models/timezone.model';
-import { TimezoneService } from '../../services/timezone.service';
 
 @Component({
   selector: 'app-timezone-list',
   templateUrl: './timezone-list.component.html',
-  styleUrls: ['./timezone-list.component.scss']
+  styleUrls: ['./timezone-list.component.scss'],
+  animations:[
+    trigger('displayState',[
+      state('show', style({
+        opacity : 1
+      })),
+      state('hide', style({
+        opacity : 0
+      })),
+      transition('show=>hide', animate('450ms ease-out')),
+      transition('hide=>show', animate('450ms ease-in'))
+    ])
+  ]
 })
-export class TimezoneListComponent implements OnInit {
+export class TimezoneListComponent implements OnInit, OnChanges {
 
   @Input() timezones: Timezone[] = [];
+  @Input() closest?: Timezone;
+  @Input() showAll: boolean = true;
 
+  showAllItems = true;
+
+  state: string = 'show'
   constructor(){}
 
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if(!!changes['showAll']){
+      if(changes['showAll'].previousValue != changes['showAll'].currentValue){
+        this.state = 'hide'
+      }else{
+        this.state = 'show'
+      }
+    }
+  }
+
   ngOnInit(): void {
   }
 
+  animationEvent($event: any){
+    // console.log(`${this.state} has entered ${$event.phaseName}`);
+    if(this.state == 'hide' && $event.phaseName == 'done'){
+      this.showAllItems = this.showAll;
+      this.state = 'show'
+    }else if(this.state == 'show' && $event.phaseName == 'done'){
+    
+    }
+  }
+
 }
 

src/app/timezone/components/timezone-single/timezone-single.component.html

@@ -1,4 +1,4 @@
-<div class="background">
+<div class="background" [@displayState]="state">
     <ng-container *ngIf="timezone">
         <div class="container">
             <h1 class="timezone">{{timezone.name}}</h1>

src/app/timezone/components/timezone-single/timezone-single.component.ts

@@ -1,16 +1,30 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Component, Input, OnInit } from '@angular/core';
 import { Timezone } from '../../models/timezone.model';
 
 @Component({
   selector: 'app-timezone-single',
   templateUrl: './timezone-single.component.html',
-  styleUrls: ['./timezone-single.component.scss']
+  styleUrls: ['./timezone-single.component.scss'],
+  animations:[
+    trigger('displayState',[
+      state('show', style({
+        opacity : 1
+      })),
+      state('hide', style({
+        opacity : 0
+      })),
+      transition('show=>hide', animate('500ms ease-out')),
+      transition('hide=>show', animate('500ms ease-in'))
+    ])
+  ]
 })
 export class TimezoneSingleComponent implements OnInit {
 
   @Input() timezone: Timezone | undefined;
+  @Input() state: string = 'hide';
 
-  constructor(){ }
+  constructor(){}
 
   ngOnInit(): void {
   }

src/app/timezone/models/timezone.model.ts

@@ -26,7 +26,7 @@ export function TimezoneCompare(a: Timezone, b: Timezone) {
 }
 
 // http://www.movable-type.co.uk/scripts/latlong.html
-export function GetClosestTimezoneFrom(timezone: string, timezones: Timezone[]) {
+export function GetClosestTimezoneFrom(timezone: string, timezones: Timezone[]): Timezone | undefined{
     var location1 = timezoneMap[timezone]
     var closestDist = Number.MAX_SAFE_INTEGER
     var closestTimezone: Timezone | undefined = undefined