AngularJS

368

Solutions

3

Articles & Videos

253

Contributors

AngularJS is an 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–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. AngularJS is the frontend 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 have created a new angular project via angular-cli.

I now what to install jQuery but installing it via npm.

How can I do this?
0
Stressed Out?
Stressed Out?

Watch some penguins on the livecam!

createNewASLForm is the main FORM
AslAccount - is the formArray
From Mark up -
<div *ngIf="createNewASLForm.get('AslAccount').get('acctNumber').touched " class="alert alert-danger">
                    Please enter Acct Number
                  </div>

Tried another

<input class="form-control g-remove-margin-bottom" value="" type="text" formControlName="aslFormName" placeholder="ASL Form Name" name ="acctNumber" required>
<div *ngIf="createNewASLForm.controls.AslAccount.controls.['acctNumber'].hasError('required') && createNewASLForm.controls.AslAccount.controls.['acctNumber'].touched" class="alert alert-danger">
Please enter Acct Num
</div>

Also need to add an entry for 11 numerical vals only....
           



Same this works for standalone controls in the main form
 <input class="form-control g-remove-margin-bottom" value="" type="text" formControlName="aslFormName" placeholder="ASL Form Name" name ="aslFormName" required>
              <div *ngIf="createNewASLForm.controls['aslFormName'].hasError('required') && createNewASLForm.controls['aslFormName'].touched" class="alert alert-danger">Please enter ASL form name</div>



Any help or pointers is appreciated.


Tried this one too...
Used this one too in the markup
<input class="form-control g-remove-margin-bottom" value="" type="text" formControlName="myAcct"   required>
<div *ngIf="myForm.get('SomeAcct').get('myAcct').touched " class="alert alert-danger">Please enter Acct Number</div>…
0
I am following the tutorial from here: "http://itsolutionstuff.com/post/codeigniter-3-and-angularjs-crud-with-search-and-pagination-exampleexample.html"

I am getting these errors: errors
Where am i going wrong ? i have tried exhaustively to search for answer or hint but i am lost, i am obviously pretty new to codeigniter.
Here is link to github files that i downloaded for tutorial. I appreciate any help or suggestion. Thank You all.
0
Is this the right way of doing...this is about Angular2 - http observables...
first use a .post and then do .get response of the same form data that was posted....

using a data API here - such as a converted http url to a privately named dataAPI

