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
Exploring SharePoint 2016
LVL 12
Exploring SharePoint 2016

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

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
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
For any new Product development which technology is best - Angular / MVC Core / React ?
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
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
Learn Ruby Fundamentals
LVL 12
Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

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 implementing google map in Angular 5 using npm library googlemaps.
When trying to show route/path between 2 points using setDirections(),I am unable to see the path.The 2 points are shown but no route is drawn and there is even no error in console.
Following is the code use 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);
 
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 google.maps.DirectionsRenderer().setDirections(response);
} else
   {
window.alert('Directions request 

Open in new window

0
I have a function in Angular JS as below

getAllCurrency(): Promise<any> {
	return this._httpService
		.get('/api/Order/GetCurrentCurrency')
		.toPromise()
		.then(result => {
			debugger;
			return result;
		})
		.catch(this.handleError);
}

Open in new window


When this function called it gives below error

this._orderService.getAllCurrency().then(result => {
            if (result != null) {
                this.allCurrencyPrice = result;
            }
        });

Open in new window



vendor.944c2d2d1376bd2e8849.bundle.js:1 ERROR Error: Uncaught (in promise): Http failure response for https://example.com/api/Order/GetCurrentCurrency: 503 OK
    at c (polyfills.7ca9766913fb3444ee06.bundle.js:1)
    at c (polyfills.7ca9766913fb3444ee06.bundle.js:1)
    at polyfills.7ca9766913fb3444ee06.bundle.js:1
    at t.invokeTask (polyfills.7ca9766913fb3444ee06.bundle.js:1)
    at Object.onInvokeTask (vendor.944c2d2d1376bd2e8849.bundle.js:1)
    at t.invokeTask (polyfills.7ca9766913fb3444ee06.bundle.js:1)
    at r.runTask (polyfills.7ca9766913fb3444ee06.bundle.js:1)
    at o (polyfills.7ca9766913fb3444ee06.bundle.js:1)
    at e.invokeTask [as invoke] (polyfills.7ca9766913fb3444ee06.bundle.js:1)
    at h (polyfills.7ca9766913fb3444ee06.bundle.js:1)
b @ vendor.944c2d2d1376bd2e8849.bundle.js:1
/api/Balance/GetPendingWithdrawal/BTC:1 Failed to load resource: the server responded with a status of 503 ()
main.1d1978b4ff1814cc159f.bundle.js:1 

Open in new window


What can be the reason behind this?
0
one thing I want you to share your thoughts on how we can go ahead with the rebuilding of a website. What are the things according to you should be implemented on the website?
we would like to rebuilding of this site using  Angular 4 and Laravel 5
0
how to work with angular 4 for single page application with clear explanation
0
How to Authentication parameters [user,password] to SSRS reports  while calling from Angular4 Application  to avoid prompt for username and password at runtime.
0
I want to use new angulat material table to show my produkt data. I was unsing old table perfectly but can not adopt to new angular material table.

I am getting my data in this.produkts array which i want to render in new angular material table. I used to render that in old table.

Can someone please tell me how to render my data in new angular table?

Component.ts

getPage(page: number) {
    if (this.produktCache.has(page)) {
      this.produkts = this.produktCache.get(page);
      this.currentPage = page;
    } else {
      this.produktService.getProduktSearch(page.toString(), this.produktsPerPage.toString(), this.filiale, this.artnr, this.produktbez,
        this.werbetext, this.mgeht, this.lfname, this.hinweise, this.bildnummer)
        .then(
          data => {
            this.produkts = data;
            console.log('array', this.produkts);
            this.currentPage = page;
            this.produktCache.set(this.currentPage, this.produkts);
          }).catch(
            (error: any) => {
              console.log('Produkt not found!');
            });
    }
  }

Open in new window


pervious table:

<mat-card>
  <table class="product-list" *ngIf="produkts">
    <thead>
      <tr>
        <th>{{ 'Artikle Nummer' }}</th>
        <th>{{ 'Filiale' }}</th>
        <th>{{ 'Bezeichnung' }}</th>
        <th>{{ 'Mehr Info' }} </th>
      </tr>
    </thead>
    <tbody>
      <tr [routerLink]="['/rullko/produkt/', product.Bildnummer]" *ngFor="let product of produkts | paginate: { id: 'server', itemsPerPage: produktsPerPage, currentPage: currentPage }">
        <td> {{ product.ARTNR }} </td>
        <td> {{ product.FILIALE }}</td>
        <td> {{ product.PRODUKTBEZ }} </td>
        <td>
          <button mat-icon-button color="primary" [routerLink]="['/rullko/produkt/', product.Bildnummer]">
            <mat-icon>more_vert</mat-icon>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <app-pagination (pageChange)="getPage($event)"></app-pagination>
  <mat-card-actions align="end">
    <button mat-raised-button color="warn" [routerLink]="['/rullko/produkt']">
      <mat-icon>clear</mat-icon>CANCEL</button>
  </mat-card-actions>
</mat-card>

Open in new window


New table:
<table mat-table [dataSource]="this.produkts" class="mat-elevation-z8">
  <ng-container matColumnDef="artikle">
    <th mat-header-cell *matHeaderCellDef> ARTIKLE NO. </th>
    <td mat-cell *matCellDef="let user"> {{ this.produkts.ARTNR }}</td>
  </ng-container>
  <ng-container matColumnDef="filiale">
    <th mat-header-cell *matHeaderCellDef> FILIALE </th>
    <td mat-cell *matCellDef="let user"> </td>
  </ng-container>
  <ng-container matColumnDef="bezeichnung">
    <th mat-header-cell *matHeaderCellDef> BEZEICHNUNG </th>
    <td mat-cell *matCellDef="let user"> </td>
  </ng-container>
  <ng-container matColumnDef="details">
    <th mat-header-cell *matHeaderCellDef> DETAILS </th>
    <td mat-cell *matCellDef="let user"> </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
</table>

Open in new window

0
Fundamentals of JavaScript
LVL 12
Fundamentals of JavaScript

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

Hello Experts,

I am trying to use browser back button to go to a specific URL. I used PlatformLocation in Angular to detect the popstate event. When I press the back button to go to the URL, it shows the previous angular route for fraction of seconds and then redirects me to the URL. I would like to eliminate that fickle from back button. So, it directly goes to the desired URL, without going to the previous angular route.

Thanks in advance.
0
We are using upload tab in CKEditor in my Angular/Ionic 3 project. Currently, we are getting server not found error, So is there any steps required to upload an image in the server?
0
Hi I have been trying to write test cases for my registration service. It has a url which it sends 4 values. the service is as follows:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'



interface registerResponse {
  success: boolean,
  message: string
}

@Injectable()
export class AuthService {

private _regurl ="http://localhost:3000/api/register"
  constructor(private http: HttpClient) { }



  registerUser(username,email,date,  password) {
   
    return this.http.post<registerResponse>(this._regurl, {
      username,
      email,
      date,
      password
      
     
    })
  }

}

Open in new window


I am still learning how to write test cases, i m trying to get the registerResponse to work.

here is what i have written till now

import { TestBed, async, inject } from '@angular/core/testing';
import {
  HttpModule,
  Http,
  Response,
  ResponseOptions,
  XHRBackend
} from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { AuthService } from './auth.service';
import { HttpClient } from '@angular/common/http'


describe('RegisterService', () => {

  beforeEach(() => {

    TestBed.configureTestingModule({
      imports: [HttpModule],
      providers: [
        { provide: HttpClient, useValue: 'http://localhost:3000/api/register' },
        AuthService,
        { provide: XHRBackend, useClass: MockBackend },
      ]
    });
  });

Open in new window


I know its not much I hv only defined mockbackend but any help would be appriciated

Thank You
0
Hi,

My manager asked me updating a website from codeigniter to  
backend: API using PHP (Symfony) or node (expressjs) or Drupal 8 . or any other framework. can you give me explanations?

And for single page applications Angular 4 or Vue js
0
I have two separate application built mainly using angularjs and  laravel.

1) Front office
2) Back office

The authentication method is Laravel passport.

The problem I am encountering is when I login to both front and back office. Then when I logout from either the front or back office app both application get logout.

This is happening when I'm using  the same browser with multiple tabs.

Are there implementable solutions to the mentioned problem.

Your help is kindly appreciate.
0
I have a custom confirmation popup (Yes/No) which i call through angular typescript file (TS)

parentpage.ts

export class ManageConfigs implements OnInit,AfterViewInit  {
  @ViewChild('warning') warning: any;

    var retVal = this
                   .warning
                   .showWarningWithConfirmation("Are you sure you want to delete this?");
}

Open in new window

Based on button selection (yes/no) popup will return value true or false. That means retVal will be true/false.

But the issue is popup is rendering after calling the line.

var retVal = this
               .warning
               .showWarningWithConfirmation(
                  "Are you sure you want to ",
                  "delete region " +regionName + "?"
               );

Open in new window

popup.ts

public showWarningWithConfirmation(messageLine1,messageLine2): boolean {
  this.visible = true; 
  this.messageLine1 = messageLine1;
   this.messageLine2 = messageLine2;
  setTimeout(() => this.visibleAnimate = true, 100);  
  return this.retWarningValue;
}

Open in new window

popup.html

  <div class="container-fluid" id="main-content" (click)="this.visibleAnimate = false;this.visible = false" [@hideShowAnimator]="hideShowAnimator">
      <div class="custom-modal modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
          <div class="modal-dialog modal-sm" role="document">
          

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.