Stack Overflow
Stack Overflow

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.

The spiritual successor to the older AngularJS web framework.
(Questions about the older framework should use the tag instead.)

Features and Benefits

Building Blocks of Angular Apps

  • Module: A typical module is a cohesive block of code dedicated to a single purpose. A module exports something of value in that code, typically one thing such as a class.

  • Component: A component is a building block with component metadata. In TypeScript, we'd apply the @Component decorator to attach metadata to the class. This metadata mainly consists of the template or templateUrl, the selector, and the attached styling.

  • Template: We define a Component's view with its companion template. A template is a form of HTML that tells Angular how to render the Component.

  • Metadata: Metadata tells Angular how to process a class.

  • Data Binding: Angular supports data binding, a mechanism for coordinating parts of a template with parts of a component. There are four forms of data-binding syntax:

    • Interpolation: {{value}}
    • Property binding : [property]="value"
    • Event Binding : (event)="handler"
    • Two-way data binding: [(ngModel)]="property"

  • Service: "Service" is a broad category encompassing any value, function or feature that our application needs.

  • Directive: A directive is a class with directive metadata. In TypeScript, we'd apply the @Directive decorator to attach metadata to the class.

  • Dependency Injection: "Dependency Injection" is a way to supply a new instance of a class with the fully-formed dependencies it requires. Most dependencies are services. Angular uses dependency injection to provide new components with the services they need.

  • Pipes: Pipes are used for transforming values from one form to another. Angular offers many built-in pipes. Also, you can create custom pipes too.

See the changelog for latest version information.

As of Oct 2022, the current version is 14.2.0 See the full release schedule on the official GitHub repository. Angular versioning follows Semantic Versioning principles; all major versions feature some breaking changes over the previous ones.

Consider using the Update Guide for tips before changing the version.

Browser Support

  • Latest versions of Chrome, Edge, Firefox, IE, and Safari
  • Tested for older browsers including IE9+ and Android 4.1+

Useful links

Books

Code Editors & IDEs

Rich UI components for Angular

Cross-Platform Development

Related tags

Official Logo:

angular logo

Official Website:

angular.io

299281 questions
726
votes
15 answers

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 from the tutorial: import {Component} from…
Aman Gupta
  • 7,883
  • 5
  • 16
  • 24
703
votes
34 answers

Unable to resolve dependency tree error when installing npm packages

When trying to install the npm packages using npm i command, I am getting the following exception: I have tried reinstalling the Node.js package and setting the proxy to off using: set HTTP_PROXY= set HTTPS_PROXY= The issue is still there. What I…
Pearl
  • 8,373
  • 8
  • 40
  • 59
703
votes
25 answers

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 dependency but it doesn't resolve the issue In…
Himmet Yelekin
  • 7,091
  • 2
  • 15
  • 14
666
votes
21 answers

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) in demo" but I don't know how to do the same in…
Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215
655
votes
32 answers

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 the user is logged in so that I can redirect the user if the user is not logged in.
AngularM
  • 15,982
  • 28
  • 94
  • 169
646
votes
14 answers

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 mistake or I missed something, so I decided to use…
Moshe Shaham
  • 15,448
  • 22
  • 74
  • 114
635
votes
18 answers

*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 fails when trying to access its properties in the…
garethdn
  • 12,022
  • 11
  • 49
  • 83
626
votes
4 answers

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 meaning of @angular/router? Is the whole string a…
jbandi
  • 17,499
  • 9
  • 69
  • 81
575
votes
29 answers

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 -> Page C, click it, back to page B. Does router…
Hongbo Miao
  • 45,290
  • 60
  • 174
  • 267
566
votes
5 answers

WARNING in budgets, maximum exceeded for initial

When building my Angular 7 project with --prod, I receive a warning in budgets. I have an Angular 7 project. I am trying to build it, but I keep getting the following warning: WARNING in budgets, maximum exceeded for initial. Budget 2 MB was…
Masoud Bimmar
  • 6,941
  • 4
  • 30
  • 33
558
votes
24 answers

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 into the closest module. I'm using angular cli…
Anamul Haque
  • 7,069
  • 5
  • 23
  • 38
557
votes
31 answers

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 on my production build, but it's very annoying and…
Kevin LeStarge
  • 8,142
  • 4
  • 21
  • 34
550
votes
12 answers

@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?
Prasanjit Dey
  • 5,914
  • 3
  • 13
  • 15
544
votes
11 answers

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.
Lahiru Chandima
  • 22,324
  • 22
  • 103
  • 179
536
votes
16 answers

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: `

My Application