addFormData(formInput: FormInputs): Observable<FormInputs> {
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');

  let sub = this.http.post(this.dataAPI, JSON.stringify(formInput), {headers: headers}).map(response => response.json()) ;

  sub.subscribe( (aData) => {console.log(aData); }, (err)=> console.log(err),  ()=>{ console.log("Done")} );

  return sub;
0
I am using Bootstrap 3 in my Angular 4 app to create a form. In the form, I need to render checkboxes on the basis of data returned from a web service call. So, I need to iterate over the data and render a checkbox for every value received.

The display for these checkboxes is bit messed up as in the screenshot below -
Current state
Is there a way to display these checkboxes in 3 columns. Something like this (looks much cleaner) Target state
My current code is as below


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <form [formGroup]="myForm">

        <div class="row">
          ...
        </div>
        <div class="row">
          ...
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="form-group">
              <label for="options" class="col-xs-4">Options</label>
              <div class="checkbox"  formGroupName="options" *ngFor="let option of options">
               <div class="col-xs-4">
                <input id="{{option}}" formControlName="{{option}}" type="checkbox" 
                         [checked]=false> {{option}}
               </div>
              </div>
            </div>
          </div>
          <div class="col-xs-4">
            <div class="form-group">
              <label for="name" class="col-xs-4">Name</label>
              <div class="col-xs-8">
                <input type="text" id="name" formControlName="name" 

Open in new window

0
I am attempting to apply form validation using bootstrap validator plug-in but I don't see results. Here is the code:

<div>
	<div class="modal-header">
		<h4 class="modal-title">Add Employee</h4>
	</div>
	<div class="modal-body">
		<table class="table table-responsive table-hover table-condensed">
			<div class="form-group margin-bottom">
				<label for="name" class="col-sm-2 control-label">Name</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" data-error="Please enter name field." id="name" ng-model="employee.name" required />
                                       <div class="help-block with-errors"></div>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="age" class="col-sm-2 control-label">Age</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="age" ng-model="employee.age">
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="gender" class="col-sm-2 control-label">Gender</label>
				<div class="col-sm-10">
					<select class="form-control" type="text" name="gender" id="gender" ng-model="employee.gender">                    
						<option>male</option>
						<option>female</option>
					</select>
				</div>
			</div>
			<div class="form-group margin-bottom">
				<label for="company" class="col-sm-2 control-label">Company</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="company" ng-model="employee.company">
				

Open in new window

0
I am using keno ui grid for angularjs keno grid in our project and am  new to kendo . I am getting data from API similar to below JSON Data and need to bind this data to Kenod Grid basically there will be no header fields / columns .Just simply bind data to grid.

JSON Data (json data viewer

["cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6",
 "cell1  cell2 cell3 cell4 cell5 cell6"
]

It would be great if anyone can provide sample example  in plunker/jsfiddle.

Thanks in advance
0
I am learning Angular, Node, npm, deployd, mongodb, etc.  I am making my way through a book titled "Pro AngularJS" by Adam Freeman.

on page 120 I am attempting to prepare the data for a "real world" application called "sportsstore".

I was instructed to install a module called "deployd" which apparently is used for modelling  API's for web applications.

I did that and when I try to start start the "deployd" service I get an error:

C:\PROGRA~2\deployd>dpd -p 5500 sportsstore\app.dpd --mongod
starting deployd v0.8.9...
internal/child_process.js:289
  var err = this._handle.spawn(options);
                         ^

TypeError: Bad argument
    at TypeError (native)
    at ChildProcess.spawn (internal/child_process.js:289:26)
    at exports.spawn (child_process.js:380:9)
    at Object.exports.restart (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\lib\util\mongod.js:38:14)
    at Command.start (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\bin\dpd:149:16)
    at Command.listener (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\node_modules\commander\index.js:301:8)
    at emitOne (events.js:96:13)
    at Command.emit (events.js:188:7)
    at Command.parseArgs (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\node_modules\commander\index.js:617:12)
    at Command.parse (C:\Users\knowlton\AppData\Roaming\npm\node_modules\deployd\node_modules\commander\index.js:458:21)
    at Object.<anonymous> 

Open in new window

0
I am trying to call REST services deployed on Tomcat 8 from Angular 4. Since both these are running on separate domains, CORS issue is expected. So, in the tomcat/conf/web.xml, I have added the below filter
<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Authorization,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping> 

Open in new window


This is how I am sending the GET request from Angular
var basicOptions:RequestOptionsArgs = {
  url: 'http://server3:7000/myrest/info',
  method: RequestMethod.Get,
  search: null,
  headers: new Headers(
    {'Authorization': 'Basic AG1hZG1pbjpkZW1vLmRlbW8=' },
    ),
  body: null
};

basicOptions.headers.append('Content-Type', 'application/json');

var reqOptions = new RequestOptions(basicOptions);
var req = new Request(reqOptions);
return this.http.request( req );

Open in new window


Since, I am sending the Authorization header, it is also added in the 'cors.allowed.headers' param in Tomcat.

When I call the REST service from Chrome, it always gives me a 'Invalid CORS request' error (Network tab -> Preview). Below is the error in browser console
XMLHttpRequest cannot load http://server3:7000/myrest/info. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

Open in new window

Is there something else that I need to do to make it work?
0
I am exporting a table using pdfmake
The table exports, but there is one item that is 'undefined'.  

I have a main page with multiple tabs and once you hit the 'Printer Friendly' btn, a pdf report opens in a new tab for the specific tab you selected.  The 'printer friendly' btn is what exports the page.  

This code broadcasts  the print function to produce the pdf report depending on what tab you are on.
$scope.printDiv = function(divName) {		
		$rootScope.$broadcast('print');		
	}
	

Open in new window


and the button
<button ng-click="printDiv('rollup-tab')">Printer Friendly</button>

Open in new window



Here is the rest of the code.

Table creation and exports the pdf pdf
$scope.$on('print', function(event, filter) {
			var docDefinition = {

					content: [	
					          {
						  table: {

					              body: [                   			                
					                [ 
					                  '',
					                  'Actual Pieces Issued',
					                  {text: $filter('mcGoalNumberFilter')($scope.actualPiecesMCGoal) + ' /wk'},			                  
					                  {text: $scope.actualPiecesMon, style: 'tableData'},
					                  {text: $scope.actualPiecesTues, style: 'tableData'},
					                  {text: $scope.actualPiecesWed, style: 'tableData'},
					                  {text: $scope.actualPiecesThurs, style: 'tableData'},
					                  {text: $scope.actualPiecesFri, style: 

Open in new window

0
Is Your DevOps Pipeline Leaking?
Is Your DevOps Pipeline Leaking?

Is your CI/CD pipeline a hodge-podge of randomly connected tools? You’ve likely got a tool to fix one problem & then a different tool to fix another, resulting in a cluster of tools with overlapping functionality. Learn how to optimize your pipeline with Gartner's recommendations

Need help/attn on this issue here...

Here's my plunker link

http://plnkr.co/edit/Ycd90hYHTnp9wbdeaaUC?p=preview

and code is also copied below....I'm unable to get the checkbox value - I'm getting an empty string.
I want to use a reactive form to do some validations and post all the form controls.

(I started with a template with 2 fields and started my building all fields with some validations and trying to get good hold of Angular2)

app.component.html
   <reactive-form></reactive-form>

Open in new window


app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

Open in new window


app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { ReactiveFormComponent } from './reactive/reactive-form.component';

@NgModule({
  declarations: [
    AppComponent,
    ReactiveFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open in new window

reactive-form.component.html
<form (ngSubmit)="processForm()" [formGroup]="form">
<div style="margin: 20px; width: 80%">

    <div class="form-group">
        <label 

Open in new window

0
Trying to post form data after adding a row using the push in the angular2/Typescript -

Here's my plunker...getting errors on the form post  - was trying to do a reactive form/model driven in angular2 -- here's my plunker...

http://plnkr.co/edit/2DdwZ0T2vzdqEN8AlCQI?p=preview 

...need some help if anyone can -- greatly appreciate...


Adding to that above - here's my submit code that I'm having problems...the landing is not even rendering on the localhost
So this form has to post the collected or added rows - I want to see its JSON now, I'll use an API from backend to post it finally.

 <form [formGroup]="tabData (ngSubmit)="onSubmit()">
<div class="container">
  <div class="col-md-12">
      
    <h1>Product List</h1>
      <table class="table table-bordered table-striped table-hover">
        <thead>
          <tr>
            <th class="text-center">ID</th>
            <th class="text-center">Name</th>
            <th class="text-center">Description</th>
            <th class="text-center">Price</th>
            <th class="text-center">&nbsp;</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor = "let product of products">
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.description}}</td>
            <td>{{product.price}}</td>
            <td>
                <button class="btn btn-info"
                        (click) ="showEditProductForm(product)">
                    <i 

Open in new window

0
<div class="input-controls">
     <div>
       <label>
        <input #female name="gender" type="radio" value="Female" (click)="gender=female.value"/>
        </label>
       </div>
      </div>

import {Component} from '@angular/core';
@Component({
    selector: 'input-controls',
    templateUrl: './components/input-controls/input-controls.html'
})
export class InputControls {
    gender:string;
}
0
I am using iFrame in my application's html, with ng-src="https://someOtherServer.co,/portal?token=theTokenID&language=en&embedded=true"
This iframe is not loading on IE bubt works in Chrome.

I have already tried adding:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
New Jquery library
but getting nowhere.

ANy help appreciated.

Thanks
0
I have two sharepoint lists that are identical structurally (only difference is data) now I want to be able to query both list and consolidated the returned values.
Very new at javascrit and Angular but I've attempted to just duplicate my first query and I seem to be getting output from both lists but cannot figure out how to consolidate into one.

see code below.

(function () {
  'use strict';

  angular
    .module('myApp.core')
    .controller('DefaultController', DefaultController);

  DefaultController.$inject = ["SharePointService"];

  function DefaultController(SharePointService) {

    var vm = this;






    vm.search = function () {


        SharePointService.getWithFilter('ExpectationsList1', "?$select=Id,DocTitle,ParaNum,SentText&$filter=substringof('" + vm.query + "', SentText) eq true").then(function (response1) {
 
                //vm.expectations = response1

                console.log(response1);

        });
        SharePointService.getWithFilter('ExpectationsList2', "?$select=Id,DocTitle,ParaNum,SentText&$filter=substringof('" + vm.query + "', SentText) eq true").then(function (response2) {

            //vm.expectations = response2


			console.log(response2)			

        });


        

    }


  }

})();

Open in new window

0
I have two distinct modules in an Angular app, a parent and a child. They both also have distinct default routing HTML pages. The Parent router has one basic router-outlet setup. However for the Child default route, I have a bootstrap side menu and another router-outlet.

When I go to the Child Module section, the side menu is appearing, however it looks like the Parent router-outlet is being utilized. I've searched for several hours for a resolution to this issue, but cannot find one. Each module (Parent and Child) has their own routing files and modules. And each module file has a distinct reference to a specific HTML initial routing page.

I'm sure this is something simple and stupid (which these things usually are), but any help would be appreciated. The angular.io documentation is so bad that finding anything that falls outside the realm of the 'Hero' demo is a waste of time.

Thanks!
0
I am populating a table by adding first column as radio button. Want to select first row radio button as default and fire the radio button event ng-click.

            
<div class="col-5-md col-lg-8">
            <div class="well well-sm">
                <table id="eventsTable" st-safe-src="vm.AllEmployees" st-table="displayCollection" class="table table-striped">
                    <thead>
                        <tr>
                            <th> </th>
							<th st-sort="EMPLOYEE_ID">EMPLOYEE ID</th>
                            <th st-sort="EMPLOYEE_NAME">EMPLOYEE NAME</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr st-select-row="row" ng-repeat="row in displayCollection">
                            <td><input type="radio" value="false" name="eventsRadio" ng-click="vm.onEventSelection(row)" /></td>
                            <td>{{::row.EMPLOYEE_ID}}</td>
                            <td>{{::row.EMPLOYEE_NAME}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

Open in new window


Thanks for your help in advance.
0
calling above using in Angular as:

 function Login(email, password, callback)  
 {  
        var GetAll = new Object();  
        GetAll.email = email;   
        GetAll.password = email;  
        $http({  
            url: "http://localhost:52587/api/TokenAuth/Login",  
            dataType: 'json',  
            method: 'post',  
            data: JSON.stringify(GetAll),       
            headers: {
                      'Content-Type': 'application/json'
                      }      
         }) 
      .then(function loginSuccessCallback(response)
 {...

Open in new window

I've tested this using swagger and ajax which worked fine. I set it up with json object in the body (set to raw and JSON (application/json)).

I have written the following Web API:

namespace WEBAPI.Controllers  
{   
    public class user  
    {   
        public string email { get; set; }   
        public string password { get; set; }  
    }

 [Produces("application/json")]   
 [Route("api/[controller]")]       
 public class TokenAuthController : Controller    
 {

  [HttpPost("Login")]    
  public async Task`<IActionResult>` Login([FromBody]user usr)   
{   
..................               
..................             
}      
}         
}

Open in new window

But I am getting [FromBody ] 415 unsupported media type. Please help me.
Anyone see where I'm going wrong?
0
We have a web page built using angularJS where we are showing the videos of the uploaded videos using JWPlayer,

but When the web page is loaded, the JWPlayer doesn't load the video instead it shows half the width of the actual video width and when the play button is clicked, video is not played instead video starts to download.

This behavior is seen across different browsers, across different systems. However, on certain systems it is playing fine. Also, on certain systems it is playing fine in Chrome but not playing on firefox. The browser setting across the browsers on different systems is the same.

When the element is inspected, different HTML tag is shown for browsers where it is not working and a different HTML is shown for browser where it is working.

For half width player (not working): The 'a' tag is shown with the with href path where the content gets downloaded when clicked on play.(half-image.png)
For full width player (working): The video is wrapped in div container with default player embedded in it and content is played when clicked on play.(full-image.jpg)

After updating the browser and re-logging in, the JWPlayer loads the video with full width in some cases.

versions used:
jwplayer : 0.2.1
ng-jwplayer : 5.9.2118
half-image.png
full-image.jpg
0
Get 15 Days FREE Full-Featured Trial
LVL 1
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

I am exporting a table as a pdf using the pdfmake library.  (http://pdfmake.org/#/gettingstarted)
This is accomplished correctly when I select one specific route and one table is successfully exported.  However, when I select 'All' within the Route filter, multiple tables appear in the main page and I want to export all those tables as one pdf when a user selects 'Route: All'.

I have several tabs created for my page each of which contains their own table data.  

There is a print btn in the html, which also contains the creation of the tabs as well as the btn
<button ng-click="printDiv('rollup-tab')">Printer Friendly</button>

Open in new window


Within the js, this broadcasts to the tab you are currently on and is called
$scope.printDiv = function(divName) {
		//BROADCAST TO EACH TAB
		$rootScope.$broadcast('print');	
		
	}

Open in new window


Within the lcp.js file (lcp tab), it makes a call to the broadcast, which exports the table as a pdf.
$scope.$on('print', function(event, filter) {

			var docDefinition = {
					info: {
					    title: 'LCP'
					    
					  },
					content: [
					          
							{
							    margin: [0, -40, 0, 30],	 	
								image: 'data:image/png;base64,iVBORw0KGgo......'
								width: 200,
								height: 58,
								style: 'centerImage',

							  },					  
					         
					         {
						        	  fontSize: 9,
								       margin: [0,-30, 0, 10],
								       
									  table: {
										  headerRows: 1,
										  

Open in new window

0
After upgrading to node.js 7.5.0, I encountered this error too:  Loading "grunt-karma.js" tasks...ERROR >> TypeError: Cannot read property 'prototype' of undefined
0
how to send the combined parameters of both sorting and paging to add back end query
0
Dear experts here, I am learning angular 2 these days. When I tied to run "npm install" on an angular 2 application for displaying a slider document, it threw me into an error about python. I have two versions of python installed, how could I set up %PYTHON% PARAMETER?

THANKS.


C:\angular-training-slides\slides\node_modules\bufferutil>if not defined npm_config_node_gyp (node "C:\Users\jyu\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "C:UsersjyuAppDataLocalProgramsPythonPython35python.EXE", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Users\jyu\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:454:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Users\jyu\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:480:16)
gyp ERR! stack     at C:\Users\jyu\AppData\Roaming\npm\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:114:15)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\jyu\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\angular-training-slides\slides\node_modules\bufferutil
gyp ERR! node -v v7.7.4
gyp ERR! node-gyp -v 

Open in new window

0
I want to use D3 and dagre-d3 libraries in my Angular2 project. The project has been created using Angular2 CLI.

To integrate D3 with Angular2, I did the following from command prompt -

npm install d3 --save
npm install @types/d3 --save-dev

Open in new window


then in my component

import * as d3 from 'd3';
 ngOnInit() {
    d3.select("body").append("span")
      .text("Hello world!");
  

Open in new window


this displayed the "Hello world!" text on the page, so that means d3 is correctly configured.

Now, in order to configure dagre-d3 [https://github.com/cpettitt/dagre-d3/wiki#npm-install], I did the following

npm install dagre-d3 --save

Open in new window


in angular-cli.json, I added dagre-d3 reference in the scripts array


 
"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/dagre-d3/dist/dagre-d3.js"

      ],

Open in new window


then I installed dagre-d3 types

npm install @types/dagre-d3 --save

Open in new window


Now in the Angular2 component, I have done the following to test the integration with dagre-d3


import * as d3 from 'd3';
import * as dagreD3 from 'dagre-d3';

ngOnInit() {
    d3.select("body").append("span")
      .text("Hello, world!");

    var g = new dagreD3.graphlib.Graph();  
}

Open in new window


This gives me an error in Browser console

Console error
how can I have dagre-d3 work with angular2? Am I missing a step?
0
HI

I want to calculate distance is within the range of 1.0 km.
Iam using google distanematrix to get the distance in km to the place, and its working fine.

function returns a string, witch looks like f.eks:
- "0.9 km"
- "6.9 km"

I want to calculate so that distance is within the range of 1.0 km and not higher, but lower is ok...
But some times i also get distance in meter when iam close to the place, f.eks:
"14 m"
"20 m"

So how can i calculate correct distance if i get distance in double string value or as an int value?

Here is my if statement where iam checking the returned distance in km is lower then "1.0 km"
var dist = str.split(" "); //Split so i can only get the value and not the string "km"
if (Math.round(dist[0] * 100) <= Math.round('1.0' * 100)) {
                         alert('you are in the range')
                        }
else{
alert('you are to far away')
}

Open in new window





iam not getting the correct result with the code above, any suggestion for how i can calculate the correct way will be really appriciated...

Thanks in advance
0

AngularJS

368

Solutions

3

Articles & Videos

253

Contributors

AngularJS is an 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–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. AngularJS is the frontend part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.