I&#39;m am trying to use withCredentials to send a cookie along to my service but can&#39;t find out how to implement it.
The docs say &quot;If the server requires user credentials, we&#39;ll enable them in the request headers&quot; With no examples.
I have tried several different ways but it still will not send my cookie.
Here is my code so far.

    private systemConnect(token) {
        let headers = new Headers();
        headers.append(&#39;Content-Type&#39;, &#39;application/json&#39;);
        headers.append(&#39;X-CSRF-Token&#39;, token.token);
        let options = new RequestOptions({ headers: headers });
        this.http.post(this.connectUrl, { withCredentials: true }, options).map(res =&gt; res.json())
        .subscribe(uid =&gt; {
            console.log(uid);
        });
    }


angular 2 http withCredentials

&lt;br/&gt;
I am trying to export an Service from one of my modules but i only get the following error:

    ERROR Error: Uncaught (in promise): 
    Error: Can&#39;t export value ConfirmDialogService from SharedModule as it was neither declared nor imported!



My Module is the following:

    import { NgModule }                 from &quot;@angular/core&quot;;
    import { CommonModule }             from &quot;@angular/common&quot;;
    import { FormsModule }              from &quot;@angular/forms&quot;;
    import { RouterModule }             from &quot;@angular/router&quot;;
    import { MaterialModule }           from &quot;@angular/material&quot;;
    
    import { ConfirmDialogComponent }       from &#39;./confirm-dialog/confirm-dialog.component&#39;;
    import { ConfirmDialogService }         from &#39;./confirm-dialog/confirm-dialog.service&#39;;
   
    @NgModule({
        imports: [
            RouterModule,
            CommonModule,
            MaterialModule,
            FormsModule
        ],
        providers: [
            ConfirmDialogService
        ],
        declarations: [
            ConfirmDialogComponent 
        ],
        exports: [
            ConfirmDialogComponent 
            ConfirmDialogService
        ]
    })
    export class SharedModule {}

The files do exist and are referenced correctly in TS but when running the app the error appears.

Cant export service from module &#39;it was neither declared nor imported&#39;

I am trying to pass config data into a custom library in Angular.

**In the users application**, they will pass some config data to my library using `forRoot`
   
    // Import custom library
    import { SampleModule, SampleService } from &#39;custom-library&#39;;
    ...

    // User provides their config
    const CustomConfig = {
      url: &#39;some_value&#39;,
      key: &#39;some_value&#39;,
      secret: &#39;some_value&#39;,
      API: &#39;some_value&#39;
      version: &#39;some_value&#39;
    };
    
    @NgModule({
      declarations: [...],
      imports: [
        // User config passed in here
        SampleModule.forRoot(CustomConfig),
        ...
      ],
      providers: [
        SampleService
      ]
    })
    export class AppModule {}

&lt;hr&gt;

**In my custom library**, specifically the `index.ts`, I can access the config data: 

    import { NgModule, ModuleWithProviders } from &#39;@angular/core&#39;;
    import { SampleService } from &#39;./src/sample.service&#39;;
    ...

    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: [...],
      exports: [...]
    })
    export class SampleModule {
      static forRoot(config: CustomConfig): ModuleWithProviders {
        // User config get logged here
        console.log(config);
        return {
          ngModule: SampleModule,
          providers: [SampleService]
        };
      }
    }

 **My question is how do I make the config data available in the custom library&#39;s `SampleService`**

Currently `SampleService` contains the following:

    @Injectable()
    export class SampleService {
    
      foo: any;
    
      constructor() {
        this.foo = ThirdParyAPI(/* I need the config object here */);
      }
    
      Fetch(itemType:string): Promise&lt;any&gt; {
        return this.foo.get(itemType);
      } 
    }

I have read through the docs on [Providers][1], however the `forRoot` example is quite minimal and doesn&#39;t seem to cover my use case.


  [1]: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#providers

Pass config data using forRoot

