add detail

src/app/anothercity/anothercity.component.html

-<h2>Weather in {{weather.name}}, {{weather.sys.country}}</h2>
+<h2 class="text-center">Weather in {{weather.name}}, {{weather.sys.country}}</h2>
 <div class="col-sm-12 text-center">
 <span class="temp">{{weather.main.temp|number:'1.0-0'}}&#176;F</span>
 <p class="text-uppercase font-italic font-weight-bold" >{{weather.weather[0].description}}</p>
@@ -17,5 +17,9 @@
     <tr>
         <td>Sunset</td><td>{{weather.sys.sunset*1000|date: 'H:mm'}}</td>
     </tr>
+    <tr>
+        
+        <td><a routerLink="/">Back</a></td>
+    </tr>
 </tbody>
 </table>

src/app/anothercity/anothercity.component.ts

@@ -8,12 +8,13 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./anothercity.component.css']
 })
 export class AnothercityComponent implements OnInit {
-  lat;
-  lon;
+  ;
   weather;
   constructor(private weatherService: WeatherService,private _route: ActivatedRoute){}
   ngOnInit(): void {
+    console.log("router:",this._route.url);
     let slug = this._route.snapshot.paramMap.get('slug');
+    console.log("slug:",slug);
     this.weatherService.getWeatherDataByCityName(slug).subscribe(
       data=>{
         this.weather= data;

src/app/app-routing.module.ts

@@ -5,10 +5,9 @@ import { TodayComponent } from './today/today.component';
 
 const routes: Routes = [
  
-  {
-    path: ':slug',
-    component: TodayComponent ,
-  }
+ // { path: '',   redirectTo: '/', pathMatch: 'full' },
+  {path:':slug',component: AnothercityComponent},
+ // {path:'',component: TodayComponent}
 ];
 
 @NgModule({

src/app/today/today.component.css

+@import url(https://fonts.googleapis.com/css?family=Roboto:300);
+
+$morro: #aacbe6;
+$cayucos: #9cd0ff;
+$bahamas: #3cc0fe;
+$capetown: #27a5fd;
+$cabo: #0066ff;
+$reynisfjara: #34373e;
+$svalbard: #d2e9fa;
+
+$bahamasAlpha: rgba($bahamas, 0.7);
+$caboAlpha: rgba($cabo, 0.6);
+
+$capetownShadow: rgba($capetown, 0.4);
+
+$widgetHeight: 400px;
+$pictoBackdropDiameter: $widgetHeight * 1.4;
+$pictoFrameDiameter: $pictoBackdropDiameter * .6;
+$pictoCloudBigDiameter: $pictoFrameDiameter * .65;
+$pictoCloudSmallDiameter: $pictoCloudBigDiameter * .7;
+$pictoCloudFillSize: $pictoCloudSmallDiameter * .7;
+$iconCloudBigDiameter: 36px;
+$iconCloudSmallDiameter: $iconCloudBigDiameter * .65;
+$iconCloudFillSize: $iconCloudSmallDiameter * .7;
+
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+body {
+  background: #CEF;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 98vh;
+}
+
+.widget {
+  background: linear-gradient(to bottom right, $bahamas 20%, $cabo);
+  width: 900px;
+  height: $widgetHeight;
+  border-radius: 6px;
+  box-shadow: 0px 60px 80px -20px $capetownShadow;
+  position: relative;
+  overflow: hidden;
+}
+
+.pictoBackdrop {
+  position: absolute;
+  height: $pictoBackdropDiameter;
+  width: $pictoBackdropDiameter;
+  border-radius: 50%;
+  background: linear-gradient(160deg, $bahamasAlpha 40%, $caboAlpha);
+  right: -40px;
+  top: -90px;
+}
+
+.pictoFrame {
+  position: absolute;
+  background: $reynisfjara;
+  border-radius: 50%;
+  box-shadow: 0px 50px 60px -20px $cabo;
+  height: $pictoFrameDiameter;
+  width: $pictoFrameDiameter;
+  right: 80px;
+  top: 25px;
+}
+
+.pictoCloudBig {
+  position: absolute;
+  border-radius: 50%;
+  background: $morro;
+  box-shadow: 20px 20px 80px -20px $morro;
+  height: $pictoCloudBigDiameter;
+  width: $pictoCloudBigDiameter;
+  top: 80px;
+  right: 160px;
+}
+.pictoCloudFill {
+  position: absolute;
+  background: $morro;
+  box-shadow: 0px 20px 80px -20px $morro;
+  height: $pictoCloudFillSize;
+  width: $pictoCloudFillSize;
+  top: 191px;
+  right: 265px;
+}
+.pictoCloudSmall {
+  position: absolute;
+  border-radius: 50%;
+  background: $svalbard;
+  height: $pictoCloudSmallDiameter;
+  width: $pictoCloudSmallDiameter;
+  top: 146px;
+  right: 282px;
+}
+
+.iconCloudBig {
+  position: absolute;
+  border-radius: 50%;
+  background: $cayucos;
+  height: $iconCloudBigDiameter;
+  width: $iconCloudBigDiameter;
+  top: 200px;
+  left: 80px;
+}
+.iconCloudSmall {
+  position: absolute;
+  border-radius: 50%;
+  height: $iconCloudSmallDiameter;
+  width: $iconCloudSmallDiameter;
+  background: $svalbard;
+  top: 213px;
+  left: 70px;
+}
+.iconCloudFill {
+  position: absolute;
+  height: $iconCloudFillSize;
+  width: $iconCloudFillSize;
+  background: $cayucos;
+  top: 220px;
+  left: 80px;
+}
+
+.details{
+  font-family: Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+  margin-left: 60px;
+}
+.temperature {
+  color: white;
+  font-weight: 300;
+  font-size: 10em;
+}
+.summary {
+  color: $svalbard;
+  font-size: 2em;
+  font-weight: 300;
+  width: 260px;
+  margin-top: -16px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid $cayucos;
+  margin-left: 8px;
+}
+.summaryText {
+  margin: 0;
+  margin-left: 56px;
+}
+.precipitation, .wind {
+  color: $svalbard;
+  font-size: 1.6em;
+  font-weight: 300;
+  margin-left: 8px;
+}
+.precipitation {
+  margin-top: 16px;
+}
+.wind {
+  margin-top: 4px;
+}
\ No newline at end of file

src/app/today/today.component.html

-<div class="row">
-    <div class="col-md-6 offset-md-3 ">
-        <div class="col-sm-12 text-center">
-            <div class="input-group mt-5">
-                <input type="text" class="form-control" #userInput placeholder="city name"
-                    (keyup.enter)="getCity(userInput.value)">
-                <div class="input-group-append">
-                    <button class="input-group-text btn btn-outline-primary"
-                        (click)="getCity(userInput.value)">Search</button>
+<router-outlet></router-outlet>
+
+<div *ngIf="isHomeRoute()">
+    <div class="row">
+        <div class="col-md-6 offset-md-3 ">
+            <div class="col-sm-12 text-center">
+                <div class="input-group mt-5">
+                    <input type="text" class="form-control" #userInput placeholder="city name"
+                        (keyup.enter)="getCity(userInput.value)">
+                    <div class="input-group-append">
+                        <button class="input-group-text btn btn-outline-primary"
+                            (click)="getCity(userInput.value)">Search</button>
+                    </div>
                 </div>
+    
+    
             </div>
-
-
         </div>
+        <div *ngFor="let city of cities">
+            <h2 class="text-center">Weather in {{city.name}}, {{city.sys.country}}</h2>
+            <div class="col-sm-12 text-center">
+                <span class="temp">{{city.main.temp|number:'1.0-0'}}&#176;F</span>
+                <p class="text-uppercase font-italic font-weight-bold">{{city.weather[0].description}}</p>
+            </div>
+            <table class="table table-light table-striped table-bordered table-sm text-center"
+                style="width: 70%; margin-left: 13%;">
+                <tbody>
+                    <tr>
+                        <td>Humidity</td>
+                        <td>{{city.main.humidity}}%</td>
+                    </tr>
+                    <tr>
+                        <td>Pressure</td>
+                        <td>{{city.main.pressure}} hPa</td>
+                    </tr>
+                    <tr>
+                        <td>Sunrise</td>
+                        <td>{{city.sys.sunrise*1000 | date: 'H:mm'}}</td>
+                    </tr>
+                    <tr>
+                        <td>Sunset</td>
+                        <td>{{city.sys.sunset*1000|date: 'H:mm'}}</td>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td><a [routerLink]="[city.name]">Detail</a></td>
+                        
+                    </tr>
+                </tbody>
+            </table>
+        </div>   
     </div>
-    <div *ngFor="let city of cities">
-        <h2 class="text-center">Weather in {{city.name}}, {{city.sys.country}}</h2>
-        <div class="col-sm-12 text-center">
-            <span class="temp">{{city.main.temp|number:'1.0-0'}}&#176;F</span>
-            <p class="text-uppercase font-italic font-weight-bold">{{city.weather[0].description}}</p>
-        </div>
-        <table class="table table-light table-striped table-bordered table-sm text-center"
-            style="width: 70%; margin-left: 13%;">
-            <tbody>
-                <tr>
-                    <td>Humidity</td>
-                    <td>{{city.main.humidity}}%</td>
-                </tr>
-                <tr>
-                    <td>Pressure</td>
-                    <td>{{city.main.pressure}} hPa</td>
-                </tr>
-                <tr>
-                    <td>Sunrise</td>
-                    <td>{{city.sys.sunrise*1000 | date: 'H:mm'}}</td>
-                </tr>
-                <tr>
-                    <td>Sunset</td>
-                    <td>{{city.sys.sunset*1000|date: 'H:mm'}}</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
+</div>
+
 
-</div>
\ No newline at end of file

src/app/today/today.component.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { WeatherService } from '../weather.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-today',
@@ -11,7 +12,7 @@ export class TodayComponent implements OnInit {
   lat;
   lon;
   weather;
-  constructor(private weatherService: WeatherService){}
+  constructor(private weatherService: WeatherService,private router: Router){}
  ngOnInit(): void {
      this.getLocation();
  }
@@ -45,4 +46,9 @@ export class TodayComponent implements OnInit {
     }
   )
  }
+ isHomeRoute() {
+  //console.log(this.router.url);
+  return this.router.url === '/';
+ 
+}
 }