Angular

483

Solutions

320

Contributors

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 have upgraded my application from Angular 4 to Angular 5. After the upgrade the glyphicon icons are not showing up

<span class="glyphicon glyphicon-user" style="cursor:pointer"></span>

Open in new window


In the browser console, this error is displayed


Glyphicon error
I continue to use the same version of bootstap v3.3.7 and it is also included in angular-cli.json (no changes here as well)

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/ngx-toastr/toastr.css",
        "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
        "styles.css"
      ],

Open in new window


Is there something else that needs to be done in order to make the icons work? Other bootstrap styling is working fine.
0
Learn to develop an Android App
LVL 12
Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

I want to use one Angular js for the front end and C# asp.net 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?
0
Finding really hard to hide the Cancel button, when the inner html gets displayed. How can I force the outer div to get the refresh? The last div section is not getting refreshed.

HTML

<div class="panel-group step-one" [class.hidden]= "(!isOtherOneTimePaymentSelected  &&( oneTimePaymentMethod?.id || show.oneTimePayment.stepTwo || (hasCreditCardMethod && hasBankPaymentMethod)))">
                <div class="panel" [class.expanded]="expand.oneTimePayment.card" [class.hidden]="expand.oneTimePayment.bank">
                    <div class="panel-heading" (click)="expandOneTimePayment('card')">
                        <h4 class="panel-title">Credit Card</h4>
                    </div>
                    <div class="panel-body">
                        <div class="panel-inner">
                            <add-card (saved)="createdOneTimePaymentMethod($event)"
                                      [system]="selectedSystem"
                                      [isCancelable]="true"
                                      (canceled)="cancelExpand($event, 'card')"
                                      [paymentMethod]="oneTimePaymentMethod">
                            </add-card>
                        </div>
                    </div>
                </div>
                <hr class="panel-break visible-xs" />
                <div class="panel" [class.expanded]="expand.oneTimePayment.bank" [class.hidden]="expand.oneTimePayment.card">
                    <div 

Open in new window

0
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.
0
I need help with form validation using angularjs. I have input fields that when a submit button is clicked it validates the form. If the form has invalid inputs it states what is wrong in a message. If no issues then the button is submitted to the next page. If there is no activity after 5 minuets then any data entered on the form is cleared or the form is reset.
The inputs are:
US Zipcode: can't be empty. numbers only and no more and no less then 5 numbers long.
Income:  can't be empty and must be number only.
Two buttons (Yes / No): one of the two buttons need to be selected.
 First name: can't be left empty
Last name: can't be left empty
Birthday: Can't be left empty in date form (mm/dd/yyyy)
3 dropdowns:  can't be left empty
     Gender: Male / Female
     Relationship: Spouse / dpmestic partner
     Tobaco user (Yes/No)

Below is my code:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BeneFITwise | Let's Get Started</title>
<link rel="icon" href="images/favicons/be-favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/dependencies.css">
<link rel="stylesheet" href="styles/wrapkit.css">
<link rel="stylesheet" href="styles/mbe-custom.css">

Open in new window

0
Hi, I am using Textmask in Angular2.  Having an issue when delete key pressed.  Phone  US format is (923) 8888-4444
When I try to delete 1st number(that is 9). It jumps out of the bracket and not able to delete parenthesis.

http://plnkr.co/edit/E6KhR3c3bh9F2RL9FifT?p=preview

How can I delete all the numbers without any problem using 'Del' key?  The code is in Plunker.

