add array city

src/app/app-routing.module.ts

@@ -7,7 +7,7 @@ const routes: Routes = [
  
   {
     path: ':slug',
-    component: AnothercityComponent ,
+    component: TodayComponent ,
   }
 ];
 

src/app/app.component.html

@@ -2,5 +2,5 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 </head>
 <div class="container">
-  <app-today></app-today>
+  <app-today [cities]="cities"></app-today>
 </div>

src/app/app.component.ts

 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { ShareReplayConfig } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -8,5 +9,6 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class AppComponent {
   title = 'weatherAPI';
+  cities: any[] = new Array();
   constructor(private _route: ActivatedRoute){}
 }

src/app/today/today.component.html

@@ -2,33 +2,44 @@
     <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)">
+                <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>
+                    <button class="input-group-text btn btn-outline-primary"
+                        (click)="getCity(userInput.value)">Search</button>
                 </div>
             </div>
-            
-            <h2>Weather in {{weather.name}}, {{weather.sys.country}}</h2>
+
+
         </div>
     </div>
-    <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>
+    <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>
-    <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>{{weather.main.humidity}}%</td>
-            </tr>
-            <tr>
-                <td>Pressure</td><td>{{weather.main.pressure}} hPa</td>
-            </tr>
-            <tr>
-                <td>Sunrise</td><td>{{weather.sys.sunrise*1000 | date: 'H:mm'}}</td>
-            </tr>
-            <tr>
-                <td>Sunset</td><td>{{weather.sys.sunset*1000|date: 'H:mm'}}</td>
-            </tr>
-        </tbody>
-    </table>
+
 </div>
\ No newline at end of file

src/app/today/today.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { WeatherService } from '../weather.service';
 
 @Component({
@@ -7,6 +7,7 @@ import { WeatherService } from '../weather.service';
   styleUrls: ['./today.component.css']
 })
 export class TodayComponent implements OnInit {
+  @Input() cities: any[];
   lat;
   lon;
   weather;
@@ -23,6 +24,8 @@ export class TodayComponent implements OnInit {
       this.weatherService.getWeatherDataByCoords(this.lat,this.lon).subscribe(
         data=>{
           this.weather= data;
+          if(this.cities.findIndex(element=>element.name === this.weather.name)==-1)
+          this.cities.push(data);
           console.log(this.weather);
         }
       )
@@ -32,10 +35,13 @@ export class TodayComponent implements OnInit {
  }
  getCity(city)
  {
+  
   this.weatherService.getWeatherDataByCityName(city).subscribe(
     data=>{
       this.weather= data;
       console.log(this.weather);
+      if(this.cities.findIndex(element=>element.name === this.weather.name)==-1)
+      this.cities.push(data);
     }
   )
  }