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
280
votes
5 answers

Angular2 @Input to a property with get/set

I have an Angular2 component in that component it currently has a bunch fields that have @Input() applied before them to allow binding to that property, i.e. @Input() allowDay: boolean; What I would like to do is actually bind to a property with…
Paul Cavacas
  • 4,194
  • 5
  • 31
  • 60
279
votes
11 answers

How to add "class" to host element?

I dont't know how to add to my component a dynamic class attribute but inside the template html (component.html). The only solution I found is to modify the item via "ElementRef" native element. That solution seems a little…
lascarayf
  • 3,423
  • 3
  • 19
  • 24
276
votes
7 answers

What's the difference between an Angular component and module

I've been watching videos and reading articles but this specific article make me so confused, at the start of the article it says The applications in Angular follow modular structure. The Angular apps will contain many modules, each dedicated to…
Luis Pena
  • 4,132
  • 2
  • 15
  • 23
275
votes
29 answers

Property 'map' does not exist on type 'Observable'

I am trying to call an API from Angular but am getting this error: Property 'map' does not exist on type 'Observable' The answers from this similar question didn't solve my issue: Angular 2 beta.17: Property 'map' does not exist on type…
Malik Kashmiri
  • 5,741
  • 11
  • 44
  • 80
274
votes
15 answers

Angular 2 Checkbox Two Way Data Binding

I´m fairly new to Angular2 and I have a little problem: In my Login-Component-HTML, I have two checkboxes, which I want to bind in two way data-binding to the Login-Component-TypeScript. This is the HTML:
273
votes
9 answers

How to implement sleep function in TypeScript?

I'm developing a website in Angular 2 using TypeScript and I was wondering if there was a way to implement thread.sleep(ms) functionality. My use case is to redirect the users after submitting a form after a few seconds which is very easy in…
kha
  • 19,123
  • 9
  • 34
  • 67
272
votes
10 answers

TSLint extension throwing errors in my Angular application running in Visual Studio Code

I recently started seeing, what seems like, TSLint errors. They look like this: Not using the local TSLint version found for '/Users/myname/myproject/client/src/app/likes/likee/likee.component.ts'. To enable code execution from the current…
chuckd
  • 13,460
  • 29
  • 152
  • 331
272
votes
5 answers

What's the difference between markForCheck() and detectChanges()

What is the difference between ChangeDetectorRef.markForCheck() and ChangeDetectorRef.detectChanges()? I only found information on SO as to the difference between NgZone.run(), but not between these two functions. For answers with only a reference…
parliament
  • 21,544
  • 38
  • 148
  • 238
272
votes
9 answers

How to pass a parameter to routerLink that is somewhere inside the URL?

I know I can pass a parameter to routerLink for routes such as /user/:id by writing [routerLink]="['/user', user.id]" but what about routes such as this one: /user/:id/details Is there a way to set this parameter or should I consider a different…
Thorsten Westheider
  • 10,572
  • 14
  • 55
  • 97
270
votes
8 answers

What is the purpose of providedIn with the Injectable decorator when generating Services in Angular 6?

When generating services in the Angular CLI, it is adding extra metadata with a 'provided in' property with a default of 'root' for the Injectable decorator. @Injectable({ providedIn: 'root', }) What exactly does providedIn do? I am assuming…
Stefan Zvonar
  • 3,959
  • 3
  • 24
  • 30
270
votes
3 answers

Get current url in Angular

How can I get the current url in Angular 4? I've searched the web for it a lot, but am unable to find solution. app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { RouterModule,…
user7773109
268
votes
24 answers

Disable Input fields in reactive form

I already tried to follow the example of other answers from here and I did not succeed! I created a reactive form (ie, dynamic) and I want to disable some fields at any given time. My form code: this.form = this._fb.group({ name: ['',…
Renato Souza de Oliveira
  • 4,236
  • 4
  • 20
  • 31
267
votes
22 answers

How to use moment.js library in angular 2 typescript app?

I tried to use it with typescript bindings: npm install moment --save typings install moment --ambient -- save test.ts: import {moment} from 'moment/moment'; And without: npm install moment --save test.ts: var moment =…
Sergey Aldoukhov
  • 22,316
  • 18
  • 72
  • 99
264
votes
11 answers

How to call another components function in angular2

I have two components as follows and I want to call a function from another component. Both components are included in the third parent component using directive. Component 1: @component( selector:'com1' ) export class com1{ …
noobProgrammer
  • 2,884
  • 3
  • 17
  • 20
264
votes
32 answers

How do I download a file with Angular2 or greater

I have a WebApi / MVC app for which I am developing an angular2 client (to replace MVC). I am having some troubles understanding how Angular saves a file. The request is ok (works fine with MVC, and we can log the data received) but I can't figure…
rll
  • 5,509
  • 3
  • 31
  • 46
1 2 3
…
99 100