angular2-services – Page 3

Pass config data using forRoot

April 24, 2023 by Tarik

You are almost there, simply provide both SampleService and config in your module like below: export class SampleModule { static forRoot(config: CustomConfig): ModuleWithProviders<SampleModule> { // User config get logged here console.log(config); return { ngModule: SampleModule, providers: [SampleService, {provide: ‘config’, useValue: config}] }; } } @Injectable() export class SampleService { foo: string; constructor(@Inject(‘config’) private config:CustomConfig) { … Read more

Cant export service from module ‘it was neither declared nor imported’ [duplicate]

April 15, 2023 by Tarik

You don’t need to list services in exports, and you can only list components, directives, and pipes. For services, providers is relevant, but otherwise a TypeScript import is enough.

angular 2 http withCredentials

April 4, 2023 by Tarik

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.

What is multi provider in angular2

March 10, 2023 by Tarik

multi: true means that one provider token provides an array of elements. For example all directives for router support routerLink, router-outlet are provided by ROUTER_DIRECTIVES. If a new provider is registered with the token ROUTER_DIRECTIVES, then it overrides the previously registered directives. If multi: true (on the first registered and the new provider) is set, … Read more

Getting Image from API in Angular 4/5+?

February 13, 2023 by Tarik

You should set responseType: ResponseContentType.Blob in your GET-Request settings, because so you can get your image as blob and convert it later da base64-encoded source. You code above is not good. If you would like to do this correctly, then create separate service to get images from API. Beacuse it ism’t good to call HTTP-Request … Read more

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

February 11, 2023 by Tarik

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 can I detect service variable change when updated from another component?

January 27, 2023 by Tarik

Move subscription to the service, and both components can access this value. If you need value only once, you can use it directly (like I did in sidebar.component); If you need to update something with this value it you can use getter (example in header.component). sidebar.service.ts: @Injectable() export class SidebarService { isSidebarVisible: boolean; sidebarVisibilityChange: Subject<boolean> … Read more

How to avoid imports with very long relative paths in Angular 2?

January 5, 2023 by Tarik

TypeScript 2.0+ In TypeScript 2.0 you can add a baseUrl property in tsconfig.json: { “compilerOptions”: { “baseUrl”: “.” // etc… }, // etc… } Then you can import everything as if you were in the base directory: import {XyService} from “services/validation/xy.service”; On top of this, you could add a paths property, which allows you to … Read more

How to bind static variable of component in HTML in angular 2?

January 2, 2023 by Tarik

The scope of binding expressions in a components template is the components class instance. You can’t refer to globals or statics directly. As a workaround you can add a getter to your components class export class UrlComponent { static urlArray; constructor() { UrlComponent.urlArray = “Inside Contructor”; } get staticUrlArray() { return UrlComponent.urlArray; } } and … Read more

How to check the length of an Observable array

November 22, 2022 by Tarik

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