Angular

469

Solutions

310

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

Hello - I am playing with an input box with typeahead/completer style functionality in Angular 2+. Its been set up so that a user starts typing...the completer suggests items based on what is being entered...and the user clicks on the selection they want.

What they have selected from the completer drives what is displayed in a table. All that is working fine.

What I am not sure how to do is...if the item they select should have multiple rows in the table...lets say if the completer is searching a list of customers to display orders...but the customer they select has multiple orders.

*ngFor is not working for me...because I get an error telling me it can only be used with an array.

The way things are set up with the completer...i have this code in the component.ts file setting the selected item. It looks in a users array, and sets the item selected to selectedUser.

   protected onCompleterSelect(item: CompleterItem) {
   console.log(item)
   if (item && item.originalObject) {
     console.log(this.users.find(user => user.ID === item.originalObject.ID))
     this.selectedUser = this.users.find(user => user.ID === item.originalObject.ID) ;
    
  }

}

Open in new window


Then in my html file the table is being built based on the selected user.

<table class="table">


   <th rowspan="1" colspan="4" >
     PERSONAL INFORMATION

   </th>
   <tr>
     <td>ID</td><td>{{selectedUser && selectedUser.ID || " " }}</td>
     <td>Name</td><td>{{selectedUser && selectedUser.Name || " " }}</td>
     
   </tr>
  

   </table>

Open in new window



When i try to add an ng-container  with *ngFor...it complains the ngFor needs an array...which because the "selectedUser" is being set in the componet.ts file...where its looking through the array there and specifing the selectedUser based on what the user clicks on when using the completer. ...its not happy.

I have tried a handful of ways to use the *ngFor  ...but it does not work.

Some of the items I have tried are
<ng-container *ngFor="let selectedUser of users">

Open in new window


or
<ng-container *ngFor="let x of selectedUser">

Open in new window

0
Receive 1:1 tech help
LVL 11
Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Can anyone please help or guide me on setting up  Angular  CLI  with Jenkins? I am  setting up  a Development environment for a new  Project
0
Hi Experts:

I have a index.html file. I have an autocomplete function written in jQuery script. It appears an old design now. I want to port this design and implementation to a new design executed in angularJS.

The properties of my design is as soon as you click in Flying From and Flying to Box it will reset itself. As you type characters it will show matched destination.

For the new solution I want few popular destination as default choice on top. Or as soon as you click in the input box it should give you those options in the dropdown list of options.

Then the matched options as characters are printed. Code with few examples would be great help. In AngularJS apparently it can be very simply done. These input boxes can never be empty.

Look forward to your responses.

Best Regards

Sunnybrad

Open in new window

index.html
0
Hello - I'm trying to figure out how to override CSS to make an input box larger.

I downloaded code from github for an ng2 completer (that provides typeahead functionality).
https://github.com/oferh/ng2-completer

I'm trying to make the input box tied to the <ng2-completer> larger and am not having a lot of luck.

I'm seeing some options on-line on items to try...but many of them seem to be depreciated. I do not want to spend time trying to learn something that is being depreciated...so thought I would see if someone could provide some guidance on which method to pursue.

Some sites seem to say that specifying a css style in the components .css file...starting wit with ":host" could do the trick...but I tried that and it did not work.
Css entry:
:host .completerWidth {
  width: 650px;
}

used in HTML by:
<ng2-completer class="completerWidth"
...other completer settings...
closing >

That does not work...works on a regular input box...but not the ng-completer.

Two other items I have tried...

I tried specifying styling in the global css file and using it in the component with the ngcompleter...no luck.

I have also tried viewing the underlying code of the ng completer and determining where the width is specified so I can change it...and have not been able to pinpoint the correct place.

Any tips you can provide would be greatly appreciated.  

Thanks,
0
i have a service where i am using observable, it working fine when i am using it in my component and no url change but when my url change then observable which i updated last not provide me that value ...

service instantiate in my main module that is app module...

any help will be helpful.... thanks..
0
Hi,

