Java Qui Nhon

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:

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

ng g module newModule to generate a module,
cd newModule to change directory into the newModule folder
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.

Does height and width not apply to span?

Source: https://stackoverflow.com/questions/2491068/does-height-and-width-not-apply-to-span

Span is an inline element. It has no width or height.

You could turn it into a block-level element, then it will accept your dimension directives.

span.product__specfield_8_arrow
{
    display: block; /* or inline-block */
}

How do I remove an array item in TypeScript?

Source:https://stackoverflow.com/questions/15292278/how-do-i-remove-an-array-item-in-typescript

down vote

With ES6 you can use this code :

removeDocument(doc){
   this.documents.forEach( (item, index) => {
     if(item === doc) this.documents.splice(index,1);
   });
}

How can we convert an integer to string in Angular

Source:https://stackoverflow.com/questions/22328543/how-can-we-convert-an-integer-to-string-in-angularjs

.toString() is available, or just add "" to the end of the int

var x = 3,
    toString = x.toString(),
    toConcat = x + "";

Angular is simply JavaScript at the core.

Angular 4.3 Interceptor not working

Source: https://stackoverflow.com/questions/45418477/angular-4-3-interceptor-not-working

TL;DR Make sure there is one import of the HttpClientModule in the entire app (recommened) or provide valid interceptor configuration for each one (ofc for testing only).

Make sure that HttpClientModule is not imported multiple times across different modules of the app. I had it imported in lazy loaded modules. Each import creates a new copy of HttpClient using configuration from the module where it is imported, so interceptors provided in a root module are overwritten.

how to trigger event click at input type=“file” by function in angular 2?

Source: https://stackoverflow.com/questions/38261859/how-to-trigger-event-click-at-input-type-file-by-function-in-angular-2

Pass the fileInput reference to triggerFile() and do the fileInput.click() there instead:

<input #fileInput type="file"  />
<button type="button" (click)="triggerFile(fileInput)">trigger</button>

triggerFile(fileInput:Element) {
  // do something
  fileInput.click();
}

how to copy object into another object

Source: https://stackoverflow.com/questions/39506619/angular2-how-to-copy-object-into-another-object

Solution

Angular2 developed on the ground of modern technologies like TypeScript and ES6. So you can just do let copy = Object.assign({}, myObject).

Object assign - nice examples.

For nested objects : let copy = JSON.parse(JSON.stringify(myObject))

FormGroup FormArray - remove only one element object by value

Source: https://stackoverflow.com/questions/46707026/typescript-formgroup-formarray-remove-only-one-element-object-by-value-angul

FormArray class has removeAt which takes the index. If you do not know the index, you can do a workaround:

this.images.removeAt(this.images.value.findIndex(image => image.id === 502))