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

Authentication of two users into 1 browser session at the same time.

I have a requirement for a system I am building that the authentication be made for two users on 1 session at a time. The use case would be two partners signing a mortgage. So, partner1 logs into the session with a login and a password and then there is a section to add another user, partner2, who logs in and then the authentication is now good for two signers of that mortgage. The prerequisite is that both have already created profiles on the system such that they have logins and passwords.

My question:
1. Does anyone know of a system or application that does this?

2. Any tips on how to handle this?

Platform is django and angular1.

Thank you.
Get your problem seen by more experts
LVL 12
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

I currently have an ASP.NET MVC application. I want to convert a portion of the application to a Single Page App with Angular. My plan is to create a new project in the solution that is just the Angular CLI development environment. The build output will be in a folder in my original ASP.NET project. For development I want to enable CORS to properly communicate between the two projects. Both will be served on localhost on different ports.

I've looked over solutions offered on this Stack Overflow question but it doesnt complete the picture. I've updated my web.config with the following:

              <add name="Access-Control-Allow-Origin" value="https://localhost:4200"/>

Open in new window

This allows me to hit the route but I still get a 404 with the OPTIONS preflight request. From what I've read on Stack Overflow and in the Microsoft Docs, I need to add

Open in new window

on the class or controller I want to hit. However this alwasys assumes I'm working with a Web API and not MVC.

How can I enable CORS for development only in an ASP.NET MVC project?

Question: How do I configure solution with a .NET Core application to use the same controllers, routes, and authentication handled by an ASP.NET application in the same solution?

Background: I have a project that is a single page application built with the ASP.NET Single Page Application template included in VS. The template creates a project using knockout as the SPA library. I am going to greatly expand the codebase of the application and we are going to move it to an Angular project.

I'd like to use the new Angular template that properly takes advantage of the Angular CLI as well as uses the more lightweight .NET Core. The problem is that I dont know how to take advantage of all the backend codebase currently maintained in the original ASP.NET application from the .NET Core project in the same solution.

I am able to develop the Angular application within the original ASP.NET application by creating a ClientApp directory and building a new Angular CLI application in that directory. I develop using the `ng build --watch` command which outputs static files on every save to a ClientDist directory. I can then serve up the rendered static assets from any given route by adding a few adjustments to my web.confg and calling the following in the associated controller:

public ActionResult Index()
            return new FilePathResult("/ClientDist/index.html", "text/html");

Open in new window

Anyone ever been to this Angular conference ng-conf ?

If you have gone to it,

Is it worth the money to go to it?

Currently learning Angular.
I am having an Angular build error.  This is the error I get.

ERROR in Error during template compile of 'AppModule'
  Function expressions are not supported in decorators in 'ɵ0'
    'ɵ0' contains the error at app\app.module.ts(35,23)
      Consider changing the function expression into an exported function.