Very Sorry for my silly question, I need to take seminar related  best recent IT technologies now . Please give some idea to choose recent IT technologies currently. And also that seminar topics useful for others.

Better topic related php  ,JS , Jquery, Angular JS etc.
0
ttip.docxHi All:

I had a really simple question. How do you combine options and tooltip to have this effect as you see in modern travel portal. I have included a document displaying a above mentioned effect. A small example would be really helpful. I guess it is a combination of option and tooltip.

Look forward to your responses.

Best Regards,

Sunnybrad
0
Hi,

I want to add page loading spinner in my Angular 2 application.. I have some side bar subscriptions which added in main component and calling the side bar subscriptions  like print, when it takes tile to print or search i want to show the loading spinner,,

Thanks!
0
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <style>
        <style>
   body{ margin:2em;}
      fieldset { display:inline-block;border:1x solid red; padding: 0px 40px 0px 20px; }
      legend {
        padding: 0.2em 0.5em;
        border:1px solid red;
        color:#fff;
        background-color:red;
        font-size:90%;
        width:auto;
      }
      #raidFrieght{
            margin: 10px 0px 10px 0px;
            padding-bottom: 4%;
      }
    table,
    th,
    td {
    border: 1px Solid black;
    border-collapse: collapse;
    }
    th {
    background-color: red;
    color: #fff;
    }
    </style>
</head>
<body>
    <div ng-app="myApp" ng-controller="myController">
      <fieldset>
        <legend> <b>Port Cost <b> </legend>
            <tr style="padding-right:10px;"> Rate </tr>
            <input style="margin-left:4%;" id="rbl_ratetype_0" type="radio" name="rbl_ratetype" value="1" checked="checked" />
            <label for="rbl_ratetype_0">Inbound</label>
            <input style="margin-left:4%;" id="rbl_ratetype_1" type="radio" name="rbl_ratetype" value="2" onclick="javascript:setTimeout('__doPostBack(\'rbl_ratetype$1\',\'\')', 0)" />
            <label for="rbl_ratetype_1">Outbound</label>
            </tr>
            </tr>
       
  <!--CREATE A TABLE-->
        <table>
            <tr>
               <th style="width:5%">SNo</th>
                        <th Style="width:30%">CostHead</th>
               …
0
Hi All:

I have an application that adds one line of input in the form.

I have to change it such that it adds multiple lines of input in the application.

The addition is done via an angularJS controller.

I have attach screenshot of both html code and angularJS controller code.

Look forward to your  responses.

Best Regards

Sunnybrad
Screen-Shot-2017-12-15-at-10.21.28-A.png
Screen-Shot-2017-12-15-at-10.22.26-A.png
Screen-Shot-2017-12-15-at-10.22.41-A.png
Screen-Shot-2017-12-15-at-10.23.22-A.png
Screen-Shot-2017-12-15-at-10.23.35-A.png
Screen-Shot-2017-12-15-at-10.23.48-A.png
0
Free Tool: SSL Checker
LVL 11
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="MyApp">
<head>
<title>Add/Delete Table Row</title>
 <script src="angularjs/angular.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="todo.css">
