Angular

696

Solutions

9

Content

i
The collection of articles, videos, and posts on this topic.

444

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

error in my angular hi am geting this error
compiler.js:2175 Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
           placeholder="Add New Task"
           (keyup.enter)="onTaskAdd($event)"
           [ERROR ->][(ngModel)]="addTaskValue"/>
</div>
"): ng:///AppModule/TasksAddComponent.html@5:11
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11388)
    at JitCompiler._parseTemplate (compiler.js:25961)
    at JitCompiler._compileTemplate (compiler.js:25949)
    at compiler.js:25893
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25893)
    at compiler.js:25806
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25805)
syntaxError @ compiler.js:2175
parse @ compiler.js:11388
_parseTemplate @ compiler.js:25961
_compileTemplate @ compiler.js:25949
(anonymous) @ compiler.js:25893
_compileComponents @ compiler.js:25893
(anonymous) @ compiler.js:25806
then @ compiler.js:2166
_compileModuleAndComponents @ compiler.js:25805
compileModuleAsync @ compiler.js:25767
compileModuleAsync @ platform-browser-dynamic.js:223
compileNgModuleFactory__PRE_R3__ @ core.js:40263
bootstrapModule @ core.js:40598
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
…
0
5 Comments
JavaScript Best Practices
LVL 13
JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

Learn More!
I am trying to create a popup when a user clicks the save button & that should have 2 options (Yes or No button). Popup should look similar to below screenshot.

I am using html & angularJS in my web application. How do i achieve this?

popup.jpg
0
6 Comments
Using AngularJS i need to do a server side validation for a button click event & based upon the result from server call i need to display a particular section of html page using
data-ng-show="resultdataset.length". If resultdataset has records user need to correct the errors & then click submit button. what attribute should i use to make the server call.

 <button type="submit" id="btnSubmitForm"  ng-click='Validate()' ng-disabled="Config.$invalid || !Config.$dirty"> Save </button>

does ng-click work??

I am submitting form using ng-submit & submitForm() should only be called if there are no records from resultdataset

 <form class="form" name="Config" role="form" ng-submit="submitForm()">

Sorry i am new to AngularJS & trying to figure out stuff.
0
1 Comment
hi am having this error in angular
angular
0
4 Comments
Hi There,
We are testing our new website on Test environment , Couple pages on it uses angular 8  and the images on it is not displaying  when we go to our test website from within our organization, when we check from outside our network it works fine.

We do use OpenDNS to block certain category of web, so if we change our dns to use google public dns 8.8.8.8 the test website displays the images correctly. We did try to disable OpenDNS still the web site doesn't display the images. So something internal when we use our DNS is blocking it.
Till we figure this completely,  is there a way inside our network where we can adjust the host file  or something so only for this particular website which we know is safe we can default it to use the dns server 8.8.8.8 and all other request go through our DNS server which basically gets forwarded to OpenDns.

so for example anybody inside our networks look for www.example.com  8.8.8.8 should be the dns server that should resolve it, any other website should go through our DNS.
I will appreciate anybody has any idea if we could do that and if so how..
Thanks
0
7 Comments
Which front end should I consider to use for web developement, react, Angular Vue.js or Razor view ?

Thx
0
2 Comments
I am using Kendo Autocomplete feature in a html page & use angularJS to get the data from  server using API calls. The problem i noticed is when the user types something  & delete the text it looks like something is performing in the background which doesn't allow autocomplete functionality until i refresh the page

Here is the screenshot

AutoComplete-issues.jpg
0
2 Comments
I have 2 kendo Multiselect fields in my html page. After i select items from 1st multiselect & go pick items from second multiselect, 1st multiselect field becomes empty(meaning all the elements i select for first multiselect are removed). How do we resolve this issue??

