Angular

514

Solutions

349

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

how to send email to multiple   recipients in .net core using mail message
0
Cloud Class® Course: Amazon Web Services - Basic
LVL 12
Cloud Class® Course: Amazon Web Services - Basic

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 wanted to implement jQuery Tooltip  and it looks like "title" attribute is needed for the Tooltip to work.  http://jqueryui.com/tooltip/

The project I'm working on a project that's using Grid.MVC. There's a lot of C# code that gets the column/row data. The grid renders as below.

Grid
I found this example that uses jQuery but this adds the "title" as the grid is built Example

Having the grid already rendered, is there a way to get the row data and show it in Tooltip? Would "hover over" work...hover over a grid row and see the data in a popup/tooltip... I"ll look into that.
0
I have created a angular reactive form.

this.signUpForm = this.formBuilder.group({
      dealershipInformationForm
    });

const dealershipInformationForm = this.formBuilder.group({
      'name': new FormGroup({
        'legalName': new FormControl(null, [Validators.required, Validators.minLength(2), Validators.maxLength(10)]),
        'commonName': new FormControl(null, [Validators.required, Validators.minLength(2), Validators.maxLength(10)]),
      })
    });

Open in new window


I am trying to print different errors messages based on different error types.

export const errors = {
    'legalName': [
      {
        'type': `required`,
        'message': `Legal Name is required`
      },
      {
        'type': `minLength`,
        'message': `Legal Name cannot be less than 2 characters`
      },
      {
        'type': `maxLength`,
        'message': `Legal Name cannot be more than 10 characters`
      },
    ],
    'commonName': [
        {
        'type': `required`,
        'message': `Common Name is required`
        },
        {
        'type': `minLength`,
        'message': `Common Name cannot be less than 2 characters`
        },
        {
        'type': `maxLength`,
        'message': `Common Name cannot be more than 10 characters`
        },
    ]
};

Open in new window


