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
317
votes
18 answers

Property 'value' does not exist on type EventTarget in TypeScript

So the following code is in Angular 4 and I can't figure out why it doesn't work the way as expected. Here is a snippet of my handler: onUpdatingServerName(event: Event) { console.log(event); this.newserverName = event.target.value; //this wont…
Ravy
  • 3,599
  • 3
  • 11
  • 14
316
votes
20 answers

How to get query parameters from URL in Angular 5?

I'm using angular 5.0.3, I would like to start my application with a bunch of query parameters like /app?param1=hallo¶m2=123. Every tip given in How to get query params from url in Angular 2? does not work for me. Any ideas how to get query…
Lars
  • 3,576
  • 2
  • 15
  • 13
315
votes
42 answers

How to add bootstrap to an angular-cli project

We want to use bootstrap 4 (4.0.0-alpha.2) in our app generated with angular-cli 1.0.0-beta.5 (w/ node v6.1.0). After getting bootstrap and its dependencies with npm, our first approach consisted in adding them in…
Jerome
  • 4,472
  • 4
  • 18
  • 18
312
votes
14 answers

What is the best way to delete a component with CLI

I tried using "ng destroy component foo" and it tells me "The destroy command is not supported by Angular-CLI" How do we properly delete components with Angular CLI?
Jus10
  • 14,519
  • 21
  • 52
  • 77
311
votes
29 answers

How to add font-awesome to Angular 2 + CLI project

I'm using Angular 2+ and Angular CLI. How do I add font-awesome to my project?
Nik
  • 7,086
  • 6
  • 36
  • 52
309
votes
7 answers

Use component from another module

I have Angular 2.0.0 app generated with angular-cli. When I create a component and add it to AppModule's declarations array it's all good, it works. I decided to separate the components, so I created a TaskModule and a component TaskCard. Now I…
Evgeni Dimitrov
  • 21,976
  • 33
  • 120
  • 145
308
votes
9 answers

What is an unhandled promise rejection?

For learning Angular 2, I am trying their tutorial. I am getting an error like this: (node:4796) UnhandledPromiseRejectionWarning: Unhandled promise rejection (r …
Mohammad Sadiqur Rahman
  • 5,379
  • 7
  • 31
  • 45
307
votes
6 answers

What is the proper use of an EventEmitter?

I've read questions like Access EventEmitter Service inside of CustomHttp where the user uses EventEmitter in his service, but he was suggested in this comment not to use it and to use instead Observables directly in his services. I also read…
Eric Martinez
  • 31,277
  • 9
  • 92
  • 91
305
votes
2 answers

How can I write data attributes using Angular?

I feel like I am missing something. When I try to use a data attribute in my template, like this:
  1. {{ section.text }} …
Serj Sagan
  • 28,927
  • 17
  • 154
  • 183
304
votes
16 answers

Can't bind to 'routerLink' since it isn't a known property

Recently, I have started playing with angular 2. It's awesome so far. So, i have started a demo personal project for the sake of learning using angular-cli. With the basic routing setup, I now want to navigate to some routes from header, but since…
Umair Sarfraz
  • 5,284
  • 4
  • 22
  • 38
304
votes
12 answers

How to write unit testing for Angular / TypeScript for private methods with Jasmine

How do you test a private function in angular 2 ? class FooBar { private _status: number; constructor( private foo : Bar ) { this.initFooBar(); } private initFooBar(){ this.foo.bar( "data" ); this._status…
tymspy
  • 4,200
  • 2
  • 20
  • 35
302
votes
17 answers

Define global constants

In Angular 1.x you can define constants like this: angular.module('mainApp.config', []) .constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/') What would be the equivalent in Angular (with TypeScript)? I just don't want to repeat the API base…
AndreFeijo
  • 10,044
  • 7
  • 34
  • 64
298
votes
23 answers

Importing lodash into angular2 + typescript application

I am having a hard time trying to get the lodash modules imported. I've setup my project using npm+gulp, and keep hitting the same wall. I've tried the regular lodash, but also lodash-es. The lodash npm package: (has an index.js file in the package…
Davy
  • 6,295
  • 5
  • 27
  • 38
292
votes
7 answers

flatMap, flat, flatten doesn't exist on type any[]

I'm using Chrome 70 and Chrome does add methods .flatMap, .flatten, .flat. So my code does run as expected. Unfortunately, TypeScript doesn't like it. // data.flatMap lint error export const transformData = (data: any[]) => data.flatMap(abc => [ …
Azriz
  • 3,122
  • 2
  • 12
  • 13
291
votes
27 answers

TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"

I keep getting this error while using TypeScript's Angular2-forms framework: There is no directive with "exportAs" set to "ngForm" Here's my code project dependencies : "dependencies": { "@angular/common": "2.0.0-rc.6", …
Nassim MOUALEK
  • 4,702
  • 4
  • 25
  • 44
1 2 3
…
99 100