Angular is a JavaScript open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.

Share tech news, updates, or what's on your mind.

Sign up to Post

hi am having this error in my app http error
import {Http} from '@angular/http';
import {EventEmitter, Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {Task} from './task.model';

export class TaskService {

    onTaskAdded = new EventEmitter<Task>();

    constructor(private http: Http) {


    getTasks() {
        return this.http.get('/api/tasks').map(response => response.json());

    saveTask(task: Task, checked: boolean) {
        task.completed = checked;
        return'/api/tasks/save', task).map(response => response.json());

    addTask(task: Task) {
        return'/api/tasks/save', task).map(response => response.json());


app module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TasksComponent } from './tasks/tasks.component';
import { TasksAddComponent } from './tasks/tasks-add/tasks-add.component';
import { TasksListComponent } from './tasks/tasks-list/tasks-list.component';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';

  declarations: [
  imports: [

  providers: [],

Open in new window

HTML5 and CSS3 Fundamentals
LVL 13
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

I am trying to create a popup when a user clicks the save button & that should have 2 options (Yes or No button). Popup should look similar to below screenshot.

I am using html & angularJS in my web application. How do i achieve this?

hi when creating new spring boot application in eclipse what must i choose
enterprise application or Dynamic web project i also what to add angular in this project and later use hirbinate
I have an angular application housed in a web part on SharePoint 2016.  It works and has been working as required and I was recently asked to add an animation to a div.  When I add the reference to ngAnimate to the controller, it breaks.

(function () {
  angular.module("App", ["ngAnimate"])


Open in new window

hi am geting a blank screen in my application but i have added component
component am in angular 8
this my application angulari get this when i do insepect
compiler.js:2175 Uncaught Error: Template parse errors:
'app-posts-create' is not a known element:
1. If 'app-posts-create' is an Angular component, then verify that it is part of this module.
2. If 'app-posts-create' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<!--The content below is only a placeholder and can be replaced.-->
<h1>Our First App</h1>
[ERROR ->]<app-posts-create></app-posts-create>
"): ng:///AppModule/AppComponent.html@2:0
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11292)
    at JitCompiler._parseTemplate (compiler.js:25837)
    at JitCompiler._compileTemplate (compiler.js:25825)
    at compiler.js:25769
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25769)
    at compiler.js:25682
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25681)
hi am geting the following error
ERROR in src/app/tasks/tasks-add/tasks-add.component.ts:24:17 - error TS2345: Argument of type '(newTask: Task) => void' is not assignable to param
eter of type '(value: Task[]) => void'.
  Types of parameters 'newTask' and 'value' are incompatible.
    Type 'Task[]' is missing the following properties from type 'Task': id, name, completed, dueDate

24                 (newTask: Task) => {

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i 「wdm」: Failed to compile.

my code is
import { Component, OnInit } from '@angular/core';
import { Task } from '../task.model';
import {TaskService} from '../task.service';

    selector: 'app-tasks-add',
    templateUrl: './tasks-add.component.html',
    styleUrls: ['./tasks-add.component.css']
export class TasksAddComponent implements OnInit {

    addTaskValue: string = null;

    constructor(private taskService: TaskService) { }

    ngOnInit() {


    onTaskAdd(event) {
        let task: Task = new Task(,false, this.getTodayAsString());
                (newTask: Task) => {
                    // clear the input
                    this.addTaskValue = ' ';

    getTodayAsString() {

Open in new window

I have 2 kendo Multiselect fields in my html page. After i select items from 1st multiselect & go pick items from second multiselect, 1st multiselect field becomes empty(meaning all the elements i select for first multiselect are removed). How do we resolve this issue??

Here is the angularJS Code

 $scope.select1Options = {
            placeholder: "Search Par...",
            noDataTemplate: 'No Partner&apos;s found',
            dataTextField: "Name",
            dataValueField: "Id",
            valuePrimitive: false,
            autoBind: false,
            //filter: "contains",
            //animation: {
            //    close: {
            //        effects: "fadeOut zoom:out",
            //        duration: 300
            //    },
            //    open: {
            //        effects: "fadeIn zoom:in",
            //        duration: 300
            //    }
            minLength: 3,
            dataSource: {
                //type: "odata",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 10,
                filtering: function (e) {
                    var filter = e.filter;

                    if (!filter.value) {
                        //prevent filtering if the filter does not value
                transport: {

                    read: {

Open in new window

We are developing our first Angular application within our department.
We have employed to consultants to do the coding using Angular 8, I believe.
We are a MS Visual Studio shop.

The consultants claim it is easier for them to develop using VS Code vs VS.NET.

Why would this be? And why wouldn't .NET offer an equivalent experience?
I’d like to be able to code a path from the directory that maps to the IIS application directory instead of paths that have the ../../ format, i.e. paths that go up from the current file.

I have an ASP.NET MVC application that has AngularJS that I inherited. I’m confused about how the paths work.
For example, in the Visual Studio project (called Survey), there is a Scripts folder that has a Survey folder with an app.js file. That app.js file has code like this:
.state('result', {
    url: "/result",
    templateUrl: "../Survey/Result",
    controller: "resultCtrl"

Open in new window

It looks like the application is unable to find Result.
I’m just shooting in the dark guessing where templateUrl starts.
I don’t know if it starts in the Survey folder that has the app.js, if it starts with the Result.cshtml file.
I also don’t know what it’s trying to reach. Is it telling the MVC router where to find Result?

I get even more confused because the project is called Survey, there is a controller called Survey, and a folder called /Scripts/Survey

The people who made this application created a path to a file like this:

Then, there is a /Scripts/Survey/service.js with code like:

I don’t see how /api, gets to /Controllers/api

It gets even worse when I publish it to an IIS web server (IIS 7.5, sadly) because then I have to change it to:
I have a thirdparty rest api and angular js frontend project that I inherited.

data is in json, and the code iterates over the collection and displays it.
as I don't have control over the api and what it returns , I want to hide certain items in the collections.

what are my options in angularjs?
Amazon Web Services
LVL 13
Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

I have a legacy AngularJS site that I'm maintaining.

All that I need to do is redirect  to

Notice the site is using the hash location strategy.

I would like to use the rewrite module in IIS.

I'll have to test the solution on our staging site that uses IIS version 7.5.

On our production servers I have IIS version 10.0.14393.0

Can someone let me know what the rewrite rules should look like

Need help!

I have setup an angular project which i have got it working with Azure DevOps, and i can build and deploy and target my hosted environment.

Now my problem is i need to target multi environments in the release pipeline (QA and PROD).

Inside my angular project i have (environment.ts, and with their own API's (localhost, QA and PROD url's), when i run locally in visual studio code in whatever build mode I can dynamically call localhost, QA or PROD URL.

In my release pipeline how would I be able to simulate that and extract each API and be able to deploy to each environment?

I'm working on an old angular project,
in one of my HTML page I have  this,

<tr class="abc" data-ng-repeat="items in vm.products">

this iterates through the item in the product list , return by the rest call , by the looks of it. I wanted to sort it by a particular data field.

so if the rest calls return json data as such
   id: ...
   name : ...
   price : ...
   quantity : ...

to sort it by price, can just change the code to --> data-ng-repeat="items in vm.products | orderBy:'price' "

just adding this to HTML page, didn't work.

do i have to change any other code for this?
I have a front end angularjs app and a backend web api project hosted in IIS.

both projects are deployed in the same server, but copied to multiple servers for load balancing purposes.

I want to log, if there is any errors that happens between the communication between these apps.

I am also getting "502 bad gateway " errors on the front end code.

can i capture these in IIS ?
I've just started with Jhipster and I would like to create a simple Glossary application.

Here's my model so far:
entity Term {
  name String required,
  description String required

entity Category {
  name String required,
  description String required

entity SubCategory{
  name String required,
  description String required

paginate Term, Category, SubCategory with pagination

Open in new window

Can you help me in correctly defining the relationships between the entities?

One Term can belong so many subcategories.

Each subcategory can belong only to one category, at least I think.

I am also not sure about the syntax to use, can you help?

I have always been a c#, .NET developer and our company is gradually transitioning to MVC and Angualr.  I am very new to MVC and Angular concepts, done a few courses about Angular and MVC on plural sight since last week and that is where I am at currently.

One the tasks I have on hand is to display a modal pop from from which needs to triggered to display from an MVC controller based on certain conditions and this modal pop up form which is a very basic form needs to be displayed using Angular.

This Modal pop up is as simple as it gets and will have a text box which needs to have an input of a 14 digit alpha numeric characters ( failure on providing it will show a validation error message on the modal pop up itself) a submit and a cancel button. On click of the submit button (after validation), the MVC controller needs to receive this value and continue its normal process.

Currently the MVC page where the modal pop up needs to be displayed has a few controls and a button. On click of this button the MVC controller calls the data access method and stores certain values in the DB. But if this 14 digit code is missing it currently throws an exception. Hence the need to for a modal popup for the user to enter the missing data.

I would very much appreciate if you can point me in the right direction by providing me some useful links or some code samples.

Thanks in advance AJ
HI Experts,

We're trying to evaluate whether or not Angular is a viable solution for us to use for our new web application.  As part of this evaluation process, the following questions has come up: Can a specific Angular page be called from a mobile device and pass in parameters?  Here's what I mean:  Let's say I have a mobile app that supports 50% of the functionality natively, while I want to "pass" the user over to our web application for the other 50%, i.e. Let's show the status of order X of user Y.  So we'd need to be able to authenticate user Y from the mobile app, open the Order History page of our website and display the order X of user Y.   Our current application is in MVC, where doing this is no problem.  Can this be done with a web application built in Angular 6.0 with .NET Core Web API back-end.  If yes, could someone share an example or two?

Thanks a bunch in advance!
I want to be able to insert text that is chosen by a user from a pop-up, and insert it into the caret position in a content editable div. I'm wondering how I could do that (specifically how do I get the caret position, and ensure that the caret position is not lost when the user is interacting with the pop-up) ?

If you could provide sample code that would be very helpful.
Hi Experts,
I'm working on an angular 7 project that requires text field (textarea)  to capture information along with emoji support. I've had a look at some of the existing libraries and thought that quill editor (exposed via ngx-quill) seemed to tick the boxes, it has a quill-emoji extension. The content created using this textarea will also be exposed via a mobile application.

I have managed to get most of the work completed, but I'm suspecting that the CSS is not being loaded properly (see image) since the pop-up is not rendered properly and the emoji's are rendered as the characters instead of the images etc...

screen grab of what is being rendered

I wanted to find out  :
Whether Quill is best choice in my use case (or whether there are any alternatives that are light weight)
What should I store in my db (so that it can be exposed in a mobile application - flutter) - i.e should I store just the quill data structure, the innerhtml, or both. What would make it easier to expose this via a mobile application ?
If there was another way to handle the emoji button (instead of displaying a toolbar) ?
CompTIA Cloud+
LVL 13
CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

Hi ,

How to setup a dynamic Link URL in the deploying dist folder?

I have created a test application with http service. In that application i have a detailed view page link ( <a href="test_server_URL"> Detailed View </a>). In this anchor tag i have the test server URL Link , i need to change this before applying in live server. How can it be done. I planning to change this as "Live_server_URL" and build the new dist folder with " ng build --prod " command. is this is the right way or else please guide me. Thank You.

  Need some guidance or sample code on how to build a calendar in Mobile.

I have a mobile app (cordova) angular 1 and I have to build a page with a calendar widget where user can create event. It should be  standalone pure angular/JS widget.

I have attached an image of calendar that I need to build

Thanks for your help
I am just getting started with Angular (

What I notice is every time I create a new project using the ng new myproject  (e.g. ng new angular-tour-of-heroes), it creates a (nodes_module) directory with like over 20,000 files.

I understand that in some cases you can set different settings that don't require all of the same nodes so that would create a different set of files for nodes_module.

But if I have multiple projects that all will use the same basic set of files, is there a way to share the nodes_module?

It seems that if I'm working on ten different projects at once that's an awful lot of files and disk space that is identical...

Is there a space saving option?

Also, if this is the best way to do this, is there a best practice for how to archive old projects.  In other words, if I have a project that I work on and turn over to a client, I no longer need it on my drive taking space. But if I want to save it in case the client wants me to replicate it again... is it okay just to save the src files or do I need to save the whole thing including the 24K+ nodes_modules?

We have around 10,000 rows in table which needs to be show in the browser. The example given in shows we can show 50,000 records very quickly

We are using Angular with ng-repeat which takes 2 minutes to load the table. We have created 5 columns. In which one of the column has a condition options which will be enabled based on certain conditions for each rows. Whenever we add few options to the button it takes more time

example, edit, delete, view etc., in the action button which is part of a column

We observed whenever we add option along with the ng-repeat with the options takes huge time to render the table.

How to speed up the rendering time ??? Please advise.

Hi all,
in order to translate my page and in according with this tutorial I done the following simple operations but I don't see any translated texy. Why? Thank you very much!

1) Translation definitions. In the new folder src/locale I created the files messages.en.xlf and, with the following code (obviously it changes the target for each language):

    <trans-unit id="introductionHeader" datatype="html">
      <target>Ciao i18n! (it-IT)</target>
      <note priority="1" from="description">An introduction header for this sample</note>
      <note priority="1" from="meaning">User welcome</note>
      <target state="new">bye bye</target>

Open in new window

2) Tag definition. In my html page I insert the following tag, with a placeholder:

    <h1 i18n="@@introductionHeader">

Open in new window

3) In angular.json file, I insert the following rows:

 "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/mobile-client",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/",
                "i18nFile": "src/locale/", //This
                "i18nLocale": "it",                       //This
                "i18nFormat": "xlf",                      // This
                "assets": [

Open in new window

Then I tried to build and serve but I don't see the translated text "bye bye". How can I solve it? Thank you very much!
Hi all,
from my Angular 6 form I should send some data reproducing the same configuration which I have in Postman (I send a screenshot with the complete configuration: not "form" but raw / Json).

How can I do this? Thank you very much. I searched some solutions but I found example only in other cases.


EDIT I try to edit to make my question more clear (I saw the -1 score, sorry if it is not clear). I have a set of data already retrieved from my Angular 6 / Material Design form and now I would sent this data to my backend (localhost:8080/something...). The configuration for this http post operation is in the attached screenshot: in my body, I choosen raw / Json options and all works correctly. Now, I should reproduce the same sent action also in my typescript component. How can I this request make? I tested some solutions but without any success. Thank all!

This is my code which doesn't work:

public login() {

        let userPassword = this.registrationForm.get('password').value;
        let userLogin = this.registrationForm.get('email').value;
        let userLangKey = 'en';

        const transferObject = {

            password: userPassword,
            login: userLogin,
            langKey: userLangKey


        const req ='http://localhost:8080/api/register/', {
            password: userPassword,
            login: userLogin,

Open in new window







Angular is a JavaScript open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.

Top Experts In