We help IT Professionals succeed at work.

Angular

722

Solutions

459

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.

I'm following an example to create my first .Net Core with Angular.  hadn't added any code. Just the code that project created.

The project was running fine until I did npm install and installed TypeScript.

I want to use Angular 8

1. I created the project and I see this
ee1.png
ee4.png
2. I do ng --version and I see this

ee2.png
3. I ran the project and I get this error. How can I make it use Angular 8 and not 9?

ee3.png

I found this but I want to use latest Angular, I want to use Angular 8. Downgrade, not upgrade
https://thecodebuzz.com/this-version-of-cli-is-only-compatible-with-angular-version-or-but-found-instead/

Should I do this?

1. Install CLI 8.2.12   --> https://www.npmjs.com/package/@angular/compiler-cli/v/8.2.12
2. Change package.json  from
 "@angular/cli": "^9.1.0",
    "@angular/compiler-cli": "^9.1.0",

Open in new window


to
 "@angular/cli": "^8.2.12",
    "@angular/compiler-cli": "^8.2.12",

Open in new window


Or this one. I think I need to uninstall the CLI and reinstall version 8 --> https://appdividend.com/2019/06/03/how-to-update-angular-cli-to-version-8-angular-8-cli-upgrade/
0
I'm on my first Angular 8 project, upgrading a side project I have.

I installed nmp and Angular 8.

Following a tutorial on learning Angular 8 (https://www.c-sharpcorner.com/article/learn-angular-8-step-by-step-in-10-days-day-1/)
 it mentions installing Typescript.

1. I checked package.json and I see this. Does this mean Typescript has been installed?

ee1.png
2. I checked this folder and I see this:

ee2.png
3. I did tsc -v, but get a message 'tsc' is not recognized as an internal or external command,
operable program or batch file.



4. I opened the project's file in notepad and I see this <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>

Do I have Typescript installed?
0
I have a side project in Web Forms that I want to upgrade to .Net Core and Angular on my own time.  I'm using VS 2019.

1. I'm following this example   https://www.c-sharpcorner.com/article/create-angular-8-application-with-asp-net-core-3-0/

2. I installed npm

3. Installed Angular 9. I see this

ee1.png
4. I created the project. Looking at package.json...why do I see Angular 8? I see this. Is this OK?
ee2.png
0
I am new to writing API's, and was wondering where the best place to start was with writing a RESTful API for a locally hosted SQL2017 server. I have written an app using angular, and wish to access my data that is located on the local network (installed on a windows 10 machine) through a API.
I already have a VB.net project that connects to the database (each practice has a local server and program that connects through the local network).  I am writing a app to give more functionality to the clients, and need to access this data from the newly written app (using ionics and angular, writen in visual studio code).   As I am new to API's, I was wondering where the best place was to start, or any good examples on how to build a basic api.  I would also like to know if I can integrate this into the existing VB.net project, as the project and sql server are already at clients.
0
I am writing a new project in angular and ionic, and coding in Visual Studio Code, using a tutorial from Udemy. In this tutorial, a API is used as an example ( newsapi.org ), for fetching data and displaying it etc. I also use cordova to build for android as this is a app that will be installed on a tablet.

In my project, I want to connect to a locally hosted database (SQL server 2017) that is simply installed on a windows 10 machine at each of our customers. I need basic CRUD operations (like inserting a new client that is captured on the tablet).  From what I have seen, almost everyone recomends writing an API to form the connection. Is this the only way to connect to a locally hosted db? I also came across a cordova plugin  (https://github.com/SergioDosSantos/cordova-plugin-sqlserver),  but this does not explain nicely how to implement it, and I was unable to get it to work correctly, when built, a error message "Tab1Page.html:21 ERROR TypeError: Cannot read property 'init' of undefined" is given.

What is the best way to connect to a local db?
0
hi am geting observalble error
observalble
0
I have two recommended ways of doing an Angular API call.  

Both of them work but I am trying to understand the difference.  Any insight would be appreciated...


Here is the first option.
  public get(url: string, options?: any) {
     return this.http.get(url, options);
  }

Open in new window


This is the second option.
  public get(url: string, options?: any) {
    return this.http.get(url, options)
    .pipe(map(getdata => {
      console.log("apiSvc.19 | get RETURN: ",getdata);
      return getdata;
    }),
    catchError(this.handleError('api-http-svsc.27 | API for getURL ['+url+']', options))); 
  }

Open in new window

0
I copied the following codes from mvc/razor angular c# web app. I would like to learn that usually how the {User.FirstName} got the data source from.  

Just hope to get someone who know about mvc/angular.

Thanks



<ul class="nav navbar-nav" id="centeredInNav"><li><a href="tel+:112222">for questions Call 
                {{User.FirstName}} {{User.LastName}} at {{User.Phone | tel}}
            </a></li></ul>

Open in new window

0
hi am having this error
doc
0
0
module cannot be found but i do have it
module
0
I am currently building a android based app using Ionic 4 and angular. I am looking for all possible ways to connect the app to a locally hosted database (sql server 2017). I am aware that I can connect through wifi, but was wondering if it is possible to make this connection using a usb instead of wifi. Is there a way to connect to a db this way to insert or update data on the sql server 2017 side?

Scenario: Program that works on a pc, using a locally hosted server. A tablet in front, to capture data from clients easily so that reception does not have to type everything in themselves.
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?
1
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

Angular

722

Solutions

459

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
>