Here is the angularJS Code

 $scope.select1Options = {
            placeholder: "Search Par...",
            noDataTemplate: 'No Partner&apos;s found',
            dataTextField: "Name",
            dataValueField: "Id",
            valuePrimitive: false,
            autoBind: false,
            //filter: "contains",
            //animation: {
            //    close: {
            //        effects: "fadeOut zoom:out",
            //        duration: 300
            //    },
            //    open: {
            //        effects: "fadeIn zoom:in",
            //        duration: 300
            //    }
            //},
            minLength: 3,
            dataSource: {
                //type: "odata",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 10,
                filtering: function (e) {
                    var filter = e.filter;

                    if (!filter.value) {
                        //prevent filtering if the filter does not value
                        e.preventDefault();
                    }
                },
                transport: {

                    read: {
                        url:

Open in new window

…
0
6 Comments
I have this code Typesript code using AngularJs.  There are two radio buttons "All shops" and "selected shops".  If the selected shops button is pressed, an extra textbox becomes visible where user can enter which shops they want.
If all shops are selected the textbox becomes invisible.
How can I clear the text from the textbox when the textbox becomes invisible.

       <tr> <!-- Scope of Distribution -->
        <td class="${styles.editRowHeader}">Scope of Distribution:</td>
        <td>
        <div ng-show="vm.showEditControls">
          <input type="radio" ng-model="vm.editAllShops" ng-value="true" /> All Shops and Stores          
          <input type="radio" ng-model="vm.editAllShops" ng-value="false" /> Specified Shops and Stores
        </div>
        


        </td>
       </tr>
       <tr>
          <div>
            <td  ng-hide="vm.editAllShops" class="${styles.editRowHeader}">Selected Shops:</td>
            <td>
              <!--<input  ng-hide="vm.editAllShops" class="${styles.efTextField}" ng-show="vm.showEditControls" type="text" ng-Model="vm.editSelectedShops" maxlength="100" />-->
              <input  ng-hide="vm.editAllShops" class="${styles.efTextField}" ng-show="vm.showLabelControls" type="text" text="" ng-Model="vm.editSelectedShops" maxlength="100" />
              
            </td>
          </div>
       </tr>
       <tr> <!-- insights -->
        <td class="${styles.editRowHeader}">Previous Insights:</td>
        <td>

Open in new window

…
0
3 Comments
I am getting the following error,
"There was an error while performing this operation. Details: Invalid application path"
when I click "Test Settings" on the "Basic Settings" in an IIS Web Site's application's Actions section. The Web Site itself doesn't get that error.
This is a Windows 2008 r2 server Version 6.1, Build 7601: Service Pack 1.
It is running IIS 7.5.7600.16385 (Yes, I know. But I have no choice.)

There was an application called SSI running a website called SSL that a vendor had setup on one of our servers. My company purchased the application and for reasons to lengthy, we have to setup the SSI application under a different Web Site.

I setup the new web site, EndCourseSurvey. (I'm a developer, not a server admin.)
  • The site bindings are https with IP addresses All Unassigned on Port 443.
  • The Host name field is disabled.
  • The SSL certificate is DigiCert SHA2 Extended Validation. It has a yellow warning next to Key Usage and Basic Constraints. (I don't know what that means but all our certificates seem to have that.)
  • Key Usage: Digital Signature, Key Encipherment (a0)
  • Basic Constraints: Subject Type=End Entity, Path Length Constraint=None

Under Basic Settings, the web site connects as the Application user with pass-through authentication.
When I click on Test Connection for the web site (not the application), the authentication passes with a green check. The …
0
2 Comments
Exploring ASP.NET Core: Fundamentals
LVL 13
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

Learn More!
I am working in Angular 7 and began the process of Upgrading to Angular 8. In the process I discovered that Angular Flex was not yet compatible with Angular 8. So I had to downgrade back to Angular 7.

What I would like to do is set up a test environment where I could begin experimenting with Angular 8. This would require me to be operating two different versions of Angular on the same local machine.

Is that possible and if so, what is the best way to do that?
0
3 Comments
I get the following error:
'd3' is undefined
The Visual Studio 2017 debugger stops on the file, nv.d3.min.js on this segment: 
e.dispatch=d3.dispatch("render_start","render_end")

Open in new window

The error occurs right after this line of code in my _Layout.cshtml file: 
 @RenderSection("scripts", required: false)

Open in new window

The d3 files referenced on the _Layout.cshtml file were these: 
<script src="https://rawgit.com/mbostock/d3/master/d3.min.js"></script>
<script src="https://rawgit.com/novus/nvd3/v1.1.15-beta/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v0.1.1/dist/angular-nvd3.js"></script>

Open in new window

I noticed that one of them was a beta version so I changed it to this: 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/1.29.5/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/1.29.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.min.js"></script>

Open in new window

But then I started getting bootstrap errors like this one in my angular.js [dynamic] file :
Unhandled exception at line 1290, column 7 in https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js
0x800a139e - JavaScript runtime error: [ng:btstrpd] App Already Bootstrapped with this Element '<div class="col-lg-12 ng-scope" ng-controller="summaryCtrl" ng-app="surveyApp">'
http://errors.angularjs.org/1.2.8/ng/btstrpd?p0=%3Cdiv%20class%3D%22col-lg-12%20ng-scope%22%20ng-controller%3D%22summaryCtrl%22%20ng-app%3D%22surveyApp%22%3E occurred
That happens in this area of code: 
function bootstrap(element, modules) {
  var doBootstrap = function() {
    element = jqLite(element);

    if (element.injector()) {
      var tag = (element[0] === document) ? 'document' : startingTag(element);
      throw ngMinErr('btstrpd', "App Already Bootstrapped with this Element '{0}'", tag);
    }

Open in new window

I'm not sure if changing the CDN source of the d3.js files caused that because of incompatibility or if there is a different reason. I think that at this point, since I don't know what I'm doing, the more I try to fix it, the more I'm going to break it.
I did not create this app. I inherited it from a programmer that is no longer available.
0
3 Comments
what is the use of react.js when compared to angular and jquery?
can you please provide a working example with all the js files for react.js?
0
11 Comments
Installed node version: v10.16.2
               npm version: 6.10.3

When i run the command 'npm install -g'

Got the below error.

npm ERR! code ENOENT
npm ERR! syscall rename
npm ERR! path /Users/sdatla/build_tools/node-v10.16.2-darwin-x64-npm-5.6.0/lib/node_modules/.staging/Newton-7c7da797/node_modules/@babel/code-frame
npm ERR! dest /Users/sdatla/build_tools/node-v10.16.2-darwin-x64-npm-5.6.0/lib/node_modules/.staging/@babel/code-frame-bbf22dc8
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, rename '/Users/sdatla/build_tools/node-v10.16.2-darwin-x64-npm-5.6.0/lib/node_modules/.staging/Newton-7c7da797/node_modules/@babel/code-frame' -> '/Users/sdatla/build_tools/node-v10.16.2-darwin-x64-npm-5.6.0/lib/node_modules/.staging/@babel/code-frame-bbf22dc8'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sdatla/.npm/_logs/2019-08-19T14_43_17_871Z-debug.log

Please help
0
1 Comment
I have a SPA in angular that is hosted at https;//mysite.example.com and it has a *.example.com lets encrypt certificate issued to it.

I have an API in ,net core that services this web app as well as a mobile iOS app and it has a default SSL certificate give to us by out cloud host ( https://myapp.my-cloudhost-service.com/api).

Because these services are operating independently, i do not need to worry about any issues with SSL certificates correct? Like no CORS issues or warnings for XSS stuff in the browser?

Its all working fine on dev but of course i want to make sure i have all my basis covered before we push to production.

Thanks
0
3 Comments
How do I align an image to the bottom of a div?  I want the image denoted by ${addIcon} to be at the bottom of its container.  I'm using AngularJS and Typescript

           <td ng-repeat="slotContent in slotRow.Slots" class="${styles.calendarTableTD}">
             <div ng-repeat="booking in slotContent.Bookings">
              <span ng-show="booking.approved" class="${styles.calendarApprovedBooking}" ng-click="vm.editExistingBooking(booking)">{{booking.title}}</span>
              <span ng-show="booking.approved === false" class="${styles.calendarBooking}" ng-click="vm.editExistingBooking(booking)">{{booking.title}}</span>
             </div>
             <div style="cursor:pointer;" ng-show="slotContent.ShowAddIcon" ng-click="vm.newBooking(slotContent.SlotNumber, slotContent.SlotDate)">
                <img  src="${addIcon}"  style="height:20px; width: 20px; " >
             </div>
           </td>

Open in new window
0
20 Comments
I have the following code inside a doubly nested ng-repeat loop in my AngularJs HTML document: 

<input ng-model="field.data" value="{{field.data}}"
   type='text' 
   name="{{fieldSet.setid}}{{field.number}}"
   valid-fieldset011 />

{{formController.withModelOptions()}}

<div ng-show="theForm.{{fieldSet.setid}}{{field.number}}.$error.zip">
   <font color="green"> {{field.dataTypeInfo}} </font>
</div>

Open in new window

Later in the same file I am importing a file with:

<script src="/js/validator_directives.js"></script>

Open in new window


where the contents of this file are:

angular.module('usmessage_client')
    .directive('validFieldset011', [function() {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function ($scope, $element, $attrs, ngModelCtrl) {
                    ngModelCtrl.$validators.zip = function (value) {
                        return value.length == 5;
                    };
                }
            };
    }]);

Open in new window


The string 'usmessage_client' is the name of the app defined in the associated javascript file by:

var app = angular.module('usmessage_client', []);

Open in new window


This all works just fine.  The input field validator does what it is supposed to do, showing the error message stored in the variable "field.dataTypeInfo" whenever the  the entry in the input element has a length other than 5.

What I want, however, is for the attribute "valid-fieldset011", which serves as the link to the validator directive, to be given as the value of a variable.  The reason is that my system will generate many such input elements, and I want each element to have a dynamically created and unique validator.  Thus each has to have a dynamically created and unique name.

Unfortunately, AngularJs does not support interpolation for attribute names, even though it does support interpolation for attribute values.  For example, my code above has

name="{{fieldSet.setid}}{{field.number}}"

Open in new window


thus using a variable to provide the value for the "name" attribute.  But one cannot do something like

{{validatorLink}}

Open in new window


in place of the attribute valid-fieldset011.  AngularJS does not allow this.  

I have made many, many attempts to find or create a workaround, without success.  Would anyone know how to do this?  I'm suspicious that this simply cannot be done with AngularJs.
0
17 Comments
Can anyone explain meaning of the code below and whether I can safely remove it?

if (typeof (console) === "undefined) {
      var console = {};
      var console.log = function() { };
      var console.error = function() { };
      var console.trace = function() { };
}

Thank you.
0
5 Comments
I'm trying to learn Flow (https://flow.org/) which is like lighter version of typescript,

I found this article: https://medium.com/@forbeslindesay/covariance-and-contravariance-c3b43d805611

 I don't fully understand why Flow would throw up an error when running this code (code is from that article) without readonly syntax as we don't change anything in the object and I don't understand how could we possibly change something there, anyone can explain it to me?:

function logStringContainer(container: {value: string}) {
  logNullableStringContainer(container);
}

function logNullableStringContainer(container: {value: ?string}) {  

  if (container.value != null) {    
    console.log(container.value);  
   }
  }

 logStringContainer({value: 'foo'});

Open in new window
0
1 Comment
Exploring SQL Server 2016: Fundamentals
LVL 13
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

Learn More!
Can writing this

$server.bindData("GemSubscriptions", $scope, "gemSubscriptions")


instead of this

$server.bindData("GemSubscriptions", $scope, "gemSubscriptions", {
        callback: function (d) {
            console.log("Gem Reports:", d);
        }
    })


cause any issues?


Thanks.
0
3 Comments
I have an ASP.NET MVC framework 4.5 with AngularJS that I’ve inherited and have to maintain.
The application had a .cshtml to PDF capability for a summary of all student questionnaires for a given term. The questions changed, and so we added a new .cshtml page for the new questions and renamed the .cshtml for the old questions.
Now there are
PrintSummary.cshtml
and
PrintSummaryBefore2019.cshtml.
What I’m trying to do is to have a condition somewhere in the code that will call PrintSummaryBefore2019.cshtml for queries before 2019 and call PrintSummary.cshtml for queries starting with 2019 and after.

The anchor tag for the Print To PDF functionality was originally coded like this:

    
<div style="padding-bottom: 10px; text-align: right;">
        <a class="btn btn-danger" href="../Survey/PrintSummaryPDF?Term={{term.Term}}&Campus={{campus.CampusId}}&Faculty={{faculty}}&Dept={{dept}}" target="_blank"><span class="glyphicon glyphicon-print"></span> Bulk Print </a>
    </div>

Open in new window

I changed it to this:
        
 <a class="btn btn-danger" onclick="setHref" target="_blank"></a>

Open in new window

And I added this JavaScript:
<script>  
    function setHref(term, campusid, faculty, dept) {
        var term = document.getElementById("term");
        if (Number(term) <= 20190)
            window.location.href = "../Survey/PrintSummaryPDFBefore2019?Term=" + term +
                "&Campus=" + campusid +
                "&Faculty=" + faculty +
                "&Dept=" + dept ;
        else
            window.location.href = "../Survey/PrintSummaryPDF?Term=" + term +
                "&Campus=" + campusid +
                "&Faculty=" + faculty +
                "&Dept=" + dept ;
        return false;
    }
</script>

Open in new window

But the debugger never even reaches this script. It seems that if a page is setup for AngularJS then it won’t parse regular JavaScript calls; I don’t know.

Then in the PrintSummaryPDF() function of the Survey controller, the previous programmer had code that parsed the Url, altered it to call a different function in the Survey controller, and then started a process like this:

Open in new window

…
0
5 Comments
Can removing multiple console.log from JavaScript, jQuery, AngularJS application cause any issues?

Thanks.
0
5 Comments
Any idea what does the below coding perform ?
#1 this.movie.ratings.map(r => r.stars)
#2 .reduce((prev, curr) => prev + curr, 0);


get stars(): boolean[] {
        if (this.movie != null && this.movie.ratings != null) {
            let total = this.movie.ratings.map(r => r.stars)
                .reduce((prev, curr) => prev + curr, 0);
            let count = Math.round(total / this.movie.ratings.length);
            return Array(5).fill(false).map((value, index) => {
                return index < count;
            });
        }
0
1 Comment
What does the actual code perform  ? From my guessing
#1 Array(Math.ceil(this.repo.movies.length/ this.repo.pagination.moviesPerPage))  ==> Create a array of elements depending on expression result
#2. .fill(0) ==> Fill up each array element with 0
#3 .map((x, i) => i + 1  => What does it want to do ???


get pages(): number[] {
        if (this.repo.movies != null) {
            return Array(Math.ceil(this.repo.movies.length
                / this.repo.pagination.moviesPerPage))
                .fill(0).map((x, i) => i + 1);
        } else {
            return [];
        }
0
3 Comments
<button class="btn btn-xs" ng-click="dateRangeSelectionBox.submit()" ng-disabled="!showText">Submit</button>

The button works correctly on click. How to make it work the same on hitting ENTER?

Thanks.
0
6 Comments

Angular

696

Solutions

9

Content

i
The collection of articles, videos, and posts on this topic.

444

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.

Top Experts In
Angular
<
Monthly
>
Hall of FameAnnual Expert Awards