Angularjs

Angular 2 Search and Sort with ngFor repeater with example

In angular 2 we don't have pre-defined filter and order by as it was with AngularJs, we need to create it for our requirements. It is time killing but we need to do it, (see [No FilterPipe or OrderByPipe][1]). In this article we are going to see how we can create filter called pipe in angular 2 and sorting feature called Order By. Let's use a simple dummy json data array for it. Here is the json... By Ali Adravi   On 16 Apr 2017  Viewed: 49,153
  • angular-2
  • angularjs
  • pipe
  • filter

Angularjs Cascading Dropdown/Select with demo

Cascading dropdown with angularjs is easier than MVC and ASP.Net. In Angularjs ng-change is the best event to hook the function to get the second dropdown list items. In this article, we will try to fill the state dropdown on selection change of country and then fill the city dropdown on change of state dropdown. We will fetch only those records from database which match the criteria rather... By Ali Adravi   On 06 Aug 2015  Viewed: 46,591
  • angularjs
  • select
  • dropdown
  • cascading

Angularjs Constant and enum with example

As we know the benefit of constant and enum in any other language, we need to it wherever need in our project. But angularjs does not have any enum concept, we will try to create some constants, object to achieve the same goal of enum easily with example. Luckily AngularJS provides a `constant` service type that can be used for static data that will not change and can be used throughout the... By Ali Adravi   On 02 Sep 2015  Viewed: 35,244
  • angularjs
  • constants
  • enum

Angular 4 upload files with data and web api by drag & drop

Upload file with data by clicking on button or by drag and drop, is the topic of this article. We will try to create an image gallery by uploading files and save data into database and images into a folder. We will try to create a component in a way that it can be used anywhere in entire application and configure properties like file size, type of files, single or multiple files, maximum number... By Ali Adravi   On 24 Sep 2017  Viewed: 29,858
  • angular2
  • angularjs
  • web-api

Angularjs dropdown select value, text, multiple values with demo

Angularjs dropdown/slect have more option than any other .net language dropdownlist, we can bind and get only Id or Text or both from dropdown, even we can bind and get more than two values like value, text and role from a dropdown and even more. We can try to see all the possible ways to bind the dropdown/select in this article, which is not possible to cover every thing but we will try our best... By Ali Adravi   On 05 Sep 2015  Viewed: 28,973
  • angularjs
  • dropdown
  • select

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 1

Search sort Insert update and delete are the basic features we need to learn first to learn any language, In this article we will try to create these features with Web API, bootstrap modal popup and ui.router. We will use enetity framework code first to save and retrieve data from database. We will extend our previous article example to achieve our goal. Here is the list of features we are... By Ali Adravi   On 28 Jul 2015  Viewed: 28,373
  • angularjs
  • webapi
  • ui.router
  • entity-framework
  • modal-popup

Angularjs Bootstrap Datepicker enable/disable dates with configuration example

Adding calendar to the angularjs application is more than easy to any other application if you configured it properly. Angularjs Bootstrap DatePicker have more features than any other available calendar, you can set all your condition in html from data format to min-date, max-date, date disabled for Saturday and Sunday, first day of the week, todays button text, Week button text, close button... By Ali Adravi   On 22 Sep 2015  Viewed: 27,204
  • angularjs
  • bootstrap
  • Datepicker
  • Calendar

Angular 2 Dynamically Add & remove Components

Angular 2 gives full control to add or remove component in other component programmatically by simple steps. In this article we are going to see how to add, remove experience component to any other component, we will also try to pass some values to component from parent to child component to see if it is possible or not. It's better to write on plunker so we can test at anytime from... By Ali Adravi   On 27 Aug 2017  Viewed: 24,460
  • angular2
  • angularjs

ng-grid search sort paging with AngularJs WebAPI and MVC ASP.Net

We are going to use ng-grid with feature like searching, sorting and paging of records, we will use paginated data, means pull only as many records as we have to show into our ng-grid. We already discussed about the AngularJS application structure in our previous article see [ASP.Net MVC Web API AngularJS and Bootstrap application structure][3]. We will use Entity Framework and WebAPI to search... By Ali Adravi   On 30 Nov 2014  Viewed: 22,110
  • ng-grid
  • angularjs
  • webapi
  • mvc

Pass value from one controller to another in AngularJS

Share value between two or more controller is easy by using the service which we will see in this article. In ASP.Net there were many options to pass values from one page to other pages, let's just name some of them to understand if we can use them or not. The very first thing comes in mind SESSION state, to use the session state we will to go to the server side, so we will need the service to... By Ali Adravi   On 02 Nov 2015  Viewed: 18,361
  • service
  • angularjs
  • controller

Angular 2 CRUD with Web API 2

