title: Angular 4: How to use http request response in different component?
body: <p>I am working in Angular4, and trying to use a http get request response in another function (I have a hotel-list component, I can select any hotel, then it redirect to another endpoint, where i can modify the hotel).
  My idea was to create a class where I have the variable which can store the response.</p>
  
  <pre><code>export class Hotel {
  data = {
      type: 'hotels',
      id: '',
      attributes: {
          location: '',
          name: '',
          main_image_src: '',
          has_wifi: '',
          has_parking: '',
          has_pets: '',
          has_restaurant: '',
          has_bar: '',
          has_swimming_pool: '',
          has_air_conditioning: '',
          has_gym: '',
          meal_plan: '',
          user_id: '',
          booking_id: '',
          amount: '',
          currency: '',
          status: '',
          stars: ''
      }
  };
  </code></pre>
  
  <p>Then it is instantiated in a service:</p>
  
  <pre><code>@Injectable()
  export class HotelService {
      hotel = new Hotel;
  }
  </code></pre>
  
  <p>The service is imported in the hotelregister component and I save the response object there, like this:</p>
  
  <pre><code> getHotelId(id) {
      const endpoint = 'https://cake-cup.glitch.me/api/hotels/'+id;
      this.hotelregistrationservice.httpRequest(this.hotelservice.hotel, 
      endpoint, 'get')
          .subscribe(
              response =&gt; {
                  this.hotelservice.hotel.data = response;
                  this.router.navigate(['hotels/1'])
  
              },
              error =&gt; {
                  console.error(error)
              });
  }
  </code></pre>
  
  <p>Here, if I console log the hotelservice.hotel.data, I have the correct response. This is what I am trying to use in the modifier component like this:
      import { HotelService } from '../hotel.service';</p>
  
  <pre><code>@Component({
    selector: 'app-single-hotel',
    templateUrl: './single-hotel.component.html',
    styleUrls: ['../../assets/app.component.scss'],
    providers: [HotelService]
  })
  export class SingleHotelComponent implements OnInit {
  
    constructor(
      public hotelservice: HotelService,
   ) {
      console.log(this.hotelservice.hotel.data)
     }
  
   ngOnInit(
    ) { }
   }
  </code></pre>
  
  <p>However, the hotelservice.hotel.data is undefined. Could you please help, to fix the issue?</p>