Here's how I am trying to access the form control-
this.signUpForm.controls['dealershipInformationForm'].get('name).get('legalName');

Open in new window


And this is the code to identify the error types and display the corresponding error message.
<span *ngIf="!formCtrl.valid && formCtrl.touched">
    <span *ngFor="let error of errors">
            <strong *ngIf="formCtrl.hasError(error.type)">{{error.message}}</strong>
    </span>
</span>

Open in new window

where
formCtrl = this.signUpForm.controls['dealershipInformationForm'].get('name).get('legalName');

Open in new window


Now, the problme is that I am able to print the error only for REQUIRED, and not for MOINLENGTH or MAXLENGTH.

Please help me out,
0
I have created the following page which is responsive.

<div class="container-fluid" id="#test">

	<div class="row"> 
		<div class="col-md-3">
			<div ng-include src="'assets/templates/theme/sidemenu.php'"></div>
		</div>
		<!--
		<div class="table-responsive">
			<ul class="list-group text-center">
				<li class="col-xs-6 col-md-3 col-sm-3 col-lg-3 list-group-item" ng-repeat="product in products">
					<figure>
						<img width="50px" height="50px" ng-src="{{backend_url}}{{product.thumbnail[0].path}}" />
						<figcaption>
							{{product.name}} <h3>{{product.price.cost_price | currency}}</h3>
						</figcaption>
					</figure>
					<input class="btn btn-success" type="button" ng-click="addItemToCart(product,1)" value="BUY" />
				</li>
			</ul>
		</div>
		-->
		<!--
		<div class="col-md-9">
			<div class="row">
				<div class="col-sm-6 col-md-3">
					<h1>{{ subcategory }}</h1>
				</div>
			</div>
		</div>
		-->
		<div class="col-md-9">
			<p class="subHeader" ng-show="isSubHeader">
			{{subcategory | uppercase }}
			</p>
		</div>
		
		<div class="col-md-9">
			<div class="row">
				<div ng-if="products.length===0">
					<p>{{msgProduct}}</p>
				</div>
				<!--  
				col-lg-2 col-md-4 col-xs-6				
				col-sm-6 col-md-3  
				-->
				<div class="col-md-3 col-sm-6 col-xs-6 text-center" ng-repeat="product in products track by $index">
				  <div class="thumbnail">
					<div class="card-img">
					
						<div class="discount" ng-if="product.price.cost_price != 

Open in new window

0
how to generate SSRS report /consume in WEBAPI with parameters
 ssrs report  in web api and display in angular js
0
im getting NaN result !!


distance(lat1, lon1, lat2, lon2) {
  this.R =  6371; // RadparseIntius of the earth in km
  this.dLat = this.deg2rad(lat2 - lat1); // deg2rad below
  this.dLon = this.deg2rad(lon2 - lon1);
    var a =
      Math.sin(this.dLat / 2) * Math.sin(this.dLat / 2) +
      Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
      Math.sin(this.dLon / 2) * Math.sin(this.dLon / 2);
  
  this.c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  this.d =   this.R * this.c; // Distance in km
  
    return this.d;
  
  }

Open in new window

0
I've been though this tutorial to get electron to work on an angular 5 project.

As you can see it also installs ngx-electron module.

This has the following properties:

desktopCapturer: Electron.DesktopCapturer - Electron's desktop capturing API
ipcRenderer: Electron.IpcRenderer - Electron IpcRenderer
remote: Electron.Remote - Electron Remote capabilities
webFrame: Electron.WebFrame - Electron WebFrame
clipboard: Electron.Clipboard - Clipboard API
crashReporter: Electron.CrashReporter - Electron's CrashReporter
process: NodeJS.Process - Electron's Process Object
screen: Electron.Screen - Electron's Screen API
shell: Electron.Shell - Electron's Shell API
nativeImage: Electron.NativeImage - Electron's NativeImage API
isElectronApp: boolean - Indicates if app is being executed inside of electron or not


But I don't see how you can use FS ?

How can I use FS in this project with Angular 5 / Electron?
0
I want to add a css templete to my angular 4 project to give good look and feel.

Please give me complete steps, how to add my free css templete with my angular 4 project.
0
I need help with tiff.js! I'm working in a locked down environment, but any advice would be helpful... I'm able to stream the file into my UI (Angular) when referring to a file in a file folder, but I don't know how to send in a bitstream. Documentation seems to be limited. Any advice on how to send a bit stream (for example, a file from any web site) to a UI using tiff.js?

Thanks,
Luke
0
Hi All,

I want to open a pdf file located in my local system (D://Docs/)   in a new window of the browser after clicking hyperlink in Angularjs. The hyperlink name and Pdf document name should match otherwise should not open pdf document. Any help would be highly appreciated.

                                             Path

Ex:  Test1 (hyperlink) -->  D://Docs/Test1
       
        Test2 (hyperlink) -->  D://Docs/Test2
0
Free Tool: SSL Checker
LVL 12
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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 am creating a shopping list application. without going to deep , here I will try to make my code as short as possible . I have a table in my database named "listsnames". in this table, there are just names of lists created by me (or other users).
these lists are shown on page as below
<div ng-app = "myapp"  ng-controller = "myCtrl">
           <ul ng-repeat="x in list">
          <li>{{x.listName}}</li> 
          </ul>
</div>
Angular Code:
var app = angular.module("myapp",[]);
app.controller("myCtrl",function($scope,$http) {
$http.get(
"serversidepage.php"
{'data':'useremail'}
).then(function(response) {
$scope.lists = response.data
})
});

Open in new window

Now all lists names are shown. and it is time that when  i click on any list name , the link should be redirect to  a page where all items of this list are there Or where new items will be inserted to that list.
But problem is that how i will send an id or other parameter with url of that list  to targeted page where the targeted page will show data according to the parameters sent with url.e.g.  if a list has id "101" then it will be sent to the targeted page and targeted page will fetch data from database where id = "101".
If this problem is solved then my applications is almost complete.Please help me. I have tried my best searching on google but  i could not understand the $routeparams service of AngularJs. actually  I know $routParams service a bit , but not know where to put the actual value of a parameter which is coming from database
0
SharePoint 2016 on premise - is there any part of building new sites that will NOT work with responsive design?

With frameworks there is always a way to find a solution, but sometimes its just best to stay away from certain things on mobile. Does anybody have a SharePoint 2016 on prem horror story of something they thought would work great on mobile / responsive design that just went horribly wrong?

I have read that SharePoint 2016 support mobile design, but for fully responsive we should build the web parts using React or Angular for full responsive. However I am sure there are limits and things that we should never attempt to do on Mobile. Please share any of those experiances
0
Hi
I am new in angularJS.
i am working with classic asp and angularJS.
when i call http post method to classic asp page in angularJS  its send data to classic asp page. but when i am try to retrieve posted data on classic asp page i found nothing?

is there i am doing wrong?

here is my code sample

----------Html code---------------
<div ng-app="CallSiteVisitor" ng-controller="SessionAndVisitor">
<form ng-submit="SaveData()" >
<input type="text" ng-model="form.firstname">
<input type="text" ng-model="form.lastname">
<input type="submit">
</form>
</div>
---------Html code end----------

-----------Controller code ------------
var app = angular.module('CallSiteVisitor', ['fm']);
      app.controller('SessionAndVisitor', function($scope, $http) {

$scope.form = {};
        $scope.SaveData = function() {
                  $http({
                    method  : 'POST',
                    url     : 'http://www.xyz.com/action_contactformAJ.asp',
                    data    : $scope.form,
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
                   })
                    .success(function(data) {
                        if (data.errors) {
                                        // error code
                        } else {
                         // data code
                        }
                    });
                  };
      });
-----------Controller  code end---------


---------- Classic asp page code (action_contactformAJ.asp)-------------------------
<%
Response.write request("FirstName") & "  " & request("LastName")
' here i found null value but when i see in browser by pressing …
0
Hi
I am new in angularJS.
i am working with classic asp and angularJS.
when i call http post method to classic asp page in angularJS  its send data to classic asp page. but when i am try to retrieve posted data on classic asp page i found nothing?

is there i am doing wrong?

here is my code sample

----------Html code---------------
<div ng-app="CallSiteVisitor" ng-controller="SessionAndVisitor">
<form ng-submit="SaveData()" >
<input type="text" ng-model="form.firstname">
<input type="text" ng-model="form.lastname">
<input type="submit">
</form>
</div>
---------Html code end----------

-----------Controller code ------------
var app = angular.module('CallSiteVisitor', ['fm']);
      app.controller('SessionAndVisitor', function($scope, $http) {

$scope.form = {};
        $scope.SaveData = function() {
                  $http({
                    method  : 'POST',
                    url     : 'http://www.xyz.com/action_contactformAJ.asp',
                    data    : $scope.form,
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
                   })
                    .success(function(data) {
                        if (data.errors) {
                                        // error code
                        } else {
                         // data code
                        }
                    });
                  };
      });
-----------Controller  code end---------


---------- Classic asp page code (action_contactformAJ.asp)-------------------------
<%
Response.write request("FirstName") & "  " & request("LastName")
' here i found null value but when i see in browser by pressing …
0
I want to use pdf.js (https://github.com/mozilla/pdf.js/) in an Angular 5 app.

I could not find any example of using pdf.js with Angular.

Is it possible to do so? Any example/tutorial that would help in this regard?
0
Hi, I am using an angular 2 abstract form which has child component. For some reason the child inputs get disabled. I am trying to keep it enabled all the time. I tried as given in Angular Abstract control instruction

abstract patchPaymentMethodForm(paymentMethod: PaymentMethod): void;
// NOT working

this.paymentMethodForm.controls['card-number'].disable({ emitEvent: false });
0
Hello.
 I am using ASP.net MVC 5 to try and create a dashboard for showing temperature values of different regions. These regions of upto twenty can be added and deleted from the database.  Am using .net highcharts,   to try and create this guages dynamically as soon a a new region is added and place each of them in a div tag of its on  dynamically using javascript. Any Ideas??
0
Multi-part form data is not accepting in jersey API. When I am not setting the content header explicitly it is giving 'Unsupported Media Type' and when I am setting the header explicitly to multi part-form data it is giving CORS error.

Angular Calling :

 
  private headers1 = new Headers({'Content-Type' : 'multipart/form-data'});

      sendFile(fileObj: File){
       // alert(fileObj);
        return this._http.post(this.baseURL+'/submitexcel',fileObj,{headers : this.headers1}).map(res => res.json().data).subscribe();

        }

 }

Open in new window

JAVA API :
 @POST
               @Path("/submitexcel")
                @Consumes(MediaType.MULTIPART_FORM_DATA)
                public Response uploadFile(

                        @FormDataParam("file") InputStream uploadedInputStream,
                        @FormDataParam("file") FormDataContentDisposition fileDetail) {
                    // check if all form parameters are provided
                   System.out.println("CAssked");
                    if (uploadedInputStream == null || fileDetail == null)
                        return Response.status(400).entity("Invalid form data").build();
                    // create our destination folder, if it not exists
                    try {
                        createFolderIfNotExists(UPLOAD_FOLDER);
                    } catch (SecurityException se) {
                        System.out.println("Can not create destination folder on server");
          

Open in new window

0
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
The 14th Annual Expert Award Winners
LVL 7
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

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'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
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

Angular

514

Solutions

349

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.