Thanks
Karthey
0
How to perform validation on input fields when a continue button is selected using Angular 4
Please see code below:
Index.cshtml
@{
    ViewData["Title"] = "Medical | Step 1: Let's Get Started";
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>BeneFITwise | Let's Get Started</title>
    <style>
        .error {
            border-color: red;
        }
    </style>
    @*<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />*@
    @*<link data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-messages.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>*@
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <section class="content">
        <div class="content container-fluid">
            <div class="mbe-2000px-max-width">
                @*<!-- Breadcrumb section -->
                    <ol class="breadcrumb mbe-breadcrumb">
                        <li><a href="welcome-page.html" title="Return Home"><i class="fa fa-home"></i></a></li>
                        <li class="active">Medical</li>
                    </ol>
                    <!-- End of breadcrumb section 

Open in new window

0
I am developing an application using Angular 4, i get this error in IE 11..   it works fine in chrome.  how to resolve the below error in IE 11

ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'createShadowRoot'
TypeError: Object doesn't support property or method 'createShadowRoot'
   at ShadowDomRenderer (http://localhost:42248/dist/vendor.bundle.js:40905:9)
   at DomRendererFactory2.prototype.createRenderer (http://localhost:42248/dist/vendor.bundle.js:40618:17)
   at AnimationRendererFactory.prototype.createRenderer (http://localhost:42248/dist/vendor.bundle.js:101997:9)
   at DebugRendererFactory2.prototype.createRenderer (http://localhost:42248/dist/vendor.bundle.js:13853:9)
   at createComponentView (http://localhost:42248/dist/vendor.bundle.js:12453:9)
   at callWithDebugContext (http://localhost:42248/dist/vendor.bundle.js:13821:9)
   at debugCreateComponentView (http://localhost:42248/dist/vendor.bundle.js:13165:5)
   at createViewNodes (http://localhost:42248/dist/vendor.bundle.js:12511:21)
   at callViewAction (http://localhost:42248/dist/vendor.bundle.js:12976:13)
   at execComponentViewsAction (ht
0
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.

Thanks.
0
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.
0
Free Tool: Site Down Detector
LVL 12
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

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="window.open(url, '_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?
0
I need to transpile an Angular Component into JS as a separate component.

How can I do that?
0
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 "https://makingyourlifecount.net/#/about

I have the .htaccess file working so that the url of "https://makingyourlifecount.net/about" takes you to the about page.

But for some reason when you try to go to: "https://makingyourlifecount.net/devos" it gives me this warning:

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

It also changes the URL to: http://makingyourlifecount.net:443/#/devos

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} ^www.makingyourlifecount.net [NC]
RewriteRule ^(.*)$ http://makingyourlifecount.net/$1 [L,R=301]
RewriteRule ^index.html$ /index.php [R,L]

# 301 Redirect Old File
Redirect 301 /resources.html https://makingyourlifecount.net/#/resources
Redirect 301 /resources https://makingyourlifecount.net/#/resources
Redirect 301 /about https://makingyourlifecount.net/#/about
Redirect 301 /devos 

Open in new window

0
Hi.

I've created an angular 5 project, that should be invoke a service. This service requires private ip as parameter request.

I've done for chrome and firefox with a PeerConnection WebRTC, but now, i need to run the same solution on internet explorer (IE 6 is possible)

Some one knows the way?

Thanks.
0
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?
0
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' })
};

@Injectable()
export class DataService {

  constructor(private http: HttpClient) {}

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

}

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

@Component({
  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?
0
I am using an Angular-cli generated project (so it uses webpack).

What I want to be able to do it to have a separate (maybe pre-compiled) component and be able to add and load it into my project at runtime (if possible)

I know this is a hard one so I'm opened to options.

How can I achieve this?
0
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?
0
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>

<app-parent>
   // Everytime the button is clicked I need an instance of the panel.component to be injected here
</app-parent>

Open in new window


How can I do that?
0
Free Tool: ZipGrep
LVL 12
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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}
];

@NgModule({
  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?
0
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?
0
Hi,

I am trying to write a AngularJS controller. it takes the value from the input text box on the html.  (i.e "MyAdmin") then pass this value to the factory called user. the factory will then return a value if the user called "MyAdmin"  is an admin user or not. and then show the result (true or false) in the front end, {{message}}

However, I could not get the controller work. How to write the controller?

Test.html

    <h3>Test 5, Factory user </h3>
    <div ng-app="TestApp" ng-controller="Ctrl">
        <input ng-init="role='MyAdmin'" ng-model="role">
        <label>{{message}}</label>
    </div>

Open in new window

in app.js


var app = angular.module("TestApp",[]);

app.factory('user', ['$http', '$window', '$log', function ($http, $win, $log) {
    var urlBase = '../../api/roleandpermission';

    $log.log('user');
    var getData = function (role) {
        $win.alert(role);
        return $http.get(urlBase + '/GetUserIsInRole/' + role)
            .then(function (response) {
                return response.data
            })

    };
    return {
        getRole: getData
    };
}]);

app.controller('Ctrl', ['$scope', '$log', 'user', function ($scope, $log, user) {
    user.getRole().then(function (role) {
        $scope.message = role;
    });
}]);

Open in new window

0
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) {
   console.log(item)
   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" >
     PERSONAL INFORMATION

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

   </table>

Open in new window



When i try to add an ng-container  with *ngFor...it 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


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

Open in new window

0
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
0
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 http://147.75.0.124:88/

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
 
 angular
        .module('lawApp', ['ngIdle', 'ui.bootstrap'])
        .controller('mainCntrl', mainController)
    .config(function(IdleProvider, KeepaliveProvider) {
        IdleProvider.idle(5);
        IdleProvider.timeout(5);
        KeepaliveProvider.interval(10);
    }).run(['Idle', function (Idle) {
            Idle.watch();
        }]);
  

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
0

Angular

483

Solutions

320

Contributors

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.