Angular

713

Solutions

454

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

hi am having this error
doc
0
0
module cannot be found but i do have it
module
0
hi am having error in my angular component
todos
import { Component, OnInit } from '@angular/core';
import { TodoDataService } from '../service/data/service/data/todo-data.service';


export class Todo {
  constructor(
    public id: number,
    public description: string,
    public done: boolean,
    public targetDate: Date
  ){

  }
}


@Component({
  selector: 'app-list-todos',
  templateUrl: './list-todos.component.html',
  styleUrls: ['./list-todos.component.css']
})
export class ListTodosComponent implements OnInit {

   todos = Todo
  //   new Todo(1,'Learn to Dance',false,new Date()),
  //   new Todo(2,'Become Expert in angualr',false,new Date()),
  //   new Todo(3,'Visit South Africa',false,new Date())

    //  {id : 1,description :'Learn to Dance'},
    //  {id : 2,description :'Become an Expert in Angular'},
    //  {id : 3,description :''},
  
//  ]
    
  // todo = {
  //      id : 1,
  //      description: 'Learn to dance'

  // }

  constructor(private todoservice:TodoDataService ) { }

  ngOnInit() {
    this.todoservice.retriveAllTodos('tshifhiwa')
    .subscribe( 
        response => 
            { 
                console.log(response); 
                this.todos = response; 
            } 
    )
}
}
   

Open in new window

0
hi am having this error in my angular application
Uncaught Error: Template parse errors:
Can't bind to 'posts' since it isn't a known property of 'app-post-list'.
1. If 'app-post-list' is an Angular component and it has 'posts' input, then verify that it is part of this module.
2. If 'app-post-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("n>
<app-post-create (postCreated)="onPostAdded($event)"></app-post-create>
<app-post-list [ERROR ->][posts]="storedPosts"></app-post-list>
</main>

"): ng:///AppModule/AppComponent.html@4:19
at syntaxError (compiler.js:2175)
at TemplateParser.parse (compiler.js:11292)
at JitCompiler._parseTemplate (compiler.js:25837)
at JitCompiler._compileTemplate (compiler.js:25825)
at compiler.js:25769
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:25769)
at compiler.js:25682
at Object.then (compiler.js:2166)
at JitCompiler._compileModuleAndComponents (compiler.js:25681)
syntaxError @ compiler.js:2175
parse @ compiler.js:11292
_parseTemplate @ compiler.js:25837
_compileTemplate @ compiler.js:25825
(anonymous) @ compiler.js:25769
_compileComponents @ compiler.js:25769
(anonymous) @ compiler.js:25682
then @ compiler.js:2166
_compileModuleAndComponents @ compiler.js:25681
compileModuleAsync @ compiler.js:25643
0
popup that is currently renderedI have the following popup that needs to be changed to better align with UI standards.

This is the AngularJS that makes this page:

I need to put some padding , alighn the buttons properly.  Can someone help me refactor?




<script type="text/ng-template" id="ApproveArRequestTemplate.html">
    <form>
        @*<div class="modal-header">
            <h3 class="modal-title">Add attachment</h3>
        </div>*@
        <div class="modal-body">
            <div class="control-group">
                <label class="control-lable">Approval Comment</label>
                <div class="controls">
                    <textarea id="approvereason" name="approvereason" class="form-control" ng-model="ApproveReason"></textarea>
                </div>
            </div>
            <div class="checkbox" ng-show="item.IsRoleEvpCfoCoo">
                <label><input type="checkbox" id="IsRouteToCEO" ng-disabled="IsRouteToCEO" ng-model="IsRouteToCEO" />  Route to CEO for approval</label>
            </div>
            <div class="checkbox" ng-show="item.IsRoleCreditDeptFPnACommOp">
                <label><input type="checkbox" id="IsRouteToDirectorOfTax" ng-model="IsRouteToDirectorOfTax" />  Route to Corporate Tax</label>
            </div>
            <label class="control-label" ng-show="item.IsRoleLocalFinance">Are Pre-Approved Business Metrics Met</label>
            <div class="col-md-6">

                <div class="btn-group" 

Open in new window

0
Trying to Integrate an Angular 7 component into an Angular JS (1.X) component via 'iframe'. This is for a very large application that is integrating Angular 1.X, Angular 5, Angular 7 and MVC.

The issue is that when the code generated by the Angular 7 component is displayed in the Angular 1.X template, the master header, footer and nav bar for this segmented part of the Angular 1.X application is automatically displaying with the Angular 7 code. How can I turn off these 1.X artifacts from within the 7.0 output?

This is happening because of the use of the iFrame, but rather than rewrite the entire section of the 1.X code at this time, my client wants me to generate the new code in 7.0 and have it display in the 1.X section via an iFrame.

Are there any other alternatives to get this code displaying from the 7.0 code into the 1.X code so that the default master header, footer and nav bar are not displaying?
0
How to use google analytics in to my angular js project. I am new to angular js . Please send me steps and links to use the google analytics into my angular project.
0
Hi,
I have already done some webform development, however I am thinking of developing a new project and I think it makes no sense to use a technology that I think is becoming obsolete.
As I usually develop in .NET I thought about using Blazor, since I don't have many skills in java framework either.
It makes sense to choose blazor, or it would be better to choose asp.net core controls or another java framework. Will blazor succeed?

