angular2-services - w3toppers.com

How to download pdf file in angular 2

In Angular 6, In service downloadPdfFile.service.ts and create the following things. Import Statement import { HttpClient, HttpHeaders } from ‘@angular/common/http’; import { map } from ‘rxjs/operators’; Method for download pdf downloadPDF(dataObj) { let headerOptions = new HttpHeaders({ ‘Content-Type’: ‘application/json’, ‘Accept’: ‘application/pdf’ // ‘Accept’: ‘application/octet-stream’, // for excel file }); let requestOptions = { headers: headerOptions, … Read more

Angular 2 – multiple instance of service created

update Angular >= 2.0.0-RC.6 Don’t add the service to the providers of the component. Instead add it to @NgModule({ providers: […], … (of a module that is not lazy loaded because lazy loaded modules introduce their own scope) @Component ({ selector : ‘Sub-Component’, template : `<hr> This is the Sub-Component ! <BR> StateService Log : … Read more

How I add Headers to http.get or http.post in Typescript and angular 2?

You can define a Headers object with a dictionary of HTTP key/value pairs, and then pass it in as an argument to http.get() and http.post() like this: const headerDict = { ‘Content-Type’: ‘application/json’, ‘Accept’: ‘application/json’, ‘Access-Control-Allow-Headers’: ‘Content-Type’, } const requestOptions = { headers: new Headers(headerDict), }; return this.http.get(this.heroesUrl, requestOptions) Or, if it’s a POST request: … Read more

Property ‘toPromise’ does not exist on type ‘Observable’

You need to add the operator like this: import ‘rxjs/add/operator/toPromise’; This is needed for every rxjs operator you want to use.

How to check the length of an Observable array

You can use the | async pipe: <div *ngIf=”(list$ | async)?.length==0″>No records found.</div> Update – 2021-2-17 <ul *ngIf=”(list$| async) as list; else loading”> <li *ngFor=”let listItem of list”> {{ listItem.text }} </li> </ul> <ng-template #loading> <p>Shows when no data, waiting for Api</p> <loading-component></loading-component> </ng-template> Update – Angular Version 6: If you are loading up a … Read more

Plain Javascript as Angular 2 service

Update 1: Based on the comments, the previous solution will be not help you. You can do that by using OpaqueToken in Angular2 1. Create a Token that is used to find an instance as below in a separate ts file. import { OpaqueToken } from ‘@angular/core’ export let name_of_The_Token = new OpaqueToken(‘name_Of_The_Window_Object’); 2. In … Read more

Subscribe to observable is returning undefined

Maybe some pictures help? The numbers here indicate the order of operations. Send the Http Request Component is initialized and calls the getMovies method of the movieService. The movieService getMovies method returns an Observable. NOT the data at this point. The component calls subscribe on the returned Observable. The get request is submitted to the … Read more

Angular 2 – Services consuming others services before call a method

I think that you could preload such hints at the application startup. For this, you could leverage the APP_INITIALIZER service. The application will wait for the returned promise to be resolved before actually starting. Here is a sample: provide(APP_INITIALIZER, { useFactory: (service:GlobalService) => () => service.load(), deps:[GlobalService, HTTP_PROVIDERS], multi: true }) The load method would … Read more

angular 2 http withCredentials

Try to change your code like this let options = new RequestOptions({ headers: headers, withCredentials: true }); and this.http.post(this.connectUrl, <stringified_data> , options)… as you see, the second param should be data to send (using JSON.stringify or just ”) and all options in one third parameter.

Angular 2 – Using Shared Service

Most of time, you need to define your shared service when bootstrapping your application: bootstrap(AppComponent, [ SharedService ]); and not defining it again within the providers attribute of your components. This way you will have a single instance of the service for the whole application. In your case, since OtherComponent is a sub component of … Read more