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
2071
votes
49 answers

Can't bind to 'ngModel' since it isn't a known property of 'input'

I have this simple input in my component which uses [(ngModel)] : And I get the following error when I launch my app, even if the component is not displayed. zone.js:461 Unhandled Promise…
Anthony Brenelière
  • 60,646
  • 14
  • 46
  • 58
1848
votes
34 answers

What is the difference between Promises and Observables?

What is the difference between Promise and Observable in Angular? An example on each would be helpful in understanding both the cases. In what scenario can we use each case?
Rohit
  • 18,575
  • 3
  • 11
  • 9
1467
votes
27 answers

Difference between Constructor and ngOnInit

Angular provides life cycle hook ngOnInit by default. Why should ngOnInit be used, if we already have a constructor?
Haseena P A
  • 16,858
  • 4
  • 18
  • 35
1299
votes
48 answers

Can't bind to 'formGroup' since it isn't a known property of 'form'

The situation I am trying to make what should be a very simple form in my Angular application, but no matter what, it never works. The Angular version Angular 2.0.0 RC5 The error Can't bind to 'formGroup' since it isn't a known property of…
FrancescoMussi
  • 20,760
  • 39
  • 126
  • 178
1161
votes
24 answers

Angular: conditional class with *ngClass

What is wrong with my Angular code? I am getting the following error: Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass
  1. Step1
  2. daniel
    • 34,281
    • 39
    • 104
    • 158
1083
votes
24 answers

Angular HTML binding

I am writing an Angular application and I have an HTML response I want to display. How do I do that? If I simply use the binding syntax {{myVal}} it encodes all HTML characters (of course). I need somehow to bind the innerHTML of a div to the…
Aviad P.
  • 32,036
  • 14
  • 103
  • 124
1020
votes
29 answers

Angular/RxJS When should I unsubscribe from `Subscription`

When should I store the Subscription instances and invoke unsubscribe() during the ngOnDestroy life cycle and when can I simply ignore them? Saving all subscriptions introduces a lot of mess into component code. HTTP Client Guide ignore…
1010
votes
14 answers

What is the difference between BehaviorSubject and Observable?

I'm looking into the design patterns of RxJS, and I do not understand the difference between BehaviorSubject and Observable. From my understanding, BehaviorSubject can contain a value that may change. It can be subscribed to and subscribers can…
Kevin Mark
  • 10,173
  • 3
  • 10
  • 10
974
votes
22 answers

How can I use "*ngIf else"?

I'm using Angular and I want to use *ngIf else (available since version 4) in this example:
content here ...
other content here...
How can I achieve the same behavior with ngIf else?
El houcine bougarfaoui
  • 35,805
  • 9
  • 37
  • 37
889
votes
10 answers

ngFor with index as value in attribute

I have a simple ngFor loop which also keeps track of the current index. I want to store that index value in an attribute so I can print it. But I can't figure out how this works. I basically have this:
883
votes
47 answers

Angular 6 - Could not find module "@angular-devkit/build-angular"

After updating to Angular 6.0.1, I get the following error on ng serve: Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName". Error: Could not find module "@angular-devkit/build-angular" from…
ForestG
  • 17,538
  • 14
  • 52
  • 86
866
votes
37 answers

Property '...' has no initializer and is not definitely assigned in the constructor

in my Angular app i have a component: import { MakeService } from './../../services/make.service'; import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-vehicle-form', templateUrl: './vehicle-form.component.html', …
Mikhail Kostiuchenko
  • 9,121
  • 4
  • 15
  • 28
832
votes
20 answers

How to detect when an @Input() value changes in Angular?

I have a parent component (CategoryComponent), a child component (videoListComponent) and an ApiService. I have most of this working fine i.e. each component can access the json api and get its relevant data via observables. Currently video list…
Jon Catmull
  • 11,873
  • 5
  • 19
  • 17
747
votes
41 answers

How to get current route

The current docs only talk about getting route params, not the actual route segments. For example, if i want to find the parent of current route, how is that possible?
pdeva
  • 43,605
  • 46
  • 133
  • 171
737
votes
23 answers

What is the equivalent of ngShow and ngHide in Angular 2+?

I have a number of elements that I want to be visible under certain conditions. In AngularJS I would write
stuff
How can I do this in Angular 2+?
Mihai Răducanu
  • 12,225
  • 4
  • 22
  • 31
1
2 3
99 100