[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More







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

I am trying to edit a form in Angular 6 + Material Design. In the above code, I have 1 problems.

I would change the fa-envelope icon and I have searched in the Material Design folder, according to the tutorial I found. But no icon info or link was there; how are icons in material design managed? How can I change it?

Thanks all

    <form (ngSubmit)="login()" [formGroup]="registrationForm">
    	<div class="mt-4">
    	<mat-icon matPrefix fontSet="fa" fontIcon="fa-envelope" class="fa-24px text-center mr-3"></mat-icon>
    	<mat-form-field class="w-100">
    	   <input type="email" formControlName="test" matInput placeholder="Deine Name" required="required">

Open in new window

Introduction to Web Design
LVL 12
Introduction to Web Design

Develop a strong foundation and understanding of web design by learning HTML, CSS, and additional tools to help you develop your own website.

Hi all,
I am trying to create a login form in Angular 6. My test app check the data written from the current user and try to match with the data received from a remote service via http (post). This is the point: with a simple request as following, all works correctly. But what about a request also with header and token? How can I create a function with this information? Or, do you have a link with a specific tutorial for this case? Thank you very much!

PS: I almost never insert "urgent" for a request but this is really urgent!

    onlogin(): void {
    .subscribe(data => {
        this.data = data;
        this.loading = false});

Open in new window

(example from official Angular 6 Book, page 157)
How  can I  resolve  this Error?I am a newbie in Graphql..I am trying  to call  graphql  API in angular.Below is my  code

export type DataTagsNames = {

export type Query = {
	allDataTagsNames: DataTagsNames[];

Open in new window

export class ListComponent implements OnInit {
  datatagsdetails: Observable<DataTagsNames[]>;
  constructor(private apollo: Apollo) { }

  ngOnInit() {
    this.datatagsdetails = this.apollo.watchQuery<Query>({
      query: gql`
        query allDataTagsNames {
          DataTagsNames {

        map(result => result.data.allDataTagsNames)

Open in new window

I am trying to use Angular 7's drag and drop cdk to drag and drop mat-card. My code is quite complicated. I am creating mat-grid dynamically according to grid number (Raster is the property in JSON for this - in German). I want to just change the mat-card embedded in tile but when I drag one card from one place to another, entire layout of my grid changes. I dont want this. I just want to change the card from one postion to another. Below is my code.


<mat-grid-list cdkDropList class="example-list z-depth-5" cols="3" rowHeight="180px" gutterSize="8px" (cdkDropListDropped)="drop($event)">
  <mat-grid-tile class="example-box z-depth-4" *ngFor="let tile of tiles; let i = index" [colspan]="tile.cols" [rowspan]="tile.rows" cdkDrag>
    <mat-card class="add-new-flyer" *ngIf="tile.flyer == '-1'" id="p_{{tile.flyer}}">
      <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="space-evenly">
        <div fxLayout fxLayout fxLayout.xs="column" fxLayoutAlign="end" fxLayoutGap="10px" fxLayoutGap.xs="0">
          <div class="button">
            <button mat-mini-fab (click)="addNewWerbedata(tile.text)">
    <mat-card class="flyer-card" *ngIf="tile.flyer !== '-1'" id="p_{{tile.text}}">
      <div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="left" fxLayoutGap="10px" fxLayoutGap.xs="0">

Open in new window

Hallo, I would understand very well the Angular @HostBinding concept. Unfortunately, my book is very good but this concept is not very clear explained.

See please the code:

      selector: 'app-test-component',
      templateUrl: './test-component.component.html',
      styleUrls: ['./test-component.component.css']
    export class TestComponentComponent implements OnInit {
      @Input() dataModel:AppModel;
      @HostBinding('attr.class') cssClass = 'alfa';
      constructor() { 

Open in new window

My personal explanation: "host binding allow to set something in the host element (in this case the app-test-component tag) from within the component it self (in other words, from this file I mentioned below); in this case, I set the class attribute of this tag to the variable named cssClass and with attribute 'alfa'". Is it correct?

In this case, if I defined the 'alfa' style in the corrispondent css file, why I don't see this style (i.e. background color or something else) in the page which shows my component?

Thank you very much!
Hi all,
in the official ng-book (p. 73) I read that is possible indicate an angular 6 component tag in 2 different ways. Example from the official manual:

1) <inventory-app-root></inventory-app-root>
2) <div inventory-app-root></div>

but in my Angular application only the 1st way works.


 <div app-test-component></div>
(doesn't work)

Thank you very much
Hi i just purchased Winzip 22 yesterday

I'm trying to run a gzip application from the command line via http-server

eg.  http-server gzip
to gzip the Angular bundles down to a much smaller size

Any ideas how I can do this?

Gordon Cumming
Hi all, in continuous delivery / integration for a Java Web Application there is exact phases and step to observe. My question is: which are the corrispondente phases for Angular App? And for Android app?

Thank you very much
I am using angularjs 1. When I invoke the "updateProfile" below, it would display a modal dialog:

$scope.updateProfile = function(){
      modalService.showModal({}, modalOptions).then(function (result) {
        //my code

Open in new window

		.service('modalService', ['$uibModal',
    function ($uibModal) {

        var modalDefaults = {
            backdrop: true,
            keyboard: true,
            modalFade: true,

        var modalOptions = {
            closeButtonText: 'Close',
            actionButtonText: 'OK',
            headerText: 'Proceed?',
            bodyText: 'Perform this action?'
        this.showModal = function (customModalDefaults, customModalOptions) {
            if (!customModalDefaults) customModalDefaults = {};
            customModalDefaults.backdrop = 'static';
            return this.show(customModalDefaults, customModalOptions);
        this.show = function (customModalDefaults, customModalOptions) {
            //Create temp objects to work with since we're in a singleton service
            var tempModalDefaults = {};
            var tempModalOptions = {};

            //Map angular-ui modal custom defaults to modal defaults defined in service
            angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

            //Map modal.html $scope custom properties to defaults defined 

Open in new window

I have a form that was developed by a contractor that is no longer with us. It is written with Angular JS and I have been able to make some adjustments. However, I have been unsuccessful it getting a new field from one SharePoint list to be captured and then stamped to a new record on a list when the form is submitted below are all of the ts files that I believe are associated with this process. I have added the field name "SharedApprovalMailbox" everywhere that I think it should be applicable to get it stored and copied to the new record.  Please let me know what I am missing.  The list the value is stored in is 'TrainingUserGroupInventory'  the list being written to is 'Requests'.

CORE Service TS
import {Injectable, NgZone} from '@angular/core';
import {Http, Headers, RequestOptions, Request, RequestMethod, Response, URLSearchParams} from '@angular/http';
import {HttpClient, HttpParams, HttpHeaders, HttpErrorResponse} from '@angular/common/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import { sp, Web } from '@pnp/sp';
import { environment } from '../../environments/environment';
import { fromPromise } from 'rxjs/observable/fromPromise';

export class RequestService {
    public _requestTypes;
    public _curriculums;
    public _selReq;
    public _userProfile;
    public _wwidData;
    public _trgUgInv;
    public _distTrgs;
    constructor(private _http: HttpClient) { }
    public getWWIDDataByWWID(wwid) {

Open in new window

OWASP: Avoiding Hacker Tricks
LVL 12
OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.


I work on a nativescript angular application and wanted to schedule some tasks (example: each 10 minutes) where I do http requests, call my angular services, ...
Now, when the android phone is locked and charging there are no issues, but when the phone isn't charging and locked that's when stuff goes wrong.
The call is still handled (so my function gets handled), but my http calls take ages, and when I wake up the phone everything operates normally again.

Is there something I can do to go around this ? To have the http requests etc still going

Tested on galaxy s7
I am working with a Mobile app using XAML and WebView.  It is also using Angular.

In Angular, I know that this syntax is like a "placeholder" for actual data you want to put on the form:


But what I need help determining is what formatting is being applied to this date value?  The CSS class "dataColSig" is just setting the width to 23%.

 <tr><td class="labelColSig">Date:</td><td class="dataColSig">{{task.PartActualEndDate}}</td><td class="labelColSig">Date:</td><td class="dataColSig">{{task.ActualEndDate}}</td><td class="labelColSig">Date:</td><td class="dataColSig">{{task.ApprovedDate}}</td></tr>

Open in new window

There is a lot of .js code to wade through.  How can I quickly find where the date format is being applied by Angular?

Debugging this at runtime is tricky, since this is a XAML app using WebView to display the HTML page.  I can't simply right-click and "Inspect element" on the HTML page at runtime.

I can set breakpoints in the JavaScript and then turn on Script as the debug type in Visual Studio ... so I do have that.  It's just that none of the breakpoints seem to be getting hit where task.PartActualEndDate is referenced in the .js code (that I  can tell).

Screenshot of the date values at runtime:

format date angular
Hello, Experts!


Windows Server 2016
IIS version 8
the site lives in c:\inetpub\sales.cbac.com
ports are http 80 and https 443


What might be causing the issue of receiving data from a REST call using angular hosted on IIS 8 (see image attached)? I want to start a dialogue so you guys can ask more questions and I could provide more narrowed answers.
Hi experts. I'm integrating angular into my aspnet core project. Issue is, I can't seem to render my component(which I used as a tag in my .cshtml view). When i checked my console for the errors, I saw that it came with the runtime, polyfills, style, etc which I used in my <head> element..I removed them all, still didn't render... Is there a basic configuration I'm supposed to do before my angular component selectors can work as tags in my html? Thanks in advance
I was handed over a support tool by our contractor that is based on Angular JS. I have some basic understanding of how it functions, but I am having trouble turning off a check on a particular module that is required that an attachment is included before the form can be submitted to a SharePoint list. I have included the code for the HTML as well as the associated code files. Please advise what need to be changed to allow for an attachment to be included but NOT have it be required.

<!--removed this from submit button [disabled]='!trgIssueForm.valid'-->
<div [@routerTransition] class="panel panel-primary">
    <!--<h2>Request Management- <small>{{_requestService?._selReq?.Title}}</small></h2>-->
    <div class="panel-heading">
    <div class="panel-body">
        <form class="form-horizontal"
              [formGroup]="trgIssueForm" >
                <div class="checkbox">
                    <label class="formyself">
                        <input type="checkbox" formControlName="MyRequest">This request is for myself
                <div class="form-group">
                    <mat-form-field class="col-md-6">
                        <input matInput class="form-control" 

Open in new window

I have a problem making this code work in IE. I used "remove" but that's not the correct solution.

I'll go step by step

1. You can download the sample code here https://drive.google.com/file/d/1HGbYRMGBjl7_BFwsb10QJLlVPOGiEIBH/view
 click on page.html to see the example. Corresponding JS file is Reporting.js

2. Page loads. You see the options for the second dropdown
3. Choose, for example, LeaseNo, from the first dropdown. You see the second dropdown is enabled and you see the values in there
4. This is the line of code in Reporting.Js that does it
$('option', operatorSelect).not($("option[datatype *= '" + fieldDataType + "']", operatorSelect))
				.attr('disabled', 'disabled').remove();

Open in new window

5. It used to be this line but I had to change it because this didn't work in IE11
 $('option', operatorSelect).not($("option[datatype *= '" + fieldDataType + "']", operatorSelect)).hide();

Open in new window

6. This is the problem with using .remove() --> it removes the options. So now, if I choose another option from the first dropdown, the options that need to show up have been removed. Here's an example
.hide() won't work in IE11. If I use .remove...it actually removes the options. This is another example I found but I don't know how to implement it

I need to hide/display the options and make it work for IE11, Chrome and Edge. There has to be a way to do this.

I thought about cloning the original select options and then use that whenever use chooses another option from the first dropdown..like refreshing the second dropdown with each select... but that didn't work either.  I used this var $options = $("select.fieldOperator > option").clone();
Spring Boot and Angular: Serving static content

Hi Experts,

I have a springboot backend application and an angular front end. I have built the angular front-end copied the contents of dist directory to /src/main/resource/static.  The index.html in the static directory is served when I go to https://localhost:8443 and the links are working.  However, when I refresh the page, it goes to the whitelabel error page.  I have found a proposed solution to this from StackOverflow.  It too doesn't work.
public class ForwardController {

    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String redirect() {
        // Forward to home page so that route is preserved.
        return "forward:/";

Open in new window

However, using this just prints forward:/ on the refreshed browser.   Also, this too does not look like the solution I want.  I want to just refresh the page.
Any help would be appreciated.  Thank you
Explain how TypeScript fits into Angular?

I coded Angular 4 and am pretty sure I used TypeScript. But, I can not recall exactly where.

Please refresh my memory.

Advantages of Tensorflow.JS?

What are the benefits of using Tensorflow.JS in comparison to other Javascript frameworks?

Does it transpile like Angular?

What other frameworks are similar?

Is there any benefit to using Tensorflow.JS with a .NET back-end?

Amazon Web Services
LVL 12
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 want to create a form that collects a persons email address and then a dynamic list of check boxes. (The dynamic part will come from a DB query, but for purposes of this question, I am providing a sample scope array.

What I need help with is how to set up the ng-repeat to allow for that dynamic list to be made available as a set of post vals upon submit.  The following is a modified piece of the code for demo purposes.

Here is the key portion of my Angular Code:

$scope.seminars = [
    { id: 1, name: 'Seminar One' },
    { id: 2, name: 'Seminar Two' },
    { id: 3, name: 'Seminar Three' },
    { id: 4, name: 'Seminar Four' }

$scope.submitFm = function (data) {
	console.log("Arrival at submit for checkboxes");

Open in new window

And here is the HTML Code. I am creating a form that the attendee fills out to select which seminars they want to attend.  The first field of the form is email. The second field is a check field that I've created.  The third is my attempt at an ng-repeat to get the list of selected seminars.

<form id="attnFm" name="attnFm" class="form" ng-if="!msg">
       <input type="hidden" ng-model="attn.post_actions" ng-init="attn.post_actions='matm_attend'"/>
       <div class="row">
		 <label class="sr-only" for="email">email</label>
		 <input type="email" class="form-control" id="email"
                                         placeholder=" Email" 

Open in new window

Can't get bootstrap modal working. Just button is showing up but clicking on it doesn't do anything. Below is my app.component.html content from Angular.


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <!-- Bootstrap -->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

  <div class="content-fluid base-padding-top">

     <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="purchaseLabel">Purchase</h4>
            <div class="modal-body">

Open in new window

Good day, how do i link my aspnet mvc view with my angular? Thanks.
Why am I stuck on this?! can't be that hard.

1. You can see the sample code here https://drive.google.com/open?id=1Z4CJc4mjOLZ8O8rCV3aqF2zaxrY3ZddA
Download and please just click on page.html

2.  You see the third filter.  You can click on "Add" and dynamically add rows.
3. The third filter can be a text box or a dropdown.

4. I want to get the values of that third filter (dropdown or textbox), in order. The name is "FilterValues" and "camillatest" for the dropdown select.

5. I tried this and you can see it in Reporting.js but didn't work. I'll keep working on it and if I figure it out, I'll post back. So, I want to get value of textbox or the dropdown. Whatever the user has in the third filter.

var holdValues = []; //loop thru and add to this array

	$('.portfolio').each(function (index) {

		var val = $('#portfoliothirdfilter', this).find('select[name="camillatest"]').val()
		var val2 = $('select[name="camillatest"]', this).val();

Open in new window

Hi, I asked a question yesterday on how to integrate angular into my existing aspnet mvc app(vs 2017). It got solved as I could include angular folders. I'm a bit confused now, as to how to route my model-controller-view. Angular is supposed to be my front end technology, am I to include my controllers as classes in my angular src folder(.ts) or what? I'll love access to an article or github repo that clearly explains this concept of angular with MVC. Thanks Experts.!

We have mobile application, which is developed using  ionic one, CoffeeScript and angular one. When we build the application for the android and web, all images are showing correctly. But we build same application for IOS it not showing the images. Image path is correct and images is available inside of application bundle folder.

Also this application use cordova plugin file for the file management. All the images are getting from IOS application bundle.

When we build for IOS there is no errors or warnings.






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