Angular 2 insert update, delete, search, sort feature we will try in this article which we will improve with dynamic component loading and image upload with drag and drop feature in coming articles with the same base code. We are going to use Angular-CLI 4 for this application. What we need to start: - Node version 6.x - Any code editor, I use Visual Studio Code, it is free - Angular... By Ali Adravi   On 03 Sep 2017  Viewed: 18,120
  • angular2
  • Angularjs
  • Web API

Angularjs CRUD with Web API, Entity Framework & Bootstrap modal popup part 2

Add/Edid Customer in Modal Popup --- In previous article we discussed how to search, delete and show detail of customer and contact list. In this article we will try to open the modal popup to add new customer and edit an existing customer record. I divided article in two parts because of the Modal Popup, which works in totally different way so I thought to give more detail about it. First of... By Ali Adravi   On 29 Jul 2015  Viewed: 17,001
  • angularjs
  • modal-popup
  • bootstrap

AngularJS HTML5 mode reloading page not found solution

Removing # from Angularjs application is tricky but BOSS is always right, if he don't want to see the # (hash) in URL then there is no way to keep it any more. Actually it is not too much work for anyone to set it up within 5 minute by rewriting the URL. I was playing and found it is very easy and useful. In all the supporting browsers it will show the url without hash and in older browsers which... By Ali Adravi   On 17 Aug 2015  Viewed: 13,523
  • angularjs
  • routing
  • web.config

Angularjs Progress bar directive for entire application

Progress bar for Angularjs application by using directives is simple and real easy. I was googling and could not found any directive way, if you will check most of the people says before call the http method open the progress bas and close once you get the result or get any error. Do you think it is good way to write the code in every http request, I don't like it. What ever we are going to... By Ali Adravi   On 24 Jul 2015  Viewed: 12,883
  • angularjs
  • directive
  • $http
  • progress-bar
  • css

Angularjs powerful paging on table and searching with delay and demo

Paging on table is the basic requirement and most of us look for some grid so it can provide the complete feature of paging and sorting but in Angularjs it is so easy that anyone can achieve it by writing some code. I checked and found most of the available code give the paging feature in for 1 to N means if there is 500 pages then it renders 500 links at the bottom which grow more than the table... By Ali Adravi   On 14 Aug 2015  Viewed: 12,790
  • angularjs
  • table
  • pagination
  • searching

No action was found on the controller that matches the request

How to post the data from json, in Angularjs $http.post we get this error. why we get this error only when we try to post the json object rather than query string. When we pass the parameter in query string same action method works as it should be. It's a very simple article so we are going to check everything by opening every nut and shell. We will use Web API 2 route to customize the URL as... By Ali Adravi   On 12 Jul 2015  Viewed: 10,327
  • ajax
  • angularjs
  • webapi
  • post-method

ASP.Net MVC Web API AngularJS and Bootstrap application structure

Application structure by using ASP.Net MVC, Web API, AngularJs is not complicated but we need to know what NuGet Packages are required and what can make the application easy and speed up the development. In this article we will use MVC 4, Visual Studio 2012, Web API and AngularJS to create a single page application. We will try to use different folders for keeping our controllers, services,... By Ali Adravi   On 17 Nov 2014  Viewed: 9,448
  • angularjs
  • webapi
  • mvc
  • bootstrap
  • asp.net

Angularjs filter by multiple property in controller, ignore case

Angularjs Filter is very really handing when we need to filter records from a complex object array. I was looking Angular way to filter my records and found some interesting things from different websites, which I will try to summarise and explain in more detain in this article. We will see how to use filter in ngRepeat, ngOption and inside our controller because using filter in controller is a... By Ali Adravi   On 30 Jan 2017  Viewed: 8,486
  • angularjs
  • filter

Angular 2 Accordion expand only one at a time

Createing accordion demo in Angular 2 is more than easy, Angular have rich of conditional features which we will see in this article, like how to apply more than one class on the basis of some conditional values. For this demo we are not goign to write some fancy CSS and animation but use the hard coded data and use ngFor loop and index to create dynamically our list of items in accordion and... By Ali Adravi   On 19 May 2017  Viewed: 6,825
  • angular2
  • angularjs
  • accordion
  • bootstrap

Angular 5 email & compare password validation, different ways

Angular email validation can be done in many different ways, by using the built-in directive, by using patterns or by creating custom directive. In this article we will try to see all the three different ways with working code in plunker. We will use our previous example and add three email text boxes to validate 1. by built-in directive, 2. by using pattern and finally we will write our own... By Ali Adravi   On 23 Jan 2018  Viewed: 6,180
  • Angular-5
  • angularjs
  • custom-directive
  • compare-validation
12