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
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 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'm working on an ASP.Net/ C# / jQuery. There are lots of grids.  Some grids are editable, paging is there, sorting. There's one jqGrid and rest are Grid.MVC

I've used jQuery DataTable as well. I've worked with Telerik and don't want to use it again.

I want to push my manager to use jqGrid.  

Any arguments for and against jqGrid and Grid.MVC?
0
I wonder why this code isn't working

1. I have a button like this, note the class="jqbuttons"

<button style="background-color:lightblue;border:none;" class="jqbuttons" id="47" type="button"><span class="glyphicon glyphicon-remove"></span></button>

Open in new window


2. I put this click event both in document.ready and outside it. I click on the button and nothing happens

$(document).ready(function () {

		$(".jqbuttons").on('click',function () {
			//getvalue(this.id);
			console.log("button clicked1");
			console.log(this.id);
		});

Open in new window


This works

1. I removed the class and added this onclick='getvalue(this.id);'

<button style="background-color:lightblue;border:none;" onclick="getvalue(this.id);" id="47" type="button"><span class="glyphicon glyphicon-remove"></span></button>

Open in new window


2. The function, outside document.ready..
function getvalue(id) {
		console.log("button clicked");
		console.log(id);
	}

Open in new window


How come the first one doesn't work?
0
I'm new at my job and looking at the project, the previous developer who's not with the company anymore has used jqGrid. When I open the js file, I see this so we have version 5.2.0

I went to this site and the latest version is 5.3 http://www.trirand.com/blog/?page_id=6

But, looks like jqGrid is not free for commercial. Maybe ex-developer paid for it, not sure...but is jqGrid's 5.3 free?

/**
*
* @license Guriddo jqGrid JS - v5.2.0 - 2016-11-21
* Copyright(c) 2008, Tony Tomov, tony@trirand.com
* 
* License: http://guriddo.net/?page_id=103334
*/

Open in new window

0
I think the answer to my question is "no"....jqGrid's columns can't be displayed vertically...but I just wanted to double check.

I have it like this now

grid
0
I am making a call from a database to return data to be passed in an AngularJS ng-repeat phrase. What I cannot figure out is how to pass the HTML characters.

Here' is the HTML CODE:
<div ng-repeat="y in new">
      	<h1><red>#{{y.qaID}}</red> {{y.qa_question}} <small>({{y.cnt}} votes)</small></h1>
 </div>

Open in new window


All works fine, but when I get to a row where the qa.question field is:  "What is your <strong>Focus</strong>?"

It renders as in just that way on the Web page. I want it to render as "What is your Focus?

So how do you get HTML characters to work in an ng-repeat phrase.

I know how to do it with ng-bind-html for a single variable. But I cannot figure out if it is possible to do with ng-repeat.  

Thanks.
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
I watched a security tutorial at my previous job and one thing that was mentioned was not to have comments in JavaScript code because would-be hackers might see the comments if they do "inspect" in browser.

I'm working on a new project and I see they have the jQuery code in the page itself. Example below.

Should jQuery code be in its own js file (I think it should) and be minified?

code
0
Introducing Cloud Class® training courses
LVL 12
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

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 am using
https://jsonplaceholder.typicode.com

Open in new window

to test some code which post, get, delete etc.

This works great but I now need to do the same tests with xml.

My question is... Are there any websites like
https://jsonplaceholder.typicode.com

Open in new window

for xml testing?

Is so, what are the urls?
0
At my new job, the project is in ASP.Net, C# , MVC and some jQuery. I was saying that I learned some AngularJS at my previous job and my manager asked me what the future of Angular is. He said would it be like AngularJS and rewritten... he said if we do a project in Angular, would it be obsolete.

I don't think Angular would be obsolete and it's hard to say with technology as it's always evolving.

Isn't jQuery library not being supported/developed anymore? I think I read it somewhere a while back.

I had a manager two years ago who kept asking us if C# will be around in 15 years. We were like...how would we know...something new might come along.

Any thoughts. Questions like this are hard to answer.
0
Hi Experts,

Could you please help me in getting the numeric value from the string, currently I am getting characters like asbc.. as well out of the string chars from the given function. Also is there any way to attach current datetime to make it unique if possible.

 public generateRandomString(length: number): string {

    let chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';

    let result = '';

    for (let i = length; i > 0; --i) {

      result += chars[Math.floor(Math.random() * chars.length)];

    }

    return result;

  }
0
I bought this template http://www.tattek.sk/minotaur-dash2/#/app/forms/validation
and I'm customizing it.

1. Scroll down to "Input Mask" section.
2. You see there's a "Phone" field. It's a mask for phone number.
3. It uses a directive.
4. I used the same thing in my code but I changed to this
 <input type="text" name="eligcat2" id="eligcat2" input-mask="" mask-options="{'mask': '(###)'}" maxlength="5" class="form-control" ng-model="user.eligcat2" ng-model-options="{ updateOn: 'blur' }" aria-invalid="true" style="">

Open in new window


5. I want the mask to allow both numbers and alpha. As I have mask': '(###)'}, I can only do numbers.

What I tried

I tried replacing ### with /[a-zA-Z0-9 ]/  but when the page comes up, part of that pattern in the filed. Like it's the text of that  field.

This is the directive that came with the template


(function() {
  'use strict';

  angular
    .module('lawApp')
    .directive('inputMask', inputMask);

  /** @ngInject */
  function inputMask() {
    var directive = {
      restrict:'A',
      scope: true,
      link: function (scope, element, attrs) {
        var options;
        if (attrs.inputMask) {
          options = scope.$eval(attrs.inputMask);
        } else if (attrs.maskOptions) {
          options = scope.$eval(attrs.maskOptions);
        }
        angular.element(element).inputmask(options);
      }
    };

    return directive;

  }

})();

Open in new window

0
The code below displays rectangle shape and if the 'attribute.dflt' is equal to 1 then the rectangle shape is set to medium style.

<div class="section" style="padding-bottom:20px" ng-repeat="attrs in groupedAttributes track by $index">
	<h6 class="title-attr"><small>{{::attrs[0].attribute | uppercase}}</small></h6> 
        <ul style="list-style:none;padding:0;" ng-repeat="attribute in attrs track by $index">
	        <li style="cursor: pointer;display: inline-block;">
		          <div ng-click="updatePrice(attribute,$index)" ng-style="{ 'border-width':(attribute.dflt===1)?'medium':'thin' }" class="boxed">{{attribute.value}}</div>
	        </li>
        </ul>
</div>

Open in new window


Now if I have more than one rectangle as attached (rectangle.png) then I would like the style to shift from one rectangle to another. For instance, the following:

1) Rectangle [Red]
2) Rectangle [Orange]

Now rectangle red style is medium and rectangle orange style is thin. If I click on rectangle orange then rectangle orange style should switch to medium and rectangle red style switch  to thin. How can I achieve it with my present coding. Your help is kindly appreciated.

Thank You.
rectangle.png
0
1 . I bought this template http://www.tattek.sk/minotaur-dash2/#/app/dashboard
and I'm customizing it.

2. You see the guy's photo on top right. You click on it once and the popup shows up
popup
3. In my site, I have to click on the "profile" twice.

You can see it here. Login and click on the name on top right (I don't have a photo)

Site: http://147.75.0.117:88

Login with admin@admin.com / Password321$

4. Unlike the theme code, I have a ng-click. It's expandUserInfo() . I see the "aria-expanded" is false when the page loads

element
5. I click on the "profle" name and I see the element updated but it's updated to "false" (it should be true). I click again and that's when it's updated to "true" and I see the popup.

What am I missing? how can I fix this? (I spent too much time on this trying to figure it out)
0
1. I bought this template http://www.tattek.sk/minotaur-dash2/#/app/dashboard
and I'm customizing it.

2. On the link above, click on the "hamburger" on top. You see how the side menu shrinks and the main content expands
works
3. In my site, the side menu shrinks but the main content doesn't expand

You can see it here:

Site: http://147.75.0.117:88

Login with admin@admin.com / Password321$

doesn't work
4. I checked the Chrome Developer's tool and I see the CSS tag being added

css
5. I also put debug step in the demo site (I have the code locally from Themefoest).. There's a function setSmallNavigation() but  I commented it out and the demo still worked.

I'm not sure what I'm missing.
0
Get expert help—faster!
LVL 12
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

WordPress, Plug-ins, PHP, HTML, CSS and Angular 4??

I need to create a new UI on a WordPress site and want to use Angular. I am not a PHP developer, but would consider using PHP if it made this UI something I could more easily package into a WordPress plug-in.

I am a bit confused about how PHP fits into the equation.

Also, when I need to supplement this new UI with a back-end, is PHP the technology I use to communicate with the WordPress site?

Please explain my options.

Thanks.
0
I'm having trouble with some odd routing behavior when I build my angular app in preparation for deployment. When I run the app locally using 'ng serve', navigation works just fine and everything seems to be ready for deployment. However after I run 'ng build --prod' and the dist folder is generated, if I launch the index.html navigation is broken in the following ways:

If I refresh the page, it fails to load (resulting in 404)

If I attempt to navigate to a page that uses a different component than the landing page it fails to load (404)


I have tried these suggested solutions:
Change the base href in index.html to <base href = "./">
Change AppModule providers to include {provide: LocationStrategy, useClass: HashLocationStrategy}
Change App.Routing to include RouterModule.forRoot(routes, {useHash: true})
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
I have used  dynamic form to display drop down on my form.I want when a person select the drop downs to this form  to trigger other component dynamically below this form with text areas and all tag values  based on its model.Can anyone please guide me into the right direction?i am an angular newbie.Please let me know if i need to re-explain more what exactly i need.thanks
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.