title: Angular 2 send array another page
body: <p>I am developing weather application with Angular.I'm new to Angular. I want to bring the weather information of the city I selected. But I could not send the data to the second page. Where is the problem? Thank you in advance for your help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class ForecastComponent implements OnInit, OnDestroy {
    
    constructor(private service: WeatherService, private router: Router, private route: ActivatedRoute) { }
  
    public items: Array&lt;string&gt; = ["ADANA", "ADIYAMAN", "AFYONKARAHİSAR", "AĞRI", "AMASYA", "ANKARA", "ANTALYA", "ARTVİN"];
  
    public selectedValue: BaseModel;
    value: any = {};
    weatherClass: Weather;
  
    ngOnInit() {}
  
    ngOnDestroy(): void {
      this.route.data.subscribe(
        (data: { weatherClass: Weather }) =&gt; {
          this.weatherClass = data.weatherClass;
        }
      )
    }
    public selected(value: any): void {
      console.log('Selected value is: ', value);
    }
  
    public removed(value: any): void {
      console.log('Removed value is: ', value);
    }
  
    public typed(value: any): void {
      console.log('New search input: ', value);
    }
  
    public refreshValue(value: any): void {
      this.value = value;
    }
    sendCityWeather(value: Array&lt;BaseModel&gt;) {
      this.service.otherWeather(this.value.text).subscribe(
        (data) =&gt; {
          this.weatherClass = new Weather(data.name, data.main.temp, data.weather[0].description, data.main.temp_min, data.main.temp_max, data.weather[0].icon);
          console.log(this.weatherClass);
          this.router.navigate(['/weather']);
        }
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class WeatherComponent implements OnInit, OnDestroy {
  
    weatherClass: Weather;
    value: any = {};
  
    constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {}
    
    ngOnInit() {
      this.service.otherWeather(this.value.text).subscribe(
        (data: Weather) =&gt; {
          this.weatherClass = data;
        }
      )
    }
  
    ngOnDestroy(): void {
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class WeatherService {
  
    weatherClass: Weather;
  
    constructor(private http:Http) { }
  
    otherWeather(city:string){
      return this.http.get(`http://api.openweathermap.org/data/2.5/weather?appid=0f3fb9fa31ad3d41f1bb2bd0841c3f2f&amp;q=${city}&amp;units=imperial&amp;cnt=10`).map((response:Response) =&gt; response.json());
    
    }
  }</code></pre>
  </div>
  </div>
  </p>