Add this in your module.ts, declarations: [ AppComponent, ConfirmComponent ] if ConfirmComponent is in another module, you need to export it there thus you can use it outside, add: exports: [ ConfirmComponent ] —Update Angular 9 or Angular 8 with Ivy explicitly enabled— Entry Components With Ivy are not required anymore and now are deprecated … Read more
To answer, you question you could provide a service that wraps the original Http object from Angular. Something like described below. import {Injectable} from ‘@angular/core’; import {Http, Headers} from ‘@angular/http’; @Injectable() export class HttpClient { constructor(private http: Http) {} createAuthorizationHeader(headers: Headers) { headers.append(‘Authorization’, ‘Basic ‘ + btoa(‘username:password’)); } get(url) { let headers = new Headers(); … Read more
Update 4.0.0 See Angular Angular Router – Fetch data before navigating for more details. Original Using a service is the way to go. In route params you should only pass data that you want to be reflected in the browser URL bar. See Angular Angular Cookbook Component Communication – Bidirectional Service. The router shipped with … Read more
2 to 14 (TypeScript) with Angular CLI OneTime Setup npm install -g @angular/cli ng new projectFolder creates a new application Bundling Step ng build (run in command line when directory is projectFolder). flag prod bundle for production is now the default (see the Angular documentation to customize it if needed). Compress using Brotli compression the … Read more
If you are using RC5 then import this: import { CommonModule } from ‘@angular/common’; import { BrowserModule } from ‘@angular/platform-browser’; and be sure to import CommonModule from the module that is providing your component. @NgModule({ imports: [CommonModule], declarations: [MyComponent] … }) class MyComponentModule {}
I just used the event input and it worked fine as follows: in .html file : <input type=”text” class=”form-control” (input)=”onSearchChange($event.target.value)”> in .ts file : onSearchChange(searchValue: string): void { console.log(searchValue); }
In order to use two-way data binding for form inputs you need to import the FormsModule package in your Angular module. import { FormsModule } from ‘@angular/forms’; @NgModule({ imports: [ FormsModule ] EDIT Since there are lot of duplicate questions with the same problem, I am enhancing this answer. There are two possible reasons Missing … Read more
A BehaviorSubject holds one value. When it is subscribed it emits the value immediately. A Subject doesn’t hold a value. Subject example (with RxJS 5 API): const subject = new Rx.Subject(); subject.next(1); subject.subscribe(x => console.log(x)); Console output will be empty BehaviorSubject example: const subject = new Rx.BehaviorSubject(0); subject.next(1); subject.subscribe(x => console.log(x)); Console output: 1 In … Read more
I had this issue. I imported MatFormFieldModule at my main module, but forgot to add MatInputModule to the imports array, like so: import { MatFormFieldModule, MatInputModule } from ‘@angular/material’; @NgModule({ imports: [ MatFormFieldModule, MatInputModule ] }) export class AppModule { } More info here.
As usual in Angular, you can rely on dependency injection: import { DatePipe } from ‘@angular/common’; class MyService { constructor(private datePipe: DatePipe) {} transformDate(date) { return this.datePipe.transform(date, ‘yyyy-MM-dd’); } } Add DatePipe to your providers list in your module; if you forget to do this you’ll get an error no provider for DatePipe: providers: [DatePipe,…] … Read more