Here is my app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormioAppConfig } from 'angular-formio';
import { FormioAuthService, FormioAuthConfig } from 'angular-formio/auth';
import { AuthConfig, AppConfig } from '../config';
import { AuthModule } from './auth/auth.module';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HeaderComponent } from './header/header.component';
import { ApplicationModule } from './application/application.module';

  declarations: [
  imports: [
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
        path: 'home',
        component: HomeComponent
        path: 'auth',
        loadChildren: () => AuthModule
        path: 'application',
        loadChildren: () => ApplicationModule
  providers: [

Open in new window

I want to use one Angular js for the front end and C# MVC and sql server for the back end.

how do you integrate or star development.

do you build your angular application first ? how to hook up the angular js and C# controller methods to post the data?  is there any best practices or how do developers do this in real applications?
I want to start learning Angular JS. Looking at the tutorials there are several different ways to set up the environment, which uses gulp, bower and many more
what is the simplest way to  get started with, to start learning this framework.
Hi, I have 3 years of experience in Release Engineer and Software Engineer,

As I have less work for release management so I request for software development work to manager and got some work parallely. Now I am doing both Release as well as software development work in AngularJS, C#, WCF, MySQL, ASP.NET MVC etc. but my designation is "Release Engineer" . Now I want to switch to software engineer to different organization with this experience.

So is it possible? or how it should be done?

Please Help.

How do we have a completely clean DEV environment to write an application in Node / Angular / Bootstrap / ...? I am having trouble with CLI's and updates each time. Does anyone have a real Best Practice? I would like to take an environment that I have been hacking around in and clean it up, ready for a new project easily.  Ideally, I would love to see a script to run that will clean it all up in one shot.
If I do the below, it opens the window in a new tab

<a [routerLink]="['/name', 'param1']" target="_blank" >{{ name }}</a>

Open in new window

Instead of a new tab, I need to open the same route in a pop up window. Javascript code to open a pop up window looks like this

 <a href="javascript:void(0);" onclick=", '_blank', 'width=300,height=250');">test</a>

Open in new window

I am not able to make out how to fit in routerLink in this example. Is there another way to open pop up window when using angular?
Free Tool: IP Lookup
LVL 12
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

I need to transpile an Angular Component into JS as a separate component.

How can I do that?
I have a Website that is using Angular and a Single Page Application. It is called "Making Your Life Count".

In the upper right you see the nav bar. If you click the "about" it takes you to the correct page and if you click "devos" it takes you to the desired page.

If you mouse over the menu link, it give you the URL of "

I have the .htaccess file working so that the url of "" takes you to the about page.

But for some reason when you try to go to: "" it gives me this warning:

400 Bad Request
The plain HTTP request was sent to HTTPS port

It also changes the URL to:

I can't figure out why it is doing that...

With the angular js router, I am using the following .htaccess file.

#HTTPS rewrite entire site
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
RewriteCond %{HTTP_HOST} ^ [NC]
RewriteRule ^(.*)$$1 [L,R=301]
RewriteRule ^index.html$ /index.php [R,L]

# 301 Redirect Old File
Redirect 301 /resources.html
Redirect 301 /resources
Redirect 301 /about
Redirect 301 /devos 

Open in new window

I have put together a Plunker and downloaded it but cannot get it to run locally on my computer.

It's based on an Angular Plunker.

Here is the link:

Click Here to go to Plunker

Can anyone here with setting this up to run locally?
I am having trouble getting a service with httpClient post and I'm confused with different versions and depreciated code.

Here is what I have:

// dataService.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })

export class DataService {

  constructor(private http: HttpClient) {}

  insertData() {
    const body = JSON.stringify({firstName: 'Joel', lastName: 'Smith333'}),{headers: headers});
    return'http://myurl.somefile.php', body, httpOptions);


// app.component.ts
import { Component } from '@angular/core';
import { DataService } from './services/data.service';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {

  constructor(private dataService: DataService) {}

  myInsert() {
    if (this.dataService.insertData()) {
      alert('Data Inserted Successfully');



Open in new window

// app.component.html
<div class="btn btn-default" (click)="myInsert()">Click Me</div>

Open in new window

The issues are coming from the service...

httpOptions and the insertData functions has errors all over.

Can anyone please help to get this working with Angular 5 please?
For a while now I have looked into Redux and Ngrx for Angular and have read a few tutorials on it but I still find it confusing and also a lot of extra work.

I was wondering if there's a simpler way or library to get application state management working without having to add all the extra files and code.

I would not even think of using it for small projects but as for large projects it might be handy for debugging but I'm still wondering what the alternatives are, and if there's a simpler / less confusing way to integrate state management into your application?
I have created a new Angular 5 project using angular-cli.

I have created a new component called parent.component and a panel.component

Now on the app.component.html I have this:

<button (click)="injectPanelIntoParentComponent()">Inject Panel into Parent Component</button>

   // Everytime the button is clicked I need an instance of the panel.component to be injected here

Open in new window

How can I do that?
I have created a new project using Angular-Cli with the --routing option.

So my routing module looks like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {MyComponent} from './components/my/my.component';

const routes: Routes = [
  {path: '', component: MyComponent}

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
export class AppRoutingModule { }

Open in new window

What I need to do is to add the route data to a json file and have the module load the data when the module loads.

So when the app start is would read data from a json file ...and create the routes:

For example:
const routes: Routes = [
  {path: '', component: MyComponent}

Open in new window

How can I do this?
I know that the normal thing to do due to angular having the assets folder as the storage place is to store images inside the asset's folder in the project root.

I am thinking creating re-usable components and for portability issues I would like to have everything which belongs to a specific component inside it's own folder.

For example if I great an assets folder inside the component's folder and then try to reach an image from my mycomponent.component.html

<img src="./assets/myimage.jpg" alt="" />

Open in new window

If I do the above the image with not appear.

Does anyone know a workaround for this?
Hello - I am playing with an input box with typeahead/completer style functionality in Angular 2+. Its been set up so that a user starts typing...the completer suggests items based on what is being entered...and the user clicks on the selection they want.

What they have selected from the completer drives what is displayed in a table. All that is working fine.

What I am not sure how to do is...if the item they select should have multiple rows in the table...lets say if the completer is searching a list of customers to display orders...but the customer they select has multiple orders.

*ngFor is not working for me...because I get an error telling me it can only be used with an array.

The way things are set up with the completer...i have this code in the component.ts file setting the selected item. It looks in a users array, and sets the item selected to selectedUser.

   protected onCompleterSelect(item: CompleterItem) {
   if (item && item.originalObject) {
     console.log(this.users.find(user => user.ID === item.originalObject.ID))
     this.selectedUser = this.users.find(user => user.ID === item.originalObject.ID) ;


Open in new window

Then in my html file the table is being built based on the selected user.

<table class="table">

   <th rowspan="1" colspan="4" >

     <td>ID</td><td>{{selectedUser && selectedUser.ID || " " }}</td>
     <td>Name</td><td>{{selectedUser && selectedUser.Name || " " }}</td>


Open in new window

When i try to add an ng-container  with * complains the ngFor needs an array...which because the "selectedUser" is being set in the componet.ts file...where its looking through the array there and specifing the selectedUser based on what the user clicks on when using the completer. ...its not happy.

I have tried a handful of ways to use the *ngFor  ...but it does not work.

Some of the items I have tried are
<ng-container *ngFor="let selectedUser of users">

Open in new window

<ng-container *ngFor="let x of selectedUser">

Open in new window

Upgrade your Question Security!
LVL 12
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Can anyone please help or guide me on setting up  Angular  CLI  with Jenkins? I am  setting up  a Development environment for a new  Project
I've been trying to get this ng-idle example working and got help yesterday from Leakim and Leonidas here  The answer helped but I have an issue now....

You can see it here

1. I first put the ng-idle on the front page as an example and that works. You see that it pops up.
    I did it by changing module.js and I have config with  run
          I also change loginController and added the popup code to index.cshtml

That worked but I want it inside the site itself so I did this  Please login with this admin@admin.test /Password321$

2. Changed "mainController.js" and added
        .module('lawApp', ['ngIdle', 'ui.bootstrap'])
        .controller('mainCntrl', mainController)
    .config(function(IdleProvider, KeepaliveProvider) {
    }).run(['Idle', function (Idle) {

Open in new window

3. Added the ng-idle code to mainController.js

4. Added the popup code to the razor code

The idle popup displays but look at console and now the other controllers are broken. "feedController" is not defined anymore. Click on "Forms" and FormController is not defined anymore either.

Things I tried:

I added 'ngIdle' to feedController but didn't work
Changed the order of the controllers I call but then mainController throws an error

I know adding .module('lawApp', ['ngIdle', 'ui.bootstrap'])  to mainController is making the other controllers not get initialized. I've read about it on a link Julian Hanson sent me once. I fixed them a while back and now running into it again because I added ng-idle.

Please don't suggest rewriting this in Angular 2
Hello - I'm trying to figure out how to override CSS to make an input box larger.

I downloaded code from github for an ng2 completer (that provides typeahead functionality).

I'm trying to make the input box tied to the <ng2-completer> larger and am not having a lot of luck.

I'm seeing some options on-line on items to try...but many of them seem to be depreciated. I do not want to spend time trying to learn something that is being thought I would see if someone could provide some guidance on which method to pursue.

Some sites seem to say that specifying a css style in the components .css file...starting wit with ":host" could do the trick...but I tried that and it did not work.
Css entry:
:host .completerWidth {
  width: 650px;

used in HTML by:
<ng2-completer class="completerWidth"
...other completer settings...
closing >

That does not on a regular input box...but not the ng-completer.

Two other items I have tried...

I tried specifying styling in the global css file and using it in the component with the luck.

I have also tried viewing the underlying code of the ng completer and determining where the width is specified so I can change it...and have not been able to pinpoint the correct place.

Any tips you can provide would be greatly appreciated.  

Time to get some help because this the 3rd day that I'm trying to figure out what I'm missing

1. I'm following this example ng-idle example
I found other examples as well and this is another Another example

2. You can see it here. I have the "start demo" button on the front page

3. In module.js, I have this. I step thru it and I see 'Idle' is defined

(function() {
    'use strict';

    angular.module('lawApp', ['ui.bootstrap', 'ngIdle'])
    .config(["IdleProvider", "KeepaliveProvider", function (IdleProvider, KeepaliveProvider) {
        .run(['Idle', function (Idle) {;
    }]); //['ui.bootstrap']  I moved this to login page and it works fine. Having it here and not having it in the login page also works


Open in new window

4. I put the rest of the code from the demo in logincontroller.js

 function loginController($scope, loginService, $uibModal,Idle,Keepalive)

            //*** idle

       $scope.started = false;

       function closeModals() {
           if ($scope.warning) {
               $scope.warning = null;

           if ($scope.timedout) {

Open in new window

How  can  I   run  NPM  commands behind a company  corporate proxy server?I tried to google online with no  success.
npm config set proxy
npm config set https-proxy
Have  an HTML5 "tel" control and I wanted the user to enter phone number with any of the following format

(404) 555-1111

I have an ng-pattern to handle the 10 digit. The max length should be between 10 and 14
ng-pattern = "/^(\d{10})$/"

How can I create a regular expression to do this,,

Thanks for your help






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