Angular

642

Solutions

420

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 use Angular CLI with Visual Studio Code
After auto system update my computer I was unable to start my server part of Angular application
 with "dotnet run", tried to use "dotnet restore" and got error:
error NU1100: Unable to resolve 'Microsoft.NET.Sdk ' for '.NETCoreApp,Version=v 2.2'.
How to resolve this?
0
Build an E-Commerce Site with Angular 5
LVL 13
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

Hello,

I have always been a c#, .NET developer and our company is gradually transitioning to MVC and Angualr.  I am very new to MVC and Angular concepts, done a few courses about Angular and MVC on plural sight since last week and that is where I am at currently.

One the tasks I have on hand is to display a modal pop from from which needs to triggered to display from an MVC controller based on certain conditions and this modal pop up form which is a very basic form needs to be displayed using Angular.

This Modal pop up is as simple as it gets and will have a text box which needs to have an input of a 14 digit alpha numeric characters ( failure on providing it will show a validation error message on the modal pop up itself) a submit and a cancel button. On click of the submit button (after validation), the MVC controller needs to receive this value and continue its normal process.

Currently the MVC page where the modal pop up needs to be displayed has a few controls and a button. On click of this button the MVC controller calls the data access method and stores certain values in the DB. But if this 14 digit code is missing it currently throws an exception. Hence the need to for a modal popup for the user to enter the missing data.

I would very much appreciate if you can point me in the right direction by providing me some useful links or some code samples.

Thanks in advance AJ
0
it's a bizarre problem the program screen starts shaking resizing slightly it's only happens when screen is shrink slightly
please advise what might be happening here
I have a clock that gets displayed in the lower right-hand corner although I had moved it to the center and it made no difference
I am using the sex State mounted to call the setinterval
function it works great until the screen is modified slightly and then it starts breathing as the right Edge moves to the left and to the right an animated fashion.
right now I'll entertain any possible solution it's weird
 
well I can't show the actualcode. I will try in and create a copy to recreate the problem.
set interval causes update of information that is then displayed
within mustaches. {{ datetimestring}}
it would almost seem like maybe it was due to variable fonts
but but then why is it triggered by resizing with screen eg shrinking the screen or adding a component div or span to screen ?

I will post an example of what I'm talking about when I get a chance
0
Angular JS  HTTP Error 405.0 - Method Not Allowed

whenever i add the phone in data , the page throws HTTP Error 405.0 - Method Not Allowed

data: { name: $scope.Name, email: $scope.Email, phone: $scope.Phone, comments: $scope.Comments },


Html:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<div class="row"  ng-app="MyApp" ng-controller="MyController">
            <form id="contact" action="" method="post" >
                <div class="row">
                    <div class="col-md-12">
                        <fieldset>
                            <input name="name" type="text" class="form-control" ng-model="Name" id="name" placeholder="Your name..." required="">
                        </fieldset>
                    </div>
                    <div class="col-md-12">
                        <fieldset>
                            <input name="email" type="email" class="form-control" ng-model="Email" id="email" placeholder="Your email..." required="">
                        </fieldset>
                    </div>
                    <div class="col-md-12">
                        <fieldset>
                            <input name="phone" type="text" maxlength="10" ng-model="Phone" class="form-control" id="phone" placeholder="Your Phone..." required="">
                        </fieldset>
                    </div>
                    <div class="col-md-12">
                        

Open in new window

0
HI Experts,

We're trying to evaluate whether or not Angular is a viable solution for us to use for our new web application.  As part of this evaluation process, the following questions has come up: Can a specific Angular page be called from a mobile device and pass in parameters?  Here's what I mean:  Let's say I have a mobile app that supports 50% of the functionality natively, while I want to "pass" the user over to our web application for the other 50%, i.e. Let's show the status of order X of user Y.  So we'd need to be able to authenticate user Y from the mobile app, open the Order History page of our website and display the order X of user Y.   Our current application is in MVC, where doing this is no problem.  Can this be done with a web application built in Angular 6.0 with .NET Core Web API back-end.  If yes, could someone share an example or two?

