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

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
Free Tool: Subnet Calculator
LVL 12
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

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

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
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 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
Hi,
I have code in angular i want to modify it improve it is it possible to find some freelancer to first look at that code and tell me the cost to modify it.


Thanks
1
how to generate pdf reports in angular UI. Any good open-source npm module to consider?
0
What is the best technology to create a new shopping website? Like JSP, bootstrap, aspx, angular, PHP etc…
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.

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.
0
How can   I write a detail  high level design for  after a UX designer has presented his or her wireframes?I am planning to write a user interface using Angular...my  architecture...asked me to create a high level detail design but it seems he also has a vague idea what all that entails.Should I design Error codes?What exactly should I do?
0
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:

<system.webServer>
    <httpProtocol>
          <customHeaders>
              <add name="Access-Control-Allow-Origin" value="https://localhost:4200"/>
          </customHeaders>
      </httpProtocol>
  </system.webServer>

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
[EnableCors(....)]

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?

Thanks
0
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

0
Anyone ever been to this Angular conference ng-conf ?
https://www.ng-conf.org

If you have gone to it,

Is it worth the money to go to it?

Currently learning Angular.
0
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';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        component: HomeComponent
      },
      {
        path: 'auth',
        loadChildren: () => AuthModule
      },
      {
        path: 'application',
        loadChildren: () => ApplicationModule
      }
    ])
  ],
  providers: [
    FormioAuthService,

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.