I&#39;ve read questions like [Access EventEmitter Service inside of CustomHttp](https://stackoverflow.com/questions/36059564/access-eventemitter-service-inside-of-customhttp) 
where the user uses EventEmitter in his service, but he was suggested in this [comment](https://stackoverflow.com/questions/36059564/access-eventemitter-service-inside-of-customhttp#comment59766410_36059564) 
not to use it and to use instead Observables directly in his services. 

I also read this 
[question](https://stackoverflow.com/questions/36014395/angular-2-two-way-communication-between-components/36014451#36014451) 
where the solution suggests to pass the EventEmitter to the child and subscribe to it.

My question then is: Should I, or should I not subscribe manually to an EventEmitter? How should I use it?

What is the proper use of an EventEmitter?

I am trying to load an event from my API before the component gets rendered. Currently I am using my API service which I call from the ngOnInit function of the component.  


My `EventRegister` component:

    import {Component, OnInit, ElementRef} from &quot;angular2/core&quot;;
    import {ApiService} from &quot;../../services/api.service&quot;;
    import {EventModel} from &#39;../../models/EventModel&#39;;
    import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams, RouterLink} from &#39;angular2/router&#39;;
    import {FORM_PROVIDERS, FORM_DIRECTIVES, Control} from &#39;angular2/common&#39;;

    @Component({
        selector: &quot;register&quot;,
        templateUrl: &quot;/events/register&quot;
        // provider array is added in parent component
    })
    
    export class EventRegister implements OnInit {
        eventId: string;
        ev: EventModel;
    
        constructor(private _apiService: ApiService, 
                            params: RouteParams) {
            this.eventId = params.get(&#39;id&#39;);
        }
    
        fetchEvent(): void {
            this._apiService.get.event(this.eventId).then(event =&gt; {
                this.ev = event;
                console.log(event); // Has a value
                console.log(this.ev); // Has a value
            });
        }
    
        ngOnInit() {
            this.fetchEvent();
            console.log(this.ev); // Has NO value
        }
    }

My `EventRegister` template

&lt;!-- language: lang-html --&gt;

    &lt;register&gt;
        Hi this sentence is always visible, even if `ev property` is not loaded yet    
        &lt;div *ngIf=&quot;ev&quot;&gt;
            I should be visible as soon the `ev property` is loaded. Currently I am never shown.
            &lt;span&gt;{{event.id }}&lt;/span&gt;
        &lt;/div&gt;
    &lt;/register&gt;

My API service

    import &quot;rxjs/Rx&quot;
    import {Http} from &quot;angular2/http&quot;;
    import {Injectable} from &quot;angular2/core&quot;;
    import {EventModel} from &#39;../models/EventModel&#39;;
    
    @Injectable()
    export class ApiService {
        constructor(private http: Http) { }
        get = {
            event: (eventId: string): Promise&lt;EventModel&gt; =&gt; {
                return this.http.get(&quot;api/events/&quot; + eventId).map(response =&gt; {
                    return response.json(); // Has a value
                }).toPromise();
            }     
        }     
    }

The component gets rendered before the API call in the `ngOnInit` function is done fetching the data. So I never get to see the event id in my view template. So it looks like this is a ASYNC problem. I expected the binding of the `ev` (`EventRegister` component) to do some work after the `ev` property was set. Sadly it does not show the `div` marked with `*ngIf=&quot;ev&quot;` when the property gets set.

**Question:** Am I using a good approach? If not; What is the best way to load data before the component is starting to render?

**NOTE:** The `ngOnInit` approach is used in this [angular2 tutorial][1].


  [1]: https://angular.io/docs/ts/latest/tutorial/toh-pt4.html


EDIT:

Two possible solutions. First was to ditch the `fetchEvent` and just use the API service in the `ngOnInit` function.

    ngOnInit() {
        this._apiService.get.event(this.eventId).then(event =&gt; this.ev = event);
    }

Second solution. Like the answer given.

    fetchEvent(): Promise&lt;EventModel&gt; {
        return this._apiService.get.event(this.eventId);
    }

    ngOnInit() {
        this.fetchEvent().then(event =&gt; this.ev = event);
    }

Angular2: How to load data before rendering the component?

I have a Component and a Service:

Component:
&lt;!-- begin snippet: js hide: false console: true --&gt;

&lt;!-- language: lang-js --&gt;

    export class WebUserProfileViewComponent {
        persons: Person [];
        personId: number;
        constructor( params: RouteParams, private personService: PersonService) {
              
            
               this.personId = params.get(&#39;id&#39;);
               this.persons =  this. personService.getPersons();
               console.log(this.personId);  
            }
    }

&lt;!-- end snippet --&gt;

Service: 

&lt;!-- begin snippet: js hide: false console: true --&gt;

&lt;!-- language: lang-js --&gt;

    @Injectable()
    export class PersonService {
          getPersons(){
            var persons: Person[] = [
                {id: 1, firstName:&#39;Hans&#39;, lastName:&#39;Mustermann&#39;, email: &#39;mustermann@test.com&#39;, company:&#39;Test&#39;, country:&#39;DE&#39;},
                {id: 2, firstName:&#39;Muster&#39;, lastName:&#39;Mustermann&#39;, email: &#39;mustermann@test.com&#39;, company:&#39;test&#39;, country:&#39;DE&#39;},
                {id:3, firstName:&#39;Thomas&#39;, lastName:&#39;Mustermann&#39;, email: &#39;mustermannt@tesrt.com&#39;, company:&#39;test&#39;, country:&#39;DE&#39;}
            ];
              
            return persons;
          }
    }

&lt;!-- end snippet --&gt;

I want to get the Person item with the ID (&#39;personID&#39;). The personID I get from `Routeparams`. For that I need the foreach loop? But I haven&#39;t found a solution for this.

Angular 2 TypeScript how to find element in Array

I&#39;ve read that injecting when bootstrapping should have all children share the same instance, but my main and header components (main app includes header component and router-outlet) are each getting a separate instance of my services.  

I have a FacebookService which I use to make calls to the facebook javascript api and a UserService that uses the FacebookService.  Here&#39;s my bootstrap:

    bootstrap(MainAppComponent, [ROUTER_PROVIDERS, UserService, FacebookService]);

From my logging it looks like the bootstrap call finishes, then I see the FacebookService then UserService being created before the code in each of the constructors runs, the MainAppComponent, the HeaderComponent and the DefaultComponent:

[![enter image description here][1]][1]



  [1]: http://i.stack.imgur.com/6q6tG.png

How do I create a singleton service in Angular 2?

In my Angular 2 component I have an Observable array

&lt;!-- language: lang-ts --&gt;

    list$: Observable&lt;any[]&gt;;

In my Template I have

&lt;!-- language: lang-html --&gt;

    &lt;div *ngIf=&quot;list$.length==0&quot;&gt;No records found.&lt;/div&gt;
    
    &lt;div *ngIf=&quot;list$.length&gt;0&quot;&gt;
        &lt;ul&gt;
            &lt;li *ngFor=&quot;let item of list$ | async&quot;&gt;item.name&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

But list$.length doesn&#39;t work with in case of Observable array.


**Update:**

It seems that **(list$ | async)?.length** gives us the length but the below code still doesn&#39;t work:

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;
        Length: {{(list$ | async)?.length}}
        &lt;div *ngIf=&quot;(list$ | async)?.length&gt;0&quot;&gt;
            &lt;ul&gt;
                &lt;li *ngFor=&quot;let item of (list$ | async)&quot;&gt;
                    {{item.firstName}}
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;

 Can anyone please guide how do I check length of Observable array.


How to check the length of an Observable array

What is the difference between `EventEmitter.emit()` and `EventEmitter.next()`? Both dispatching the event to the subscribed listeners.

&lt;!-- language: lang-js --&gt;

    export class MyService {
      @Output() someEvent$: EventEmitter&lt;any&gt; = new EventEmitter();
    
      someFunc() {
       this.someEvent$.emit({myObj: true});
    
       this.someEvent$.next({myObj: true});
      }
    }

The [documenation for the EventEmitter](https://angular.io/docs/ts/latest/api/core/EventEmitter-class.html) is not so helpful at the moment.

Difference between EventEmitter.next() and EventEmitter.emit() in Angular 2

How can I introduce something like `&#39;my-app-name/services&#39;` to avoid lines like the following import?

    import {XyService} from &#39;../../../services/validation/xy.service&#39;;

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

I want to use a static variable of a component in HTML page. 
How to bind static variable of component with a HTML element in angular 2?


&lt;!-- language: lang-js --&gt;

    import { Component, OnInit } from &#39;@angular/core&#39;;
    import { Observable } from &#39;rxjs/Rx&#39;;
    @Component({
      moduleId: module.id,
      selector: &#39;url&#39;,
      templateUrl: &#39;url.component.html&#39;,
      styleUrls: [&#39;url.component.css&#39;]
    })
    export class UrlComponent {

      static urlArray;
      constructor() {
      UrlComponent.urlArray=&quot; Inside Contructor&quot;
      }
    }



&lt;!-- language: lang-html --&gt;

    &lt;div&gt;
      url works!
       {{urlArray}}
    &lt;/div &gt;



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

I&#39;m trying to get the updated value from a service variable (`isSidebarVisible`) which is keeps on updated by another component (`header`) with a click event (`toggleSidebar`).

**sidebar.service.ts**

```typescript
import { Injectable } from &#39;@angular/core&#39;;
import { Subject } from &#39;rxjs/Subject&#39;;

@Injectable() 
export class SidebarService {
    isSidebarVisible: boolean;

    sidebarVisibilityChange: Subject&lt;boolean&gt; = new Subject&lt;boolean&gt;();

    constructor()  {
        this.isSidebarVisible = false;
    }

    toggleSidebarVisibilty() {
        this.isSidebarVisible = !this.isSidebarVisible
        this.sidebarVisibilityChange.next(this.isSidebarVisible);
    }
}
```

**sidebar.component.ts**
```typescript
export class SidebarComponent implements OnInit {
    asideVisible: boolean;
    _asideSubscription: any;

    constructor(private sidebarService: SidebarService) {
        this.asideVisible = sidebarService.isSidebarVisible
        this._asideSubscription = sidebarService.sidebarVisibilityChange.subscribe((value) =&gt; {
            this.asideVisible = value
        })
    }
    
    ngOnInit() {
    }
}
```

**header.component.ts (Where service variable is updated)**

```typescript
export class HeaderComponent implements OnInit {
    isSidebarVisible: boolean;
    _subscription: any;

    constructor(private sidebarService: SidebarService) {
        this._subscription = sidebarService.sidebarVisibilityChange.subscribe((value) =&gt; {
            this.isSidebarVisible = value
        })
    }

    toggleSidebar() {
        this.sidebarService.toggleSidebarVisibilty()
    }

    ngOnInit() {

    }
}
```

I can see the service variable value change in `header.component.html` when `{{ isSidebarVisible }}` but In `sidebar.component.html` it always prints the default value and never listened to the changes.

Please help me fix this.



How can I detect service variable change when updated from another component?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import { Headers, Http } from &#39;@angular/http&#39;;

    @Injectable()
    export class PublisherService{
        
        private publishersUrl = &#39;app/publisher&#39;;
        
        constructor(private http: Http) { }
        
        getPublishers(): Promise&lt;Publisher[]&gt;{
            return this.http.get(this.publishersUrl)
                       .toPromise()
                       .then(response =&gt; response.json().data) 
                       .catch(this.handleError);
        }
    }    

I am getting this error:

&gt; Property &#39;toPromise&#39; does not exist on type &#39;Observable&lt;Response&gt;&#39;.any

Property &#39;toPromise&#39; does not exist on type &#39;Observable&lt;Response&gt;&#39;

I am new to development using Angular 4. I am facing an issue while getting a response from API about displaying an image. In the API, an image file has an input-stream file. I don&#39;t know how to retrieve it and display it properly.

Can you anyone resolve it?

I tried this:

 - **Image.Component.ts:** 

        this.http.get(&#39;http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769&#39;)
                 .subscribe((response) =&gt; { var blob = new Blob([response.text()], {type: &quot;image/png&quot;});
                   console.log(blob);
                   console.log(window.btoa(blob.toString()));           
        });

 
Results in this =&gt; `W29iamVjdCBCbG9iXQ==` , but it is not the correct format 

and tried this also:

    this.http.get(&#39;http://localhost:8080/xxx/download/file/596fba76ed18aa54e4f80769&#39;).map(Image=&gt;Image.text())
      .subscribe(data =&gt; {
        console.log((data.toString()));   
    });

Which has this result =&gt;   

     ����\ExifII*��7                                                      ��DuckyK��fhttp://ns.adobe.com/xap/1.0/&lt;?xpacket begin=&quot;&quot; id=&quot;W5M0MpCehiHzreSzNTczkc9d&quot;?&gt; &lt;x:xmpmeta xmlns:x=&quot;adobe:ns:meta/&quot; x:xmptk=&quot;Adobe XMP Core 5.3-c011 66.145661, 2012/02/06-14:56:27        &quot;&gt; &lt;rdf:RDF xmlns:rdf=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot;&gt; &lt;rdf:Description rdf:about=&quot;&quot; xmlns:xmpMM=&quot;http://ns.adobe.com/xap/1.0/mm/&quot; xmlns:stRef=&quot;http://ns.adobe.com/xap/1.0/sType/ResourceRef#&quot; xmlns:xmp=&quot;http://ns.adobe.com/xap/1.0/&quot; xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot; xmpMM:OriginalDocumentID=&quot;xmp.did:0280117407206811A2188F30B3BD015B&quot; xmpMM:DocumentID=&quot;xmp.did:E2C71E85399511E7A5719C5BBD3DDB73&quot; xmpMM:InstanceID=&quot;xmp.iid:E2C71E84399511E7A5719C5BBD3DDB73&quot; xmp:CreatorTool=&quot;Adobe Photoshop CC 2014 (Windows)&quot;&gt; &lt;xmpMM:DerivedFrom stRef:instanceID=&quot;xmp.iid:7092a9cd-b3fd-bb49-b53c-9b6e1aa1ac93&quot; stRef:documentID=&quot;adobe:docid:photoshop:40615934-3680-11e7-911d-f07c687d49b8&quot;/&gt; &lt;dc:rights&gt; &lt;rdf:Alt&gt; &lt;rdf:li xml:lang=&quot;x-default&quot;&gt;                                                      &lt;/rdf:li&gt; &lt;/rdf:Alt&gt; &lt;/dc:rights&gt; &lt;dc:creator&gt; &lt;rdf:Seq/&gt; &lt;/dc:creator&gt; &lt;/rdf:Description&gt; &lt;/rdf:RDF&gt; &lt;/x:xmpmeta&gt; &lt;?xpacket end=&quot;r&quot;?&gt;���Photoshop 3.08BIMJZ%Gt6                                                      8BIM%�&lt;&quot;.}��νz��܌��Adobed����	

but I used to encode using window.btoa, it should be error like not latin range.

Getting Image from API in Angular 4/5+?

By using Http, we call a method that does a network call and returns an http observable:

&lt;!-- language-all: lang-js --&gt;

    getCustomer() {
        return this.http.get(&#39;/someUrl&#39;).map(res =&gt; res.json());
    }

If we take this observable and add multiple subscribers to it:

    let network$ = getCustomer();

    let subscriber1 = network$.subscribe(...);
    let subscriber2 = network$.subscribe(...);

What we want to do, is ensure that this does not cause multiple network requests.

This might seem like an unusual scenario, but its actually quite common: for example if the caller subscribes to the observable to display an error message, and passes it to the template using the async pipe, we already have two subscribers.

What is the correct way of doing that in RxJs 5? 

Namely, this seems to work fine:

    getCustomer() {
        return this.http.get(&#39;/someUrl&#39;).map(res =&gt; res.json()).share();
    }

But is this the idiomatic way of doing this in RxJs 5, or should we do something else instead? 

*Note : As per Angular 5 new `HttpClient`, the `.map(res =&gt; res.json())` part in all examples is now useless, as JSON result is now assumed by default.*

What is the correct way to share the result of an Angular Http network call in RxJs 5?

I understand that provider is for getting service from another class but what is multi-provider and token thing?

And also when we do `multi=true` ?

    provide(NG_VALIDATORS, { useExisting: class),    multi: true })

All Angular2 Services Solutions on Gang of Coders

Total of 16 Angular2 Services Solutions