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
371
votes
17 answers

Format date as dd/MM/yyyy using pipes

I'm using the date pipe to format my date, but I just can't get the exact format I want without a workaround. Am I understanding pipes wrongly or is just not possible? //our root app component import {Component} from 'angular2/core' @Component({ …
Jp_
  • 5,973
  • 4
  • 25
  • 36
370
votes
25 answers

How to apply filters to *ngFor?

Apparently, Angular 2 will use pipes instead of filters as in Angular1 in conjunction with ng-for to filter results, although the implementation still seems to be vague, with no clear documentation. Namely what I'm trying to achieve could be viewed…
Khaled
  • 8,255
  • 11
  • 35
  • 56
369
votes
19 answers

How to allow access outside localhost

How can I allow access outside the localhost at Angular2? I can navigate at localhost:3030/panel easily but I can not navigate when I write my IP such as 10.123.14.12:3030/panel/. Could you please allow me how to fix it? I am not using npm (node…
Tonyukuk
  • 5,745
  • 7
  • 35
  • 63
368
votes
5 answers

Is there a compatibility list for Angular / Angular-CLI and Node.js?

I periodically run into the problem, having to spin up old Angular projects with deprecated dependencies of Angular. Because I unsually run the latest Node.js version (at least lates LTS version) I often had the problem, that I wasn't able to get…
jowey
  • 7,581
  • 6
  • 27
  • 46
368
votes
10 answers

Send data through routing paths in Angular

Is there anyway to send data as parameter with router.navigate? I mean, something like this example, as you can see the route has a data parameter, but doing this it's not working: this.router.navigate(["heroes"], {some-data: "othrData"}) because…
Motomine
  • 4,205
  • 5
  • 20
  • 23
366
votes
25 answers

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.entryComponents? The component is declared in…
mrapi
  • 5,831
  • 8
  • 37
  • 57
365
votes
18 answers

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 on Ember-CLI. I need to know the best way to handle SASS in a new Angular project. I tried using the ember-cli-sass repo to see if it would play…
JDillon522
  • 19,046
  • 15
  • 47
  • 81
362
votes
19 answers

Angular window resize event

I would like to perform some tasks based on the window re-size event (on load and dynamically). Currently I have my DOM as follows:
…
DanAbdn
  • 7,151
  • 7
  • 27
  • 38
359
votes
15 answers

Stop mouse event propagation

What is the easiest way to stop mouse events propagation in Angular ? Should I pass special $event object and call stopPropagation() myself or there is some other way. For example in Meteor, I can simply return false from event handler.
Roman Kolesnikov
  • 11,777
  • 11
  • 44
  • 67
356
votes
17 answers

Exception: Can't bind to 'ngFor' since it isn't a known native property

What am I doing wrong? import {bootstrap, Component} from 'angular2/angular2' @Component({ selector: 'conf-talks', template: `
{{talk.title}} by {{talk.speaker}}

{{talk.description}}

` }) class…
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
353
votes
11 answers

Is it necessary to unsubscribe from observables created by Http methods?

Do you need to unsubscribe from Angular 2 http calls to prevent memory leak? fetchFilm(index) { var sub = this._http.get(`http://example.com`) .map(result => result.json()) .map(json => { …
born2net
  • 24,129
  • 22
  • 65
  • 104
350
votes
16 answers

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({ selector: 'greetings-ac-app2', providers: [], …
daniel
  • 34,281
  • 39
  • 104
  • 158
348
votes
22 answers

What is the correct way to share the result of an Angular Http network call in RxJs 5?

By using Http, we call a method that does a network call and returns an http observable: getCustomer() { return this.http.get('/someUrl').map(res => res.json()); } If we take this observable and add multiple subscribers to it: let network$ =…
Angular University
  • 42,341
  • 15
  • 74
  • 81
348
votes
19 answers

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} from "angular2/http"; @Injectable() export class…
Claudiu Matei
  • 4,091
  • 3
  • 19
  • 33
345
votes
30 answers

How can I check which version of Angular I'm using?

How can I tell which version of Angular I am using? I have tried: angular --version angular --v angular -version angular -v but get -bash: angular: command not found I know by yeoman --version that I am using 0.9.6 But how do get the angularjs…
FluxEngine
  • 12,730
  • 14
  • 57
  • 83
1 2 3
…
99 100