Style for CityCards; make animations constants

src/app/city/city-card.component.html

@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card class="city-card">
     <h2>{{searchedCity.city | uppercase}}</h2>
     <h4>{{searchedCity.country | uppercase}}</h4>
     <p *ngFor="let aqi of aqis">

src/app/city/city-cards-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { trigger, transition, style, animate, state } from '@angular/animations';
+import { FadeSlideAnimation } from '../shared/animations/fade-slide-animation.constant';
 import {BrowserModule} from '@angular/platform-browser'
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations'
 
@@ -10,25 +10,7 @@ import { SearchedCity } from '../search/searched-city.model';
     selector: 'aq-city-cards-list',
     templateUrl: './city-cards-list.component.html',
     animations: [
-        trigger(
-            'fadeSlide',
-            [
-                transition(
-                    ':enter', 
-                    [
-                        style({transform: 'translateY(-100%)', opacity: 0}),
-                        animate('300ms', style({transform: 'translateY(0)', 'opacity': 1}))
-                    ]
-                ),
-                transition(
-                    ':leave', 
-                    [
-                        style({transform: 'translateY(0)', 'opacity': 1}),
-                        animate('300ms', style({transform: 'translateY(-100%)', 'opacity': 0}))              
-                    ]
-                )
-            ]
-        )
+        FadeSlideAnimation
     ]
 })
 export class CityCardsListComponent implements OnInit {

src/app/search/search.service.ts

@@ -11,8 +11,7 @@ interface ValidationResult {
 
 @Injectable()
 export class SearchService {
-    public validateSearchInput(control: FormControl): ValidationResult {
-
+    public validateSearchInput(control: FormControl): ValidationResult {        
         return null;
     }
 

src/app/shared/animations/fade-slide-animation.constant.ts

@@ -0,0 +1,21 @@
+import { trigger, transition, style, animate, state, AnimationTriggerMetadata } from '@angular/animations';
+
+export const FadeSlideAnimation: AnimationTriggerMetadata = trigger(
+    'fadeSlide',
+    [
+        transition(
+            ':enter', 
+            [
+                style({transform: 'translateY(-100%)', opacity: 0}),
+                animate('300ms', style({transform: 'translateY(0)', 'opacity': 1}))
+            ]
+        ),
+        transition(
+            ':leave', 
+            [
+                style({transform: 'translateY(0)', 'opacity': 1}),
+                animate('300ms', style({transform: 'translateY(-100%)', 'opacity': 0}))              
+            ]
+        )
+    ]
+)

src/sass/main.scss

@@ -32,8 +32,9 @@
 
 // 6. Page-specific styles
 @import
+    'modules/city/city-card.component',
     'modules/home/home.component',
-    'modules/shared/material/_mat-spinner.component.scss';
+    'modules/search/search.component';
 
 // 7. Shame (should eventually be empty)
 @import

src/sass/modules/city/_city-card.component.scss

@@ -0,0 +1,3 @@
+mat-card.city-card {
+    margin: 10px;
+}