best regards
1
I want to write a web application that will be hosted on the cloud. It is UI based application. It will programmatically interact with AWS and few other tools. I have heard about Angular, React, Vue, etc. Which UI framework is best and why? Looking for a framework which will give the best UX and performance.
0
Is React as Object Oriented as Angular?

I've worked with Angular enough to fall in love with its modular design and how a new control that works on one web page and easily be dropped onto any web page in the project.

The way it limits the scope of the CSS, HTML and Javascript to the specific problem at hand, in my eyes, if what makes it so fast.

How about React?

I have no experience with React, but hope to see some coded snippets to explain how you'd connect logic, page placement and styling. (and anything else that should be considered when choosing React over Angular)

Also, any predictions on adoption rates? If a technology is flagging, I may not be as interested...

Any new technologies which may rival Angular and React?


Thanks
0
Is there a way to set two fields combined as required field in AngularJS, let's say you have two text fields Product & Order & i need to make sure that atleast one of the field is populated
0
I am using the jQuery effect slide for animation.  It works great on Chrome, but in IE, if I scroll the animation up, it moves the page back down on it's own.  Obviously not a good thing.

Any ideas on this would be greatly appreciated.

HTML
<!-- Carousel -->
<section id="carousel_gadget" ]>
  <div data-ng-click="toggleSettings()" data-ng-show="inEditMode" class="settings-cog">
    <i class="fas fa-cog"></i> {{gadgetTitle}}
  </div>

  <div class="carousel d3-card d3-card-main d3-card-announcement">
    <div class="carousel-inner">
      <div class="feature" ng-model="slides" ng-hide="HideSlide">
        <div id="jq" style="float: left;">
          <img class="feature-img" data-ng-src="{{slides[currentItem].Image}}" alt="{{slides[currentItem].Title}}" data-ng-if="!slides[currentItem].IsPublishingImage" />

          <div class="feature-content">
            <div><a class="read-more-small-button" href="/sites/portal/Pages/Some_ShowAll.aspx">More</a></div>
            <div class="eyebrow">List Data</div>
            <div class="title"><a href="/sites/portal/Pages/Some_ReadMore.aspx?Listname=ListName&ItemID={{slides[currentItem].Id}}">{{slides[currentItem].Title | adjustlength:100}}</a></div>
            <div class="date">{{slides[currentItem].Date | date:'MMMM d, y'}}</div>
            <div class="blurb">{{slides[currentItem].Description | adjustlength:150}}</div>
            <div class="button"><a 

Open in new window

0
I have an Ienumerable object that i am storing in AngularJS $scope(say Product), i need to loop through the $scope.Product object & remove some data if it meets a particular criteria. How do i do that( let's say if $scope.Product.ID = 5 then remove it from Ienumerable object)
0
I have an angular code below. And I need re write this code to do the same using jQuery. I have no skills working with angular

insite.nav = function(n) {
    "use strict";
    var t = {};
    return t.uncheckBoxes = function(t) {
        for (var r = document.getElementsByName(t), i = 0; i < r.length; i++) r[i].checked = !1;
        n("body").removeClass("sidebar-main");
        n(".isc-primary-nav-back").addClass("isc-hidden")
    }, t.hideMenu = function() {
        n("#sub-cat").addClass("hide-item")
    }, t.activatePanel = function() {
        n("body").hasClass("sidebar-main") || (n("body").addClass("sidebar-main"), n(".isc-primary-nav ul:first").addClass("active-nav"))
    }, t.goToSubnav = function(t) {
        var i, r;
        n(".isc-primary-nav ul li .hide-item").removeClass("hide-item");
        i = n(".isc-primary-nav ul.active-nav");
        i.scrollTop(0);
        n(".isc-primary-nav ul").removeClass("active-nav");
        r = n(t);
        r.closest("li").find("ul.subnav:first").addClass("active-nav");
        n(".isc-primary-nav-back").removeClass("isc-hidden")
    }, t.goBack = function() {
        var t = n(".isc-primary-nav ul.active-nav");
        t.closest("li").find(".subnav-check:first").click();
        t.removeClass("active-nav");
        t.closest("li").closest("ul").addClass("active-nav");
        n(".isc-primary-nav ul.active-nav").hasClass("subnav") || n(".isc-primary-nav-back").addClass("isc-hidden")
    }, t.closePanel = function() {

Open in new window

0
I have upgraded UI bootstrap version to "ui-bootstrap-tpls-2.5.0.js"(so i can use popover functionality) & that's causing some issues in my web page. I seem to get  below errors & i am guessing this may be because of the mismatch between dependencies  & ui-bootstrap-tpls-2.5.0 versions

Does popover work with angular-ui-bootstrap Version: 0.11.2?

angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1 Error: [$injector:unpr] http://errors.angularjs.org/1.2.1/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24uibModal
    at angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1
    at angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1
    at Object.i [as get] (angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1)
    at angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1
    at i (angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1)
    at Object.r [as invoke] (angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1)
    at angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1
    at i (angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1)
    at r (angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1)
    at Object.instantiate (angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1)

Currently i have following references & their version

angular-ui: 0.4.0
angular-resource: v1.2.1
angular-animate: v1.2.1
ui-bootstrap.Jasney.inputmask.js: v3.1.0

Any help would be highly …
0
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
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
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
hi am having this error in angular
angular
0
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
Which front end should I consider to use for web developement, react, Angular Vue.js or Razor view ?

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

Angular

713

Solutions

454

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
>