Thanks a bunch in advance!
0
I want to be able to insert text that is chosen by a user from a pop-up, and insert it into the caret position in a content editable div. I'm wondering how I could do that (specifically how do I get the caret position, and ensure that the caret position is not lost when the user is interacting with the pop-up) ?

If you could provide sample code that would be very helpful.
0
Hi Experts,
I'm working on an angular 7 project that requires text field (textarea)  to capture information along with emoji support. I've had a look at some of the existing libraries and thought that quill editor (exposed via ngx-quill) seemed to tick the boxes, it has a quill-emoji extension. The content created using this textarea will also be exposed via a mobile application.

I have managed to get most of the work completed, but I'm suspecting that the CSS is not being loaded properly (see image) since the pop-up is not rendered properly and the emoji's are rendered as the characters instead of the images etc...

screen grab of what is being rendered

I wanted to find out  :
Whether Quill is best choice in my use case (or whether there are any alternatives that are light weight)
What should I store in my db (so that it can be exposed in a mobile application - flutter) - i.e should I store just the quill data structure, the innerhtml, or both. What would make it easier to expose this via a mobile application ?
If there was another way to handle the emoji button (instead of displaying a toolbar) ?
0
Hi ,

How to setup a dynamic Link URL in the deploying dist folder?

I have created a test application with http service. In that application i have a detailed view page link ( <a href="test_server_URL"> Detailed View </a>). In this anchor tag i have the test server URL Link , i need to change this before applying in live server. How can it be done. I planning to change this as "Live_server_URL" and build the new dist folder with " ng build --prod " command. is this is the right way or else please guide me. Thank You.
0
Hello,

  Need some guidance or sample code on how to build a calendar in Mobile.

I have a mobile app (cordova) angular 1 and I have to build a page with a calendar widget where user can create event. It should be  standalone pure angular/JS widget.

I have attached an image of calendar that I need to build

Thanks for your help
0
I am just getting started with Angular (https://angular.io).

What I notice is every time I create a new project using the ng new myproject  (e.g. ng new angular-tour-of-heroes), it creates a (nodes_module) directory with like over 20,000 files.

I understand that in some cases you can set different settings that don't require all of the same nodes so that would create a different set of files for nodes_module.

But if I have multiple projects that all will use the same basic set of files, is there a way to share the nodes_module?

It seems that if I'm working on ten different projects at once that's an awful lot of files and disk space that is identical...

Is there a space saving option?

Also, if this is the best way to do this, is there a best practice for how to archive old projects.  In other words, if I have a project that I work on and turn over to a client, I no longer need it on my drive taking space. But if I want to save it in case the client wants me to replicate it again... is it okay just to save the src files or do I need to save the whole thing including the 24K+ nodes_modules?

Thanks.
0
Fundamentals of JavaScript
LVL 13
Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

How to do server side pagination for a Angular with Play framework application ?

Looking for a very good example with source code

Please kindly advise.
0
We have around 10,000 rows in table which needs to be show in the browser. The example given in https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html shows we can show 50,000 records very quickly

We are using Angular with ng-repeat which takes 2 minutes to load the table. We have created 5 columns. In which one of the column has a condition options which will be enabled based on certain conditions for each rows. Whenever we add few options to the button it takes more time

example, edit, delete, view etc., in the action button which is part of a column

We observed whenever we add option along with the ng-repeat with the options takes huge time to render the table.

How to speed up the rendering time ??? Please advise.

Thanks.
0
Hi all,
in order to translate my page and in according with this tutorial https://angular.io/guide/i18n I done the following simple operations but I don't see any translated texy. Why? Thank you very much!

1) Translation definitions. In the new folder src/locale I created the files messages.en.xlf and messages.it.xlf, with the following code (obviously it changes the target for each language):

    <trans-unit id="introductionHeader" datatype="html">
       <source>placeholder</source>
      <target>Ciao i18n! (it-IT)</target>
      <note priority="1" from="description">An introduction header for this sample</note>
      <note priority="1" from="meaning">User welcome</note>
      <target state="new">bye bye</target>
    </trans-unit>

