<file_sep>import { Component, OnInit,EventEmitter, Output } from '@angular/core';
import { MouseEvent } from '@agm/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  @Output('seleccionarEvent') seleccionar:EventEmitter<any> = new EventEmitter<any>();
  latitude = 61;
  longitude = 22;
  zoom = 7;
  constructor() { }

  ngOnInit() {
  }

  mapClicked($event: MouseEvent) {
    this.latitude = $event.coords.lat;
    this.longitude = $event.coords.lng;
    this.seleccionar.emit($event.coords);
  }
}
<file_sep>import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  /* mySlideImages = [1,2,3].map((i)=> `https://picsum.photos/640/480?image=${i}`);
  myCarouselImages =[1,2,3,4,5,6].map((i)=>`https://picsum.photos/640/480?image=${i}`);
  mySlideOptions={items: 1, dots: true, nav: false};
  myCarouselOptions={items: 5, dots: true, nav: true};
 */
  constructor() { }

  ngOnInit() {
  }

}
<file_sep>import { Component, OnInit,Input, OnChanges, Sanitizer } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-weather',
  templateUrl: './weather.component.html',
  styleUrls: ['./weather.component.css']
})
export class WeatherComponent implements OnInit, OnChanges {
  
  @Input() latitude:string;
  @Input() longitude:string;
  city: string;
  temp: number=123;
  weatherHourList:any=[];
  constructor(
    private sanitizer: Sanitizer,
    private http: HttpClient
  ) { }

  ngOnChanges(){
    this.obtenerClima();
  }
  ngOnInit() {
   this.obtenerClima();
  }
  obtenerClima() {
    //clima de 3 horas varios dias
    //        api.openweathermap.org/data/2.5/forecast?id=524901&lat=60.15790959006859&lon=7.437744140625&units=metric&lang=es&appid=d590f84d35fcf74bb9f07113d317ffbb
    // http://api.openweathermap.org/data/2.5/forecast?id=524901&lat=60.15790959006859&lon=7.437744140625&units=metric&lang=es&appid=d590f84d35fcf74bb9f07113d317ffbb
    //Clima en el momento 
//    http://api.openweathermap.org/data/2.5/weather?lat=60.15790959006859&lon=7.437744140625&units=metric&lang=es&appid=d590f84d35fcf74bb9f07113d317ffbb

let url = 'http://api.openweathermap.org/data/2.5/weather?'
+ 'lat=' + this.latitude
+ '&lon=' + this.longitude  
+ '&units=metric'
+ '&lang=es'
+ '&appid=<KEY>'; // your api key here 
console.log("url1: "+url);
this.http.get(url).subscribe((data: any) => {
  console.log(data);
this.city = data.name;
this.temp = data.main.temp.toFixed(1);
});
     url = 'http://api.openweathermap.org/data/2.5/forecast?id=524901&'
            + 'lat=' + this.latitude
            + '&lon=' + this.longitude  
            + '&units=metric'
            + '&lang=en'
            + '&appid=<KEY>'; // your api key here 
            console.log("url2: "+url);
            this.http.get(url).subscribe((data: any) => {
            this.weatherHourList=data.list;
            // this.temp = data.main.temp.toFixed(1);
           });
  }
  public getSantizeUrl(url: string) {
    // return this.sanitizer.bypassSecurityTrustUrl(url);
  } 
}
 <file_sep><style>
    .logo {
      font-size: 150px;
    }
    @media screen and (max-width: 768px) {
      .col-sm-4 {
        text-align: center;
        margin: 25px 0;
      }
    }
    </style>
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-8">
          <h2>Map-weather implementation in a web application with Angular</h2>
          <h4>SISTEMAS BASADOS EN WEB E INTELIGENCIA DE NEGOCIOS</h4>
          <p><NAME> </p>
        </div>
        
      </div>
    </div>
    
<div class="container-fluid bg-grey">
  <h2 class="text-center">CONTACT</h2>
  <div class="row">
    <div class="col-sm-5">
      <p>Contact me.</p>
      <p><span class="glyphicon glyphicon-map-marker"></span> Aguascalientes, MX</p>
      <p><span class="glyphicon glyphicon-phone"></span> +52 4651030866</p>
      <p><span class="glyphicon glyphicon-envelope"></span> <EMAIL></p>
    </div>
  </div>
</div>