angular

Cannot find the ‘@angular/common/http’ module

Important: HttpClientModule is for Angular 4.3.0 and above. Check @Maximus’ comments and @Pengyy’s answer for more info. Original answer: You need to inject HttpClient in your component/service not the module. If you import HttpClientModule in your @NgModule // app.module.ts: import {NgModule} from ‘@angular/core’; import {BrowserModule} from ‘@angular/platform-browser’; // Import HttpClientModule from @angular/common/http import {HttpClientModule} from … Read more

Get reference to a directive used in a component

You can use exportAs property of the @Directive annotation. It exports the directive to be used in the parent view. From the parent view, you can bind it to a view variable and access it from the parent class using @ViewChild(). Example With a plunker: @Directive({ selector:'[my-custom-directive]’, exportAs:’customdirective’ //the name of the variable to access … Read more

Angular 6 Migration -.angular-cli.json to angular.json

Most likely there were errors in one of those commands. For me, I had to run npm install -g @angular-devkit/core first and then run the commands: npm install -g @angular/cli npm install @angular/cli In the console output of npm install @angular/cli you should see: ================================================================================ The Angular CLI configuration format has been changed, and your … Read more

Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Since 2.0.0.rc6: forms: deprecated provideForms() and disableDeprecatedForms() functions have been removed. Please import the FormsModule or the ReactiveFormsModule from @angular/forms instead. In short: If you use template-driven forms, add FormsModule to your @NgModule. If you use model-driven forms, add ReactiveFormsModule to your @NgModule. So, add to your app.module.ts or equivalent: import { NgModule } from … Read more

What are all the index.ts used for?

From the Angular.io v2’s archived glossary entry for Barrel*: A barrel is a way to rollup exports from several modules into a single convenience module. The barrel itself is a module file that re-exports selected exports of other modules. Imagine three modules in a heroes folder: // heroes/hero.component.ts export class HeroComponent {} // heroes/hero.model.ts export … Read more

Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)

There are two ways to do it. In the method that opens the dialog, pass in the following configuration option disableClose as the second parameter in MatDialog#open() and set it to true: export class AppComponent { constructor(private dialog: MatDialog){} openDialog() { this.dialog.open(DialogComponent, { disableClose: true }); } } Alternatively, do it in the dialog component … Read more

Angular exception: Can’t bind to ‘ngForIn’ since it isn’t a known native property

I typed in instead of of in the ngFor expression. Befor 2-beta.17, it should be: <div *ngFor=”#talk of talks”> As of beta.17, use the let syntax instead of #. See the UPDATE further down for more info. Note that the ngFor syntax “desugars” into the following: <template ngFor #talk [ngForOf]=”talks”> <div>…</div> </template> If we use … Read more