</head>
<script>
(function() {
var app = angular.module(;MyApp', []);
      app.controller("datactrl", ['$http', function($http) {
           var content = this;
    content.isDebug = true;
    content.datas = [
        {
             "c1":SNo,
        "c2":CostHead,
            "c3":PayTo,
            "c4":Currency,
            "c5":20',
            "c6":40',
            "c7":HQ',
            "edit":false
        ,"del":false
        ,"new":false
               }
    ];
      content.editDatas = [];
   
    content.newRow = function(){
      var newrow = {
        "c1":"" ,
        "c2":"" ,
       "c3":"" ,
        "c4":"" ,
        "c5":"" ,
        "c6":"" ,
        "c7":"" ,
      "edit":true  
        ,"del":false
        ,"new":true
      };
0
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="MyApp">
<head>
<title>Add/Delete Table Row</title>
 <script src="angularjs/angular.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="todo.css">
</head>

<script>
(function() {
var app = angular.module(;MyApp', []);
      app.controller("datactrl", ['$http', function($http) {
           var content = this;
    content.isDebug = true;
    content.datas = [
        {
             "c1":SNo,
        "c2":CostHead,
            "c3":PayTo,
            "c4":Currency,
            "c5":20',
            "c6":40',
            "c7":HQ',
            "edit":false
        ,"del":false
        ,"new":false
               }
    ];
      content.editDatas = [];
   
    content.newRow = function(){
      var newrow = {
        "c1":"" ,
        "c2":"" ,
       "c3":"" ,
        "c4":"" ,
        "c5":"" ,
        "c6":"" ,
        "c7":"" ,
      "edit":true  
        ,"del":false
        ,"new":true
      };
               
      …
0
Hi,

I have the users who wants to fill the form and save when they are not with in the network , and want to submit the filled form to database when they are in network..

my forms are developed in Angular 2 and web api..
0
For some reason the jquery side works fine. But for the life of me I cannot get this working in angularjs file.
Everything says it should work. The client connection is good and once it gets down to the client nothing is return but on the jquery side it works. I will show both code.
jquery works great.
 $(function () {
        $.connection.hub.start()
            .done(function () {
                console.log('SignalR connected, connection id = ' + $.connection.hub.id);
                console.log('Username = ' + '001');
                $.connection.messageHub.server.connectToMessageHub('001');
            })
            .fail(function (data) {
                console.log('SignalR failed to connect: ' + data);
            });
 
        $.connection.messageHub.client.reloadData = function (jsonObject) {
          console.log("sendToast called");
          console.log('get data=', jsonObject);
          
    
        };
       
    });
        $.connection.hub.start().done(function () { // initiate connection
      });
    });

Open in new window

angularjs side
 $.connection.hub.logging = true;
        $.connection.hub.start().done(function () {
            console.log('Your Hub started Sucessfully.');
        });
        setTimeout(function () { alert("Hello"); }, 10000);
        $.connection.messageHub.client.reloadData = function (message) {
            alert('Now it works!', message);
        };

        $.connection.hub.start()
            .done(function () {
                console.log('Connection established!');
            });

Open in new window

0
Hi, I am using angular. I have an issue with window open with below parameters (to open a new tab for the url)

var newWindow = window.open(url, "_blank");
newWindow.onload = function () { newWindow.document.title= "New Title"; }

When new tab is opened it does not have the "New Title" which I am expected. Please help
0
I  have developed dashboard link to list job status where it will have list of jobs and statuses in a table with search and pagination.
When I search few words its working fine but when I paste complete job name /enter full job name im not getting result.

Can any one help. UI developed using Angular js
1
I get undefined message in this code.

controller code:

$scope.searchOutputLst=[];
$scope.searchOutputLst=MyService.retrieveData($scope.caasSearch); // this http call returns data : an array of objects
console.log($scope.searchOutputLst); // prints undefined

Open in new window


 what is the issue ?

I am using angular js 1.3
0
Routing using lazy load modules. routeing the current view I left to enter a new view the old view loads at the bottom. This just starter happening with angular5. Not sure why. very hard to debug.
0
I have a  list of checkboxes and have a button called "advanced",when a checkbox is selected and click on the advanced it should take to different page in which it has a tree from api which takes selected checkbox value as input to URL
0
Free Tool: Subnet Calculator
LVL 11
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

When I go directly to the URL Eg. http://test.local/#!/ it will call the controller when I navigate through the pages.

When I go directly to http://test.local/#!/page1 and then try navigating to page2 etc or even an invalid page it will not call the controller and I don;t get the redirect. It will however if the page is valid load it.

var app = angular.module("eventApplication", ["ngRoute"]);

app.config(function($routeProvider, $locationProvider) { 
	$routeProvider
    .when("/", {
        templateUrl : "pages/main.php",
		controller: "routeController"
    })
    .when("/page1", {
        templateUrl : "pages/page1.php",
		controller: "routeController"
    })
.when("/page2", {
        templateUrl : "pages/page2.php",
		controller: "routeController"
    })
	.when("/error", {
        templateUrl : "assets/static/error.html"
    })
	.otherwise({
		redirectTo: "/error"
	});
});

app.controller("routeController", function ($rootScope, $http, $location) {
	$rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
		$location.path("/error")
		console.log("App Error: Unable to locate path 404.");
	});
});

Open in new window

0
Hi Experts,

I am working on Kendo Grid and  have a requirement similar to screenshot attached. I want to get rid  of white space  around column menu.

http://dojo.telerik.com/uLIqU

In the above link click on 3 dot vertical menu and hover to columns , it will show list of menu items and want to remove white space.

Thanks in Advance
0
Hi, I am using angular application. In the Db values are stored in pacific time and saved in string column; how do I display time based on browser timezone? I tried only at html side where it displays same value; not sure if value need to be retrieved from DB at server end and convert to pacific time and at browser UTC time. Please advise with example.
0
I'm learning how to unit test an Angular 2 application and I would appreciate some guidance here. In the function below, I have some code that connects to a SQLite database and runs a transaction. I am trying to understand how to unit test the parts in red (shown in screen shot). Can you please help me to understand how I would write tests that generate coverage?

I am using Jasmine 2.5.3, karma 1.5.0 and angular 4.1.3.

Thank you for advice and guidance.

runSqlTransaction(db: SQLiteObject) {
    this.db = db;
    return new Promise((resolve, reject) => {
      this.db.open().then((res) => {
        try {
          db.transaction(tx => {
            this.tx = tx;
            tx.executeSql(this.sqlQuery, this.params,
              (tx: any, res: any) => resolve({ tx: tx, res: res }),
              (tx: any, err: any) => reject({ tx: tx, err: err }));
          });
        } catch(e) {
          reject(e);
        }

      }).catch(e => {
        console.log('Is the database open failed', e);
      });
    });
  }

Open in new window


Coverage
0
Hi ,

I am creating a simple component in Angular 4

-my-account  // angular project folder
--app
----account  // angular component folder
-----css
-----js
-----images
-----account.component.html

//css , js , images are folders I created and put files.


Now I want to use css files from the above css folder in account.component.html.  How do I access ?


Here is my non working code

account.component.html
----------
<head>
 <Link href="css/datatables.min.css" rel="stylesheet" type="text/css"/>
 ....
 </head>
 
 
 I'm getting error
 zone.js:2744 GET http://localhost:4200/css/datatables.min.css 404 (Not Found)

please note this file is already present in css folder.
 
Do you have any suggestion how to access css files in component html   ?  what is the proper way to fix ths issue ?
Need help
1
When I hit ng serve on cmd it's not working although its working 1st & 2nd time but its not working now. All things are running perfectly. eg ng --version .. the problem is only with ng serve ..it only runs for the 1st & 2nd time..

Here is the error that cmd geneartes.

 $ ng serve
    ENOENT: no such file or directory, stat 'E:\Work\Angular\Basic website\Angular 4\my-first-app\src\tsconfig.json'
    Error: ENOENT: no such file or directory, stat 'E:\Work\Angular\Basic website\Angular 4\my-first-app\src\tsconfig.json'
        at Error (native)
        at Object.fs.statSync (fs.js:1000:11)
        at AotPlugin._setupOptions (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@ngtools\webpack\src\plugin.js:62:16)
        at new AotPlugin (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@ngtools\webpack\src\plugin.js:27:14)
        at _createAotPlugin (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@angular\cli\models\webpack-configs\typescript.js:55:12)
        at Object.exports.getNonAotConfig (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@angular\cli\models\webpack-configs\typescript.js:71:19)
        at NgCliWebpackConfig.buildConfig (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@angular\cli\models\webpack-config.js:29:37)
        at Class.run (E:\Work\Angular\Basic website\Angular 4\my-first-app\node_modules\@angular\cli\tasks\serve.js:43:98)
        at 

Open in new window

0

Angular

469

Solutions

310

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.