Questions tagged [angular]
Questions about Angular (not to be confused with AngularJS), the web framework from Google. Use this tag for Angular questions which are not specific to an individual version. For the older AngularJS (1.x) web framework, use the AngularJS tag.
258,008
questions
1685
votes
47answers
1.1m views
Can't bind to 'ngModel' since it isn't a known property of 'input'
I've got the following error when launching my Angular app, even if the component is not displayed.
I have to comment out the <input> so that my app works.
zone.js:461 Unhandled Promise ...
1606
votes
32answers
589k views
What is the difference between Promises and Observables?
What is the difference between Promise and Observable in Angular?
An example on each would be helpful in understanding both the cases. In what scenario can we use each case?
1253
votes
27answers
605k views
Difference between Constructor and ngOnInit
Angular provides life cycle hook ngOnInit by default.
Why should ngOnInit be used, if we already have a constructor?
1006
votes
35answers
877k views
Can't bind to 'formGroup' since it isn't a known property of 'form'
THE SITUATION:
Please help! I am trying to make what should be a very simple form in my Angular2 app but no matter what it never works.
ANGULAR VERSION:
Angular 2.0.0 Rc5
THE ERROR:
Can't bind to ...
970
votes
24answers
623k views
Angular HTML binding
I am writing an Angular application and I have an HTML response I want to display.
How do I do that? If I simply use the binding syntax {{myVal}} it encodes all HTML characters (of course).
I need ...
843
votes
11answers
463k views
BehaviorSubject vs Observable?
I'm looking into Angular RxJs patterns and I don't understand the difference between a BehaviorSubject and an Observable.
From my understanding, a BehaviorSubject is a value that can change over time ...
838
votes
26answers
240k views
Angular/RxJs When should I unsubscribe from `Subscription`
When should I store the Subscription instances and invoke unsubscribe() during the NgOnDestroy life cycle and when can I simply ignore them?
Saving all subscriptions introduces a lot of mess into ...
825
votes
22answers
1.1m views
Angular: conditional class with *ngClass
What is wrong with my Angular code? I am getting the following error:
Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass
<ol>
<li *ngClass="{active: step==='...
779
votes
19answers
870k views
How to use *ngIf else?
I'm using Angular and I want to use *ngIf else (available since version 4) in this example:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content ...
718
votes
48answers
1.2m views
Could not find module “@angular-devkit/build-angular”
After updating to Angular 6.0.1, I get the following error on ng serve:
Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
Error: Could not find module "@...
709
votes
9answers
1.1m views
ngFor with index as value in attribute
I have a simple ngFor loop which also keeps track of the current index. I want to store that index value in an attribute so I can print it. But I can't figure out how this works.
I basically have ...
661
votes
20answers
693k views
What is the equivalent of ngShow and ngHide in Angular 2+?
I have a number of elements that I want to be visible under certain conditions.
In AngularJS I would write
<div ng-show="myVar">stuff</div>
How can I do this in Angular 2+?
628
votes
15answers
404k views
How to detect when an @Input() value changes in Angular?
I have a parent component (CategoryComponent), a child component (videoListComponent) and an ApiService.
I have most of this working fine i.e. each component can access the json api and get its ...
627
votes
14answers
718k views
How can I select an element in a component template?
Does anybody know how to get hold of an element defined in a component template? Polymer makes it really easy with the $ and $$.
I was just wondering how to go about it in Angular.
Take the example ...
623
votes
15answers
60k views
Huge number of files generated for every Angular project
I wanted to start a simple hello world app for Angular.
When I followed the instructions in the official quickstart the installation created 32,000 files in my project.
I figured this is some ...
586
votes
37answers
739k views
How to get current route
The current docs only talk about getting route params, not the actual route segments.
For example, if i want to find the parent of current route, how is that possible?
543
votes
18answers
529k views
access key and value of object using *ngFor
I am a bit confused about how to get the key and value of an object in angular2 while using *ngFor for iterating over the object. I know in angular 1.x there is a syntax like
ng-repeat="(key, value) ...
542
votes
16answers
334k views
*ngIf and *ngFor on same element causing error
I'm having a problem with trying to use Angular's *ngFor and *ngIf on the same element.
When trying to loop through the collection in the *ngFor, the collection is seen as null and consequently ...
530
votes
25answers
504k views
How to detect a route change in Angular?
I am looking to detect a route change in my AppComponent.
Thereafter I will check the global user token to see if he is logged in. Then I can redirect the user if he is not logged in.
526
votes
22answers
557k views
No provider for HttpClient
After upgrading from angular 4.4 to 5.0 and after updating all HttpModule and Http to HttpClientModule I started to get this error.
I also added HttpModule again to be sure it's not due to some ...
491
votes
10answers
138k views
@Directive vs @Component in Angular
What is the difference between @Component and @Directive in Angular?
Both of them seem to do the same task and have the same attributes.
What are the use cases and when to prefer one over another?
474
votes
16answers
571k views
Binding select element to object in Angular
I'd like to bind a select element to a list of objects -- which is easy enough:
@Component({
selector: 'myApp',
template: `<h1>My Application</h1>
<select [(ngModel)...
473
votes
17answers
414k views
How to go back last page
Is there a smart way to go back last page in Angular 2?
Something like
this._router.navigate(LASTPAGE);
For example, page C has a Go Back button,
Page A -> Page C, click it, back to page A.
Page B ...
467
votes
46answers
410k views
Error when trying to inject a service into an angular component “EXCEPTION: Can't resolve all parameters for component”, why?
I've built a basic app in Angular, but I have encountered a strange issue where I cannot inject a service into one of my components. It injects fine into any of the three other components I have ...
447
votes
6answers
150k views
What is the difference between declarations, providers, and import in NgModule?
I am trying to understand Angular (sometimes called Angular2+), then I came across @Module:
Imports
Declarations
Providers
Following Angular Quick Start
443
votes
6answers
239k views
Can't bind to 'formControl' since it isn't a known property of 'input' - Angular2 Material Autocomplete issue
I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template.
<md-input-container>
<input mdInput placeholder="Category" [...
439
votes
14answers
661k views
How can I get new selection in “select” in Angular 2?
I am using Angular 2 (TypeScript).
I want to do something with the new selection, but what I get in onChange() is always the last selection. How can I get the new selection?
<select [(ngModel)]="...
439
votes
3answers
57k views
What is the meaning of the “at” (@) prefix on npm packages?
In the Angular Component Router documentation I just stumbled over a npm command I have never seen before and I don't understand what is going on:
npm install @angular/router --save
What is the ...
432
votes
5answers
297k views
Triggering change detection manually in Angular
I'm writing an Angular component that has a property Mode(): string.
I would like to be able to set this property programmatically not in response to any event.
The problem is that in the absence of ...
425
votes
22answers
397k views
Error: More than one module matches. Use skip-import option to skip importing the component into the closest module
When I try to create a component in the angular cli, it's showing me this error. How do I get rid of it ?
Error: More than one module matches. Use skip-import option to skip importing the component ...
420
votes
28answers
301k views
ExpressionChangedAfterItHasBeenCheckedError Explained
Please explain to me why I keep getting this error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Obviously, I only get it in dev mode, it doesn't happen ...
411
votes
10answers
143k views
Angular exception: Can't bind to 'ngForIn' since it isn't a known native property
What am I doing wrong?
import {bootstrap, Component} from 'angular2/angular2'
@Component({
selector: 'conf-talks',
template: `<div *ngFor="let talk in talks">
{{talk.title}} by {{talk....
406
votes
4answers
697k views
(change) vs (ngModelChange) in angular
Angular 1 does not accept onchange() event, it's only accepts ng-change() event.
Angular 2, on the other hand, accepts both (change) and (ngModelChange) events, which both seems to be doing the same ...
391
votes
8answers
277k views
Angular - Use pipes in services and components
In AngularJS, I am able to use filters (pipes) inside of services and controllers using syntax similar to this:
$filter('date')(myDate, 'yyyy-MM-dd');
Is it possible to use pipes in services/...
376
votes
27answers
199k views
Angular 2 Scroll to top on Route Change
In my Angular 2 app when I scroll down a page and click the link at the bottom of the page, it does change the route and takes me to the next page but it doesn't scroll to the top of the page. As a ...
374
votes
12answers
241k views
How to bundle an Angular app for production
What is the best method to bundle Angular (version 2, 4, 6, ...) for production on a live web server.
Please include the Angular version within answers so we can track better when it moves to later ...
373
votes
24answers
498k views
How to use jQuery with Angular?
Can anyone tell me, how to use jQuery with Angular?
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
I'm aware there are workarounds like ...
364
votes
22answers
401k views
Angular error: “Can't bind to 'ngModel' since it isn't a known property of 'input'”
I'm using Angular 4 and I am getting an error in the console:
Can't bind to 'ngModel' since it isn't a known property of 'input'
How can I resolve this?
361
votes
18answers
308k views
Expression ___ has changed after it was checked
Why is the component in this simple plunk
@Component({
selector: 'my-app',
template: `<div>I'm {{message}} </div>`,
})
export class App {
message:string = 'loading :(';
...
357
votes
21answers
473k views
Angular - Set headers for every request
I need to set some Authorization headers after the user has logged in, for every subsequent request.
To set headers for a particular request,
import {Headers} from 'angular2/http';
var headers = ...
356
votes
18answers
374k views
Angular no provider for NameService
I've got a problem loading a class into an Angular component. I've been trying to solve it for a long time; I've even tried joining it all in a single file. What I have is:
Application.ts
/// <...
351
votes
12answers
536k views
Angular 2 change event on every keypress
The change event is only called after the focus of the input has changed. How can I make it so that the event fires on every keypress?
<input type="text" [(ngModel)]="mymodel" (change)="...
347
votes
26answers
375k views
Angular 4: no component factory found,did you add it to @NgModule.entryComponents?
I'm using Angular 4 template with webpack
and I have this error when I try to use a component (ConfirmComponent):
No component factory found for ConfirmComponent. Did you add it to
@NgModule....
345
votes
18answers
204k views
Angular CLI SASS options
I'm new to Angular and I'm coming from the Ember community. Trying to use the new Angular-CLI based off of Ember-CLI.
I need to know the best way to handle SASS in a new Angular project. I tried ...
344
votes
31answers
279k views
In Angular, how do you determine the active route?
NOTE: There are many different answers here, and most have been valid at one time or another. The fact is that what works has changed a number of times as the Angular team has changed its Router. The ...
344
votes
16answers
228k views
Angular EXCEPTION: No provider for Http
I am getting the EXCEPTION: No provider for Http! in my Angular app. What am I doing wrong?
import {Http, Headers} from 'angular2/http';
import {Injectable} from 'angular2/core'
@Component({
...
340
votes
19answers
257k views
Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null]
I have a problem with HTTP in Angular.
I just want to GET a JSON list and show it in the view.
Service class
import {Injectable} from "angular2/core";
import {Hall} from "./hall";
import {Http} ...
337
votes
37answers
392k views
NPM Install Error:Unexpected end of JSON input while parsing near '…nt-webpack-plugin“:”0'
When creating a new Angular 5 project:
node version: 8.9.2
npm version: 5.5.1
My Command is:
npm install -g @angular/cli
The Error is:
npm ERR! **Unexpected end of JSON input while parsing near '......
328
votes
18answers
546k views
How do I pass data to Angular routed components?
In one of my Angular 2 routes's templates (FirstComponent) I have a button
first.component.html
<div class="button" click="routeWithData()">Pass data and route</div>
My goal is to ...
327
votes
3answers
327k views
Can't bind to 'ngIf' since it isn't a known property of 'div' [duplicate]
Can't bind to 'ngIf' since it isn't a known property of 'div'.
The element is <div [ngIf]="isAuth" id="sidebar">
And the component is:
import SessionService from '../session/...