Open in new window


2) Tag definition. In my html page I insert the following tag, with a placeholder:

    <h1 i18n="@@introductionHeader">
    	placeholder
    </h1>

Open in new window


3) In angular.json file, I insert the following rows:

   
 "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/mobile-client",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "i18nFile": "src/locale/messages.it.xlf", //This
                "i18nLocale": "it",                       //This
                "i18nFormat": "xlf",                      // This
                "assets": [
    (...)

Open in new window


Then I tried to build and serve but I don't see the translated text "bye bye". How can I solve it? Thank you very much!
0
Hi all,
from my Angular 6 form I should send some data reproducing the same configuration which I have in Postman (I send a screenshot with the complete configuration: not "form" but raw / Json).

How can I do this? Thank you very much. I searched some solutions but I found example only in other cases.

registration.png

EDIT I try to edit to make my question more clear (I saw the -1 score, sorry if it is not clear). I have a set of data already retrieved from my Angular 6 / Material Design form and now I would sent this data to my backend (localhost:8080/something...). The configuration for this http post operation is in the attached screenshot: in my body, I choosen raw / Json options and all works correctly. Now, I should reproduce the same sent action also in my typescript component. How can I this request make? I tested some solutions but without any success. Thank all!

This is my code which doesn't work:


public login() {

        let userPassword = this.registrationForm.get('password').value;
        let userLogin = this.registrationForm.get('email').value;
        let userLangKey = 'en';

        const transferObject = {

            password: userPassword,
            login: userLogin,
            langKey: userLangKey
        }

        //JSON.stringify(transferObject);

        const req = this.http.post('http://localhost:8080/api/register/', {
            password: userPassword,
            login: userLogin,
            langkey: 

Open in new window

0
I am trying to edit a form in Angular 6 + Material Design. In the above code, I have 1 problems.

I would change the fa-envelope icon and I have searched in the Material Design folder, according to the tutorial I found. But no icon info or link was there; how are icons in material design managed? How can I change it?

Thanks all

    <form (ngSubmit)="login()" [formGroup]="registrationForm">
    	<div class="mt-4">
    	<mat-icon matPrefix fontSet="fa" fontIcon="fa-envelope" class="fa-24px text-center mr-3"></mat-icon>
    	<mat-form-field class="w-100">
    	   <input type="email" formControlName="test" matInput placeholder="Deine Name" required="required">
    	</mat-form-field>
    (...)

Open in new window

0
I am trying to use Angular 7's drag and drop cdk to drag and drop mat-card. My code is quite complicated. I am creating mat-grid dynamically according to grid number (Raster is the property in JSON for this - in German). I want to just change the mat-card embedded in tile but when I drag one card from one place to another, entire layout of my grid changes. I dont want this. I just want to change the card from one postion to another. Below is my code.

Raster.component.html

<mat-grid-list cdkDropList class="example-list z-depth-5" cols="3" rowHeight="180px" gutterSize="8px" (cdkDropListDropped)="drop($event)">
  <mat-grid-tile class="example-box z-depth-4" *ngFor="let tile of tiles; let i = index" [colspan]="tile.cols" [rowspan]="tile.rows" cdkDrag>
    <mat-card class="add-new-flyer" *ngIf="tile.flyer == '-1'" id="p_{{tile.flyer}}">
      <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="space-evenly">
        <div fxLayout fxLayout fxLayout.xs="column" fxLayoutAlign="end" fxLayoutGap="10px" fxLayoutGap.xs="0">
          <div class="button">
            <button mat-mini-fab (click)="addNewWerbedata(tile.text)">
              <mat-icon>add</mat-icon>
            </button>
          </div>
        </div>
      </div>
    </mat-card>
    <mat-card class="flyer-card" *ngIf="tile.flyer !== '-1'" id="p_{{tile.text}}">
      <div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="left" fxLayoutGap="10px" fxLayoutGap.xs="0">
        <div 

Open in new window

0
Hi all,
in the official ng-book (p. 73) I read that is possible indicate an angular 6 component tag in 2 different ways. Example from the official manual:

1) <inventory-app-root></inventory-app-root>
2) <div inventory-app-root></div>

but in my Angular application only the 1st way works.


<app-test-component></app-test-component>
(work)

 <div app-test-component></div>
(doesn't work)

Why?
Thank you very much
0
Hi i just purchased Winzip 22 yesterday


I'm trying to run a gzip application from the command line via http-server


eg.  http-server gzip
to gzip the Angular bundles down to a much smaller size


Any ideas how I can do this?


Gordon Cumming
0
Hi,

I work on a nativescript angular application and wanted to schedule some tasks (example: each 10 minutes) where I do http requests, call my angular services, ...
Now, when the android phone is locked and charging there are no issues, but when the phone isn't charging and locked that's when stuff goes wrong.
The call is still handled (so my function gets handled), but my http calls take ages, and when I wake up the phone everything operates normally again.

Is there something I can do to go around this ? To have the http requests etc still going

Tested on galaxy s7
0
Angular Fundamentals
LVL 13
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

Hi experts. I'm integrating angular into my aspnet core project. Issue is, I can't seem to render my component(which I used as a tag in my .cshtml view). When i checked my console for the errors, I saw that it came with the runtime, polyfills, style, etc which I used in my <head> element..I removed them all, still didn't render... Is there a basic configuration I'm supposed to do before my angular component selectors can work as tags in my html? Thanks in advance
0
Spring Boot and Angular: Serving static content

Hi Experts,

I have a springboot backend application and an angular front end. I have built the angular front-end copied the contents of dist directory to /src/main/resource/static.  The index.html in the static directory is served when I go to https://localhost:8443 and the links are working.  However, when I refresh the page, it goes to the whitelabel error page.  I have found a proposed solution to this from StackOverflow.  It too doesn't work.
@Controller
public class ForwardController {

    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String redirect() {
        // Forward to home page so that route is preserved.
        return "forward:/";
    }
} 

Open in new window

However, using this just prints forward:/ on the refreshed browser.   Also, this too does not look like the solution I want.  I want to just refresh the page.
Any help would be appreciated.  Thank you
0
Can't get bootstrap modal working. Just button is showing up but clicking on it doesn't do anything. Below is my app.component.html content from Angular.

<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <!-- Bootstrap -->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="content-fluid base-padding-top">
    <main>


     <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="purchaseLabel">Purchase</h4>
            </div>
            <div class="modal-body">
          

Open in new window

0
Good day, how do i link my aspnet mvc view with my angular? Thanks.
0
Hi, I asked a question yesterday on how to integrate angular into my existing aspnet mvc app(vs 2017). It got solved as I could include angular folders. I'm a bit confused now, as to how to route my model-controller-view. Angular is supposed to be my front end technology, am I to include my controllers as classes in my angular src folder(.ts) or what? I'll love access to an article or github repo that clearly explains this concept of angular with MVC. Thanks Experts.!
0
Hi,

We have mobile application, which is developed using  ionic one, CoffeeScript and angular one. When we build the application for the android and web, all images are showing correctly. But we build same application for IOS it not showing the images. Image path is correct and images is available inside of application bundle folder.

Also this application use cordova plugin file for the file management. All the images are getting from IOS application bundle.

When we build for IOS there is no errors or warnings.
screen-1.JPG
screen-2.JPG
0

Angular

642

Solutions

420

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
>