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
410
votes
26 answers

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 manipulating the class or id of the DOM element upfront, but…
Waog
  • 7,127
  • 5
  • 25
  • 37
407
votes
19 answers

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

I am using TypeScript Version 2 for an Angular 2 component code. I am getting error "Property 'value' does not exist on type 'EventTarget'" for below code, what could be the solution. Thanks! e.target.value.match(/\S+/g) || []).length import {…
user584018
  • 10,186
  • 15
  • 74
  • 160
404
votes
22 answers

How to style child components from parent component's CSS file?

I've got a parent component: And I want to populate this group with child components: Parent template:
…
Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
403
votes
9 answers

Convert Promise to Observable

I am trying to wrap my head around observables. I love the way observables solve development and readability issues. As I read, benefits are immense. Observables on HTTP and collections seem to be straight forward. How can I convert something like…
Krishnan Sriram
  • 5,037
  • 5
  • 21
  • 31
399
votes
38 answers

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 '...nt-webpack-plugin":"0'** npm ERR! A complete log…
kathir
  • 4,255
  • 2
  • 15
  • 25
397
votes
14 answers

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 releases.
Pat M
  • 5,966
  • 7
  • 24
  • 34
395
votes
21 answers

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?
Vijay Kumar
  • 4,059
  • 3
  • 11
  • 6
393
votes
19 answers

@ViewChild in *ngIf

Question What is the most elegant way to get @ViewChild after corresponding element in template was shown? Below is an example. Also Plunker available. Component.template.html:
sinedsem
  • 5,413
  • 7
  • 29
  • 46
388
votes
10 answers

How to add conditional attribute in Angular 2?

How can I conditionally add an element attribute e.g. the checked of a checkbox? Previous versions of Angular had NgAttr and I think NgChecked which all seem to provide the functionality that I'm after. However, these attributes do not appear to…
Jon Miles
  • 9,605
  • 11
  • 46
  • 66
388
votes
31 answers

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 Router 3.0 version that will eventually be the…
Michael Oryl
  • 20,856
  • 14
  • 77
  • 117
387
votes
23 answers

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 = new Headers(); headers.append(headerName,…
Avijit Gupta
  • 5,676
  • 3
  • 20
  • 35
384
votes
18 answers

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 ///
M.Svrcek
  • 5,485
  • 4
  • 25
  • 33
383
votes
28 answers

Angular 2 @ViewChild annotation returns undefined

I am trying to learn Angular 2. I would like to access to a child component from a parent component using the @ViewChild Annotation. Here some lines of code: In BodyContent.ts I have: import { ViewChild, Component, Injectable } from…
Andrea Ialenti
  • 4,380
  • 2
  • 19
  • 22
382
votes
23 answers

How to generate components in a specific folder with Angular CLI?

I am using Angular 4 with Angular CLI and I am able to create a new component with the following command. E:\HiddenWords>ng generate component plainsight But I need to generate a child component inside plainsight. Is there a way to do it with…
user8520658
381
votes
53 answers

ng is not recognized as an internal or external command

Running windows 7 Professional 32bit. I tried running npm install -g angular-cli both under normal or admin. I also tried adding it to the Enviorment Variables under PATH: (C:\Users\Administrator\AppData\Roaming\npm\node_modules\angular-cli\bin\ng)…
Cristian Muscalu
  • 9,007
  • 12
  • 44
  • 76
1 2 3
…
99 100