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
290
votes
15 answers

How to redirect to an external URL in Angular2?

What is the method for redirecting the user to a completely external URL in Angular 2. For example, if I need to redirect the user to an OAuth2 server in order to authenticate, how would I do that? Location.go(), Router.navigate(), and…
Michael Oryl
  • 20,856
  • 14
  • 77
  • 117
289
votes
6 answers

tslint / codelyzer / ng lint error: "for (... in ...) statements must be filtered with an if statement"

Lint error message: src/app/detail/edit/edit.component.ts[111, 5]: for (... in ...) statements must be filtered with an if statement Code snippet (It is a working code. It is also available at angular.io form validation section): for (const…
Jek
  • 5,546
  • 9
  • 37
  • 67
288
votes
51 answers

"Port 4200 is already in use" when running the ng serve command

I am learning angular 2 and for the first time I am using the angular CLI project to create a sandbox project. I was able to run the command "ng serve" and it works great. I wanted to stop it from running so I ran "Control Z". When I tried to run…
peztherez
  • 3,751
  • 5
  • 20
  • 21
287
votes
9 answers

What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

What is the difference between ng-bootstrap and ngx-bootstrap? Are they related to each other? Or are they simply concurrent implementations? Has someone worked with them both and can give/explain pros and cons of both? With ng-bootstrap I mean…
wolfrevo
  • 6,651
  • 2
  • 26
  • 38
287
votes
4 answers

What are the "spec.ts" files generated by Angular CLI for?

I am using Angular CLI to generate and serve projects. It seems to work well – though for my little learning projects, it produces more than I need – but that's to be expected. I've noticed that it generates spec.ts for each Angular element in a…
spring
  • 18,009
  • 15
  • 80
  • 160
287
votes
5 answers

ngOnInit not being called when Injectable class is Instantiated

Why isn't ngOnInit() called when an Injectable class is resolved? Code import {Injectable, OnInit} from 'angular2/core'; import { RestApiService, RestRequest } from './rest-api.service'; @Injectable() export class MovieDbService implements OnInit…
Levi Fuller
  • 13,631
  • 4
  • 38
  • 44
285
votes
11 answers

Manually Set Value for FormBuilder Control

This is driving me nuts, I'm under the gun and can't afford to spend another whole day on this. I am trying to manually set a control value ('dept') within the component, and it's just not working - even the new value logs to console properly. Here…
Matthew Brown
  • 4,876
  • 3
  • 18
  • 21
285
votes
12 answers

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

Obviously the beta for Angular2 is newer than new, so there's not much information out there, but I am trying to do what I think is some fairly basic routing. Hacking about with the quick-start code and other snippets from the https://angular.io…
PeterByte
  • 3,534
  • 2
  • 20
  • 16
284
votes
12 answers

How to rename a component in Angular CLI?

Is there any shortcut to rename a component with the Angular CLI other than manually editing all the component files such as folder name, .css, .ts, spec.ts and app.module.ts?
Thomas Easo
  • 3,457
  • 3
  • 21
  • 32
284
votes
15 answers

Angular2 If ngModel is used within a form tag, either the name attribute must be set or the form

I am getting this error from Angular 2 core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: Error in app/model_exposure_currencies/model_exposure_currencies.component.html:57:18 caused by: If ngModel is used within a form tag, either the…
Tampa
  • 75,446
  • 119
  • 278
  • 425
284
votes
8 answers

Call child component method from parent class - Angular

I have created a child component which has a method I want to invoke. When I invoke this method it only fires the console.log() line, it will not set the test property?? Below is the quick start Angular app with my changes. Parent import { Component…
shammelburg
  • 6,974
  • 7
  • 26
  • 34
282
votes
17 answers

How to get query params from url in Angular 2?

I use angular2.0.0-beta.7. When a component is loaded on a path like /path?query=value1 it is redirected to /path. Why were the GET params removed? How can I preserve the parameters? I have an error in the routers. If I have a main route…
FireGM
  • 2,971
  • 2
  • 12
  • 10
282
votes
7 answers

Delegation: EventEmitter or Observable in Angular

I am trying to implement something like a delegation pattern in Angular. When the user clicks on a nav-item, I would like to call a function which then emits an event which should in turn be handled by some other component listening for the…
the_critic
  • 12,720
  • 19
  • 67
  • 115
281
votes
17 answers

Angular 2 - NgFor using numbers instead collections

...for example...
...
Is possible to do something like...
...
...without appeal to a non elegant solution like:
Marco Jr
  • 6,496
  • 11
  • 47
  • 86
281
votes
5 answers

What's the difference between @ViewChild and @ContentChild?

Angular 2 provides @ViewChild, @ViewChildren, @ContentChild and @ContentChildren decorators for querying a component's descendant elements. What's the difference between the first two and the latter two?
drew moore
  • 31,565
  • 17
  • 75
  • 112
1 2 3
…
99 100