Angular

580

Solutions

389

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

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
Python 3 Fundamentals
LVL 12
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

Explain how TypeScript fits into Angular?

I coded Angular 4 and am pretty sure I used TypeScript. But, I can not recall exactly where.

Please refresh my memory.

Thanks
0
Advantages of Tensorflow.JS?

What are the benefits of using Tensorflow.JS in comparison to other Javascript frameworks?

Does it transpile like Angular?

What other frameworks are similar?

Is there any benefit to using Tensorflow.JS with a .NET back-end?

Thanks
0
I want to create a form that collects a persons email address and then a dynamic list of check boxes. (The dynamic part will come from a DB query, but for purposes of this question, I am providing a sample scope array.

What I need help with is how to set up the ng-repeat to allow for that dynamic list to be made available as a set of post vals upon submit.  The following is a modified piece of the code for demo purposes.

Here is the key portion of my Angular Code:

$scope.seminars = [
    { id: 1, name: 'Seminar One' },
    { id: 2, name: 'Seminar Two' },
    { id: 3, name: 'Seminar Three' },
    { id: 4, name: 'Seminar Four' }
  ];

$scope.submitFm = function (data) {
	console.log("Arrival at submit for checkboxes");
	console.log(data);
};	

Open in new window


And here is the HTML Code. I am creating a form that the attendee fills out to select which seminars they want to attend.  The first field of the form is email. The second field is a check field that I've created.  The third is my attempt at an ng-repeat to get the list of selected seminars.

<form id="attnFm" name="attnFm" class="form" ng-if="!msg">
       <input type="hidden" ng-model="attn.post_actions" ng-init="attn.post_actions='matm_attend'"/>
       <div class="row">
		 <label class="sr-only" for="email">email</label>
		 <input type="email" class="form-control" id="email"
                                         placeholder=" Email" 
                                         

Open in new window

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
Why am I stuck on this?! can't be that hard.

1. You can see the sample code here https://drive.google.com/open?id=1Z4CJc4mjOLZ8O8rCV3aqF2zaxrY3ZddA
Download and please just click on page.html

2.  You see the third filter.  You can click on "Add" and dynamically add rows.
f1.png
3. The third filter can be a text box or a dropdown.

4. I want to get the values of that third filter (dropdown or textbox), in order. The name is "FilterValues" and "camillatest" for the dropdown select.

5. I tried this and you can see it in Reporting.js but didn't work. I'll keep working on it and if I figure it out, I'll post back. So, I want to get value of textbox or the dropdown. Whatever the user has in the third filter.

var holdValues = []; //loop thru and add to this array

	$('.portfolio').each(function (index) {

		var val = $('#portfoliothirdfilter', this).find('select[name="camillatest"]').val()
		alert(val)
		var val2 = $('select[name="camillatest"]', this).val();
		alert(val2)
	});

Open in new window

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
Unable to install Angular on mac I got this error:
npm ERR! path /usr/local/bin/ng
npm ERR! code EEXIST
npm ERR! Refusing to delete /usr/local/bin/ng: ../lib/node_modules/angular-cli/bin/ng symlink target is not controlled by npm /usr/local/lib/node_modules/@angular/cli
npm ERR! File exists: /usr/local/bin/ng
npm ERR! Move it away, and try again.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/saudalsahli/.npm/_logs/2018-09-02T09_31_09_443Z-debug.log
sauds-MacBook-Pro:~ saudalsahli$ sudo npm install -g @angular/cli
npm ERR! path /usr/local/bin/ng
npm ERR! code EEXIST
npm ERR! Refusing to delete /usr/local/bin/ng: ../lib/node_modules/angular-cli/bin/ng symlink target is not controlled by npm /usr/local/lib/node_modules/@angular/cli
npm ERR! File exists: /usr/local/bin/ng
npm ERR! Move it away, and try again.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/saudalsahli/.npm/_logs/2018-09-02T09_33_27_509Z-debug.log
0
Exploring SQL Server 2016: Fundamentals
LVL 12
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.

For any new Product development which technology is best - Angular / MVC Core / React ?
0
I have one last problem with this code....

1. You can see the code here https://drive.google.com/open?id=1uZAdMSnw0QrfjJbhijqeDu2NQTk5wFi4
click on page.html

2.  Page loads and you see the radiobutton checked
r1.png
3. Click on Add and another row is added but now, the first radiobutton is unchecked.
r2.png
4. I checked the "id" and "name" and they're unique. Not sure why this is happening. I'll continue working on it. If I figure it out, I'll post back.
0
This can't be that hard but I spent all day on it and still can't get this right.

I really , seriously, know I should create a JSFiddle but I have the code here. I promise I'll learn how to do JSFiddle :)

Julian and LeakIM helped me with this...

1. Code is here. Click on page.html
https://drive.google.com/file/d/16gxJi-mbi3q4o19Y7HTmw4pWMUkasN2h/view

2. Choose, for example, "Once" from the dropdown. You see "CSV" is selected. It has "checked"
r1.png
3. Now, I choose "Excel". I click "Update". But, it doesn't get "checked". It's always "CSV" that's selected. This causes "CSV" selection to be always saved in the database.
r2.png
4. You can add more items by clicking "Add Report Delivery"

5. I did this to loop thru all the checkboxes. It looks like I get the correct radiobutton selected. But, how can I say
Schedules[' + i + '].IsExcelExport is selected and set it to true. I need the property "ISExcelExport" to to be set to true or false for radio1 and radio2

I have this. You can see it in Reporting.js
$('.schedule', '#scheduleArea').each(function (i, e) {

		console.log(i)

		console.log($('#reportBuilder .radio1:checked').val());
		console.log($('#reportBuilder .radio1:checked'));

		console.log($('#reportBuilder .radio2:checked').val());
		console.log($('#reportBuilder .radio2:checked'));

		$(e).find('.radio2')[0].name = 'Schedules[' + i + '].IsExcelExport';
		var r = 

Open in new window

0


I have so for been updating the data. Now when some lecturer writes say, completed in the comments section and checks completed radio button. Now next time when the same teacher checks it then it must show that the sub/chap has been completed. So how to do that in angularjs and php? Any help would be appreciated. Please do help me i am stuck.
0
Julian and LeakIM helped me with this. It works fine in Chrome and Edge but not in IE11.

1. You can get the code from here. Just click on page.html . Corresponding js file is Reporting.js
https://drive.google.com/open?id=1wq6DY6x2VJAeTKAtMV5U1SeYSiCuxPlI

2. I have this version of IE
i1.png
I'll go step by step

3. In Chrome or Edge; page loads and you see one row
p1.png
4. Click on "Add" and for example, add 4 rows
p2.png
5. Click Update and you see a pop-up showing 4. This is correct. I have js code in Reporting.JS
p3.png
Now in IE 11

1. Open page.html in IE. If you see the "blocked" message, click on it to see the first row
p4.png
2.  Add 4 rows and click Update. The popup shows and it shows 5 rows. This isn't correct
p5.png
3. Delete the rows and only have one. Click update and the popup has 2. Add 2 more rows and popup has 4. This isn't correct and my update to the database is messed up.
p6.png
4. Another example in my real code. I added and removed and even tho I have 2 rows, it shows 4

p7.png
I wanted to debug in IE but the screen freezes. That's why I added the alert messages. Reporting.js has more code that's not related to this example but I provided it just in case something in the rest of the code is messing this up in IE.

Edit - I just
0
I hope someone can help me with this. I spent too much time replacing what we had with jQuery Select2 and now I've been told that some users use IE 11

I'm using Select2 jQuery plugin https://select2.org/

1. You can get the code from here. Just click on page.html
https://drive.google.com/open?id=1HCYWerja1MTgMNLeUjkNygmQcuYneOg7

2. In Chrome and Edge, you can type whatever in the Select2 box and press enter and it takes it.

3. Now, open page.html in IE11.
 a. This is the IE version we have
i1.png
b. You might get a message at the bottom that content is blocked. Click it to unblock it.
i2.png
c. You see the Select2 textbox
i3.png
Now, in IE, you can't just type anything. It looks like it allows 2 characters. It's like something is stopping it from typing in it and pressing enter and taking what the user typed in.
I tried to capture it and you can see it here  https://drive.google.com/open?id=1r4YlU64Gtvcw-AGurBmUHEcOiCPAlgTx

If this is not fixable, I'll change the code to whatever the previous developer had...he had a regular textbox and user had to separate their entries by comma. I don't like this, tho.
0
How do I separate this "tue-09:00 AM-10:00 AM" in the format Start Time: 9:00 AM End Time: 10.00AM using angularjs?
I have table in which the day and time is getting stored in this ("tue-09:00 AM-10:00 AM" ) format, when I have to view the data I want it to be in the above format.
How can it be done?
0
I'm using visual studio code version 1.26.1 for angular projects. Right now I'm using source control GIT. But I would like to change this to Team Foundation Server.
So that I have installed the Visual Studio Team Services. Once after that, I have done the following things.

Open File -> Preferences -> Settings

Add the following lines to your user settings
{
  "tfvc.location": "C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Enterprise\\Common7\\IDE\\CommonExtensions\\Microsoft\\TeamFoundation\\Team Explorer\\tf.exe",
    "tfvc.restrictWorkspace": true
}

Open a local folder (repository), From View -> Command Pallette ..., type team signin

when I select the sign in from command palette I got the following error

"(team) No Team Services or Team Foundation Server repository configuration was found. Ensure you've opened a folder that contains a repository.

Please let me know how to set up the Team Foundation Server repository. Do I need to uninstall the GIT for use the TFS? Please let me know?
0
I am using Angular 6 and tried to hide sidenav bar in Login component. Once user logins, he can see navigation bar. (I have created fake backend for this project as this is just a prototype for my project.)

My problem is, I have to refresh to get sidenav bar on app component.

Can someone help me to solve this?

App.component.ts

export class AppComponent implements OnInit, OnDestroy {

  // Translate: Defining Supported Languages
  supportedLangs = [
    { active: false, display: 'EN', value: 'en' },
    { active: true, display: 'DE', value: 'de' },
  ];

  isOpen = false;
  loggedIn: boolean;
  username: string;
  mobileQuery: MediaQueryList;

  // defines if the sidenav should be opened. True in wide screen, false on mobile
  opened = true;
  // can be side or over, for resp wide screen and mobile
  over = 'side';

  watcher: Subscription;

  constructor(private media: ObservableMedia,
    private authenticationService: AuthenticationService,
    private router: Router,
    private sidebarService: SideBarService,
    private translate: TranslateService) {
    this.watcher = media.subscribe((change: MediaChange) => {
      // this language will be used as a fallback when a translation isn't found in the current language
      translate.setDefaultLang('en');
      translate.use('en');
      if (change.mqAlias === 'sm' || change.mqAlias === 'xs') {
        // mobile
        this.opened = false;
        this.over = 'over';
      } else {
        // wide screen
 

Open in new window

0
Rowby Goren Makes an Impact on Screen and Online
LVL 12
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

Disable client-side caching in all browser. We are using Angualrjs.
For disabling the cache, I used HTML meta tags:-
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="EXPIRES" content="0">
    <meta http-equiv="PRAGMA" content="NO-CACHE">
but need a best solution
i.e.: http://www.i18nguy.com/markup/metatags.html
0
Hi, I am using Kendo Grid in UI using angular. I am executing a dynamic query which returns data; it displays data but the columns are not with proper width. Below is the code I use:

 vm.BindUserData = function (gridData) {
            $("#gridUserQueryResults").kendoGrid({
                dataSource: {
                    data: gridData,
                    pageSize: 50
                }
                , resizable: true
                , height: (vm.Dimensions.height * .65)
                , scrollable: true
                , reorderable: true
                , pageable: {
                    buttonCount: 10,
                    previousNext: true,
                    input: false,
                    pageSizes: [10, 15, 25, 50, 100, 500]
                }
                , columns: vm.GridColumns
                , sortable: {
                    mode: "single",
                    allowUnsort: true
                }
                , filterable: {
                    extra: false,
                    operators: {
                        string: {
                            startswith: "Starts with",
                            eq: "Is equal to",
                            neq: "Is not equal to",
                            contains: "Contains",
                            endswith: "Ends with"
                        }
                    }
                }
            });


        };

where gridData is DataTable returned from …
0
exported pdf
I am tried to export pdf UI grid data along with multiple line title and image logo. its setting only first three line as title line even there was more than 3 line in code.
exported pdf file has been attached and wan  to set logo yellow mark position on pdf.
Could you please help me? Thanks in advance


vm.gridOptions = {
                enableFiltering : true,
                enableGridMenu : true,
                onRegisterApi : function(gridApi) {
                    $scope.gridApi = gridApi;
                },

                exporterCsvFilename : 'myfile.csv',

                  exporterPdfHeader: {
                        text: [
                            'line 1',
                            {text: 'hello altruist\nplease \nhelp me'},
                            'end of line 1\n',
                            'Second line \n',
                            'Third line\n',
                            'fghfhgf line\n',
                            'Third line'
                        ], style: 'headerStyle'
                    },

                    exporterPdfFooter: function ( currentPage, pageCount ) {
                          return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
                        },
                        exporterPdfCustomFormatter: function ( docDefinition ) {
                            docDefinition.styles.headerStyle = { fontSize: 10, bold: …
0
I am having trouble jumping to a hashTag using RouterLink.

So this is my parent component.html
<div class="col-sm-12 text-lg-left">
            <app-enclosures #enclosure [notes]="objectRoot?.parent[0]?.notes?.notes" [files]="objectRoot?.parent?.files.files"
              [description]="description">
            </app-enclosures>

          </div>
        <div id="displayContent">
          <br>
          <app-display-content></app-display-content>
         </div>

Open in new window


now I am doing following under enclosure.html
<td class="text-small">
                <a routerLink="../enclosures" fragment="displayContent" *ngFor="let encl of general" (click)="onClick(encl)">{{encl}}&nbsp;&nbsp;</a>
          </td>

Open in new window


however, when I click on the 'encl' I am expecting it to take me to parent.component's '#displayContent' hashtag.

But doesn't look like it is happening.
0
I have a .net solution, with few projects. one of them is web site which is an angular project with an asp.net web api project as a backend.

when I compile the solution or when i try to build just the asp.net website , i get the following error. I have looked through the csproj file for all the projects , but can't find reference
to the following in any projects.

I googled it but didn't find anything helpful yet.

has anybody run into similar issue?

The CodeDom provider type "Microsoft.VisualC.CppCodeProvider, CppCodeProvider, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" could not be located.
0
I am implementing google map in Angular 5 using npm library googlemaps.
 
When trying to show route/path between 2 points using setDirections().The 2 points are shown but no route is drawn and getting "Directions request failed due to OVER_QUERY_LIMIT". I am unable to see the path
 
Following is the code used for showing route:
 
 
var mapProp = {
center: new google.maps.LatLng(22.0824, 82.1411),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
this.directionsDisplay.setMap(this.map);
this.marker1 = new google.maps.Marker({
map: this.map,
draggable: true,
position: { lat: 22.0717, lng: 82.1497 }
});
this.marker2 = new google.maps.Marker({
map: this.map,
draggable: true,
position: { lat: 22.0942, lng: 82.1257 }
});
google.maps.event.addListener(this.marker1, 'position_changed', this.update);
google.maps.event.addListener(this.marker2, 'position_changed', this.update);
this.lat1 = 22.0717;
this.lang1 = 82.1497;
this.lat2 = 22.0942;
this.lang2 = 82.1257;
this.Source = new google.maps.LatLng(this.lat1, this.lang1);
this.Destination = new google.maps.LatLng(this.lat2, this.lang2);
this.calculateAndDisplayRoute(this.directionsService, this.directionsDisplay);
var request = {
origin: this.Source,
destination: this.Destination,
travelMode: google.maps.TravelMode.DRIVING
}
this.directionsService.route(request, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
new 

Open in new window

0

Angular

580

Solutions

389

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.