How to use select/option/NgFor on an array of objects in Angular2

Source: https://stackoverflow.com/questions/33181936/how-to-use-select-option-ngfor-on-an-array-of-objects-in-angular2

I don't know what things were like in the alpha, but I'm using beta 12 right now and this works fine. If you have an array of objects, create a select like this:

<select [(ngModel)]="simpleValue"> // value is a string or number
    <option *ngFor="#obj of objArray" [value]="obj.value">{{obj.name}}</option>
</select>

If you want to match on the actual object, I'd do it like this:

<select [(ngModel)]="objValue"> // value is an object
    <option *ngFor="#obj of objArray" [ngValue]="obj">{{obj.name}}</option>
</select>

Angular 2 - Chaining http requests

Source: https://stackoverflow.com/questions/42626536/angular-2-chaining-http-requests
https://stackoverflow.com/questions/49002681/send-multiple-requests-in-sequence-in-angular-5-resolver

Chaining HTTP requests can be achieved using the Observable.flatMap operator. Say we want to make three requests where each request depends on the result of previous one:

this.service.firstMethod()
    .flatMap(firstMethodResult => this.service.secondMethod(firstMethodResult))
    .flatMap(secondMethodResult => this.service.thirdMethod(secondMethodResult))
    .subscribe(thirdMethodResult => {
          console.log(thirdMethodResult);
     });

This way you can chain as much interdependent requests you want

I had a similar problem where I ended up using flatMap callback, basically from the documentation, it allows us to perform sequential tasks and return observable in the end.

You can try something like in the resolve function of the resolver,

return request1().flatMap( (response: any) => {
    return forkJoin( [ request2(), request3() ];
} );

Where request1 is the function that you want to be performed before request2 and request3 are executed. It goes without saying that, all the requests must be returning Observables.

More: https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs

Angular EXCEPTION: No provider for Http

Source: https://stackoverflow.com/questions/33721276/angular-exception-no-provider-for-http

Import the HttpModule

import { HttpModule } from '@angular/http';

@NgModule({
    imports: [ BrowserModule, HttpModule ],
    providers: [],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export default class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Ideally you split up this code in two separate files. For further information read:

• https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html
• https://angular.io/docs/ts/latest/guide/ngmodule.html

Angular2 enable/disable formcontrol on http response not working

Source: https://stackoverflow.com/questions/40080951/angular2-enable-disable-formcontrol-on-http-response-not-working

You can do something like this:

yourHttpFunction(){
 if(controlShouldBeDisabled){
  this.form.controls['first'].disable()
 }

}

<select type="number" [attr.disabled]="controlEnabled"></select>

Create component to specific module with Angular-CLI

Source: https://stackoverflow.com/questions/40649799/create-component-to-specific-module-with-angular-cli

To create a component as part of a module you should

1. ng g module newModule to generate a module,
2. cd newModule to change directory into the newModule folder
3. ng g component newComponent to create a component as a child of the module.

Dynamically updating css in Angular 2

Source: https://stackoverflow.com/questions/35882670/dynamically-updating-css-in-angular-2

Try this

 <div class="home-component" 
 [style.width.px]="width" 
 [style.height.px]="height">Some stuff in this div</div>

[Updated]: To set in % use

[style.height.%]="height">Some stuff in this div</div>

Angular 2 TypeScript how to find element in Array

Source: https://stackoverflow.com/questions/37969984/angular-2-typescript-how-to-find-element-in-array

You need to use method Array.filter:

this.persons =  this.personService.getPersons().filter(x => x.id == this.personId)[0];

or Array.find

this.persons =  this.personService.getPersons().find(x => x.id == this.personId);

What is difference between declarations, providers and import in NgModule

Source: https://stackoverflow.com/questions/39062930/what-is-difference-between-declarations-providers-and-import-in-ngmodule

Angular Concepts

• imports makes the exported declarations of other modules available in the current module
• declarations are to make directives (including components and pipes) from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported.
• providers are to make services and values known to DI. They are added to the root scope and they are injected to other services or directives that have them as dependency.

A special case for providers are lazy loaded modules that get their own child injector. providersof a lazy loaded module are only provided to this lazy loaded module by default (not the whole application as it is with other modules).

For more details about modules see also https://angular.io/docs/ts/latest/guide/ngmodule.html

• exports makes the components, directives, and pipes available in modules that add this module to imports. exports can also be used to re-export modules such as CommonModule and FormsModule, which is often done in shared modules.
• entryComponents registers components for offline compilation so that they can be used with ViewContainerRef.createComponent(). Components used in router configurations are added implicitly.