Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Component not render html when add constructor

Tags:

http

angular

In one of my components I display data that I get from a service I created, which uses http to get a data from external website through api.

Before adding the service, the components worked well (the component only displayed static html). Now, in order to use the service I need to inject the service to the component, so once I inject it to the constructor, it's no longer displays the static html, as well as - and this is really wired - also the router doesn't work. It will not route to this component and in the address bar will show the link of the latest component (latest link that was visiting)

Here's the component:

import { Component, OnInit } from '@angular/core';
import { DataDisplayFromAPI } from '../data-display-from-api.service';

@Component({
  selector: 'main-view',
  templateUrl: './main-view.component.html',
  styleUrls: ['./main-view.component.css']
})

export class MainViewComponent implements OnInit {

objectKeys = Object.keys;
cryptos: any;

constructor (private coinsRateCryptoCompare: DataDisplayFromAPI) {}

title = 'Digital Coin Hub';

ngOnInit () {
    this.coinsRateCryptoCompare.getPrices()
        .subscribe(res => {
            this.cryptos = res;
        });
}

}

Now, if I only take out the private parameter from the component private coinsRateCryptoCompare: DataDisplayFromAPI the component shows the static html correct again:

constructor () {}

title = 'Digital Coin Hub';

ngOnInit () {
    //this.coinsRateCryptoCompare.getPrices()
        //.subscribe(res => {
        //  this.cryptos = res;
    //  });
}

}

But then obviously I can't use the http data

What's the problem?

Per the comments, this is the app module and the service.

The service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import 'rxjs/add/operator/map';

@Injectable()

export class DataDisplayFromAPI {

   result:any;

   constructor(private _http: HttpClient) {}

   getPrices() {
      return this._http.get("https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT&tsyms=USD")
       .map(result => this.result = result);
   }
 }

The app module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; // import the     HTTP library to make our API calls

import { AppRoutingModule } from './app-routing.module';

import { DigitalCoinHubService } from './digital-coin-hub.service';
import { DataDisplayFromAPI } from './data-display-from-api.service';

import { AppComponent } from './app.component';
import { MainViewComponent } from './main-view/main-view.component';
import { BuySellBitcoinComponent } from './buy-sell/buy-sell.component';
import { DigitalWalletComponent } from './digital-wallet/digital-   wallet.component';
import { JobsComponent } from './jobs/jobs.component';
import { DigitalCoinsComponent } from './digital-coins/digital-   coins.component';
import { MiningComponent } from './mining/mining.component';
import { StartupsComponent } from './startups/startups.component';
import { EthereumComponent } from './ethereum/ethereum.component';
import { NewsComponent } from './news/news.component';
import { BuyWithDigitalCoinComponent } from './buy-with/buy-   with.component';
import { BannerWideComponent } from './banner-wide/banner-  wide.component';

 @NgModule({
     declarations: [
     AppComponent,
     MainViewComponent,
     BuySellBitcoinComponent, 
     DigitalWalletComponent,
     JobsComponent,
     DigitalCoinsComponent,
     MiningComponent,
     StartupsComponent,
     EthereumComponent,
     NewsComponent, 
     BuyWithDigitalCoinComponent, 
     BannerWideComponent
   ],
 imports: [
   BrowserModule,
   AppRoutingModule,
 ],
providers: [DigitalCoinHubService, DataDisplayFromAPI],
bootstrap: [AppComponent]
})
export class AppModule { }
like image 720
Menahem Gil Avatar asked Sep 17 '25 00:09

Menahem Gil


1 Answers

I added HttpClientModule to the @NgModule imports and it solved the problem:

imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,

Thanks for your help. Problem solved.

like image 156
Menahem Gil Avatar answered Sep 18 '25 12:09

Menahem Gil