Making an HTTP Request using Angular 4

Making an HTTP Request using Angular 4

I got this question today in an interview and used it to explain the elements of an Angular 4 Component:

selector
templateURL
styleURL

and what these mean to making a component something you can easily import into another Angular 4 component.

How would you have answered that?

"How do you make an HTTP Request using Angular 4?"

Thanks
curiouswebsterSoftware EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Selector is the tag name used to declare a component in your markup <my-component>
styleUrl is the path to the stylesheet for your component.
templateUrl is the path to the template (markup) for your component.

How do you make an HTTP Request using Angular 4

This might be a trick question. The standard way of doing this is using HTTPClientModule which was introduced in 4.3 - so prior to 4.3 you would have had to use HTTPClient - 4.3 onwards HTTPClientModuel.

As HTTPClientModule is the future I would go with that.

You import it in your modules file and then add it to the imports array in the NgModule
app.module.ts
...
import { HttpClientModule } from '@angular/common/http';
...
@NgModule({
  declarations: [
  ...
  ],
  imports: [
    BrowserModule,
  ...
    HttpClientModule,
  ...
  ],
  providers: [...],
  bootstrap: [AppComponent]
})

Open in new window


Typically you would use this in a Service but you can use it directly. Either way you inject the module into your constructor
...
export class MyService {
  ...
  constructor(private http:HttpClient) { }
  ...
}

Open in new window


To use it you would call one of the methods on the module

this.http.get<any>(environment.api + 'getStuff')

Open in new window


This returns an observable which you will have to subscribe to.

If you are returning an array or record that will be used directly in your view you can use the returned observable in your view with the async filter.

Otherwise you need to subscribe to the observable

If you are using directly in your component (for illustration only)
this.http.get<any>(environment.api + 'getStuff').subscribe(data => {
  // Use data here
});

Open in new window

Typically with a subscription you would need to unsubscribe when you are done to avoid memory leaks and performance issues - however with http requests this is not necessary.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
curiouswebsterSoftware EngineerAuthor Commented:
Thanks
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.