Global error handling in angular 6 with HttpClient & interceptor

Angular 4.3.1 introduced HttpInterceptor, we will use HttpClient and new HttpInterceptor feature to handle error globally for entire application. When calling the service method, we might get some kind of server error. It can be any kind, like poor network connection to reach to the server, method itself through error due to any logical error, or unable to connect to the database, in that... By Ali Adravi   On 10 Aug 2018  Viewed: 70
  • angular
  • angularjs
  • httpclient
  • httpinterceptor

Angular 6 Lazy Loading with demo

Lazy loading in angular is introduced to load the source and pages on demand. Concept is to group the feature in modules and when user load any page from that module, load the complete module only then rather than to load everything on application start. Let's try to understand the concept with example: Say we have a website which have users, customers, products etc. For lazy Loading, we will... By Ali Adravi   On 30 Jul 2018  Viewed: 148
  • angular
  • lazy-loading
  • routing

React webpack typescript setup step by step

React WebPack and TypeScript environment setup is the first step to learn react, it is easy but seems too much settings. In this article we will see how can we do it without knowing anything about React, Webpack and typescript, rest of the things we can learn latter, once we will have environment setup. We will do it by using Visual Studio Code. Create a folder where you want to keep the... By Alicia Gonzalez   On 24 Jul 2018  Viewed: 103
  • reactjs
  • webpack
  • typescript

ASP.Net MVC Entity Framework Entity Validation with DataAnnotation

Validation of Entity with Entity Framework is a tricky way, but it is really simple. In this article we will try to understand how easily we can add the validation with any entity created by Entity Framework with database first approach by using partial classes and pure DataAnnotation. We will not use any if.. else... or switch... case statement to validate different property. It will work with... By Ali Adravi   On 08 Jul 2018  Viewed: 211
  • mvc
  • validation

Singleton design pattern in c# with real examples

Singleton is a design pattern in which we allow a class to be instantiated only once and use again and again from entire application. In this article we will try to see different ways to create and Singleton class and pros & cons of all the ways, we will also write some code to test it, so we can understand what's going on **1. Singleton - Not Thread Safe **: Let's write the very basic... By Ali Adravi   On 03 Jul 2018  Viewed: 99
  • singleton
  • c#
  • design-pattern

MVC HTML Paging Helper with search and sort

MVC Search Sort and Paging is common feature we need to use, so let's write the HTML Paging Helper for our project, which will work faster than anyother build-in costum grid system because they contain many other features we don't need for our application and don't support many features we want. In this article we will try to create custom HTML paging helper which will work with paging, sorting... By Ali Adravi   On 07 May 2018  Viewed: 693
  • html-helper
  • paging
  • search
  • sort

Angular 5 reusable animation with a single file

Angular animation document give some very good example to add the animation in component but it looks messy. What if we want to keep all the animation in separate file and use wherever we want. Keeping all animation in a separate file will be good idea because it will be easy to maintain and reuse the same animation as many times as we want. In this article we will create some basic animation... By Ali Adravi   On 27 Mar 2018  Viewed: 1,182
  • angular
  • animation

Constructor types in C# with example

Constructor is a special method, having the same name as the class/struct. When an object of class or struct is created, its constructor is called, and they usually used to initialize the data members of the new object. There are different types of constructors which we will see in detail in this article, like, default constructor, parameterized constructor, copy constructor, static constructor... By Ali Adravi   On 14 Feb 2018  Viewed: 933
  • c#
  • Constructors
  • Constructor-types

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: 7,398
  • Angular-5
  • angularjs
  • custom-directive
  • compare-validation

angular 5 form validation easiest way

Angular make form validation easier than ever, we are going to check with Angular FormBuilder, FormGroup and validation together in this article, We will also see how to validate email without writing any custom directive or any other code because it is already there. Some tricky way to show and hide the error on page load and on save. We will use plunker for example: First we need to update... By Ali Adravi   On 23 Jan 2018  Viewed: 1,896
  • angular-5
  • angularjs
  • validation
  • FormGroup
  • ReactiveForm

Angularjs jQuery UI Datepicker disable dates conditionally

Angularjs jquery calendar with minimum code to attach datepicker, how to extend to restrict the dates from a particular day, month or year, how to make calendar to validate start and end date from one control to other after user selection, how to format date before rendering or how to disable datepicker with the help of angular ngDisabled properties are some of the common points we are going to... By Ali Adravi   On 26 Dec 2017  Viewed: 1,522
  • angularjs
  • jquery
  • datepicker
  • validation

Angularjs reusable Component with demo

Angularjs 1.5 introduced component which can be used for reuseable component similar to user control in ASP.Net. We will create a component and see how we can use with different pages by just adding a single element. If we will try to creat the same as a directive then will be complicated but with component it will be very easy. **Advantages of Components**: - simpler configuration than... By Ali Adravi   On 23 Oct 2017  Viewed: 1,442
  • angularjs
  • component

Angularjs checkboxlist required validation with demo

Checkbox list at least one is required, checkbox list minimum 3 is required, gender at least one is required are the basic requirement for any situation. We will use the toggle trick to add remove the selected items from the list of checkbox values. In this article we are going to see the examples: 1- Radiobutton list, at least one value is required 2- Checkbox list, at least one value... By Ali Adravi   On 22 Oct 2017  Viewed: 3,164
  • angularjs
  • checkbox-list

ASP.Net MVC multiple submit button use in different ways

Multiple submit button in ASP.Net MVC is the common and mostly asked question in interview. In this article we will try to see different ways to use the Multiple submit button in a form and what is the best way to use multiple submit button. What we are going to try: 1. HTML5 FormAction and FormMethod attribute in submit buttons 2. Multiple Submit Buttons With Action Selector Attribute 3.... By Ali Adravi   On 08 Oct 2017  Viewed: 1,996
  • mvc

Angularjs render any json to table, add edit remove rows and more

Dynamic table rendering, edititing, adding/removing rows with angularjs, render any json script in tabular format with heading and contents. W will try to render dynamic table, add & remove rows, edit rows in table all by very simple coding, hardly two to five lines, don't allow to remove the first row and keep the add button always in the last row etc. 1. Angularjs Render any json array to... By Ali Adravi   On 07 Oct 2017  Viewed: 5,778
  • angularjs
  • dynamic-table

Angular component communication by using Input Output decorator

@Input and @Output decorator ar used to pass data/communicate between components, @input is used to pass data from parent to child component on the other hand @Output is use to notify the parent by using EventEmitter. Take the simple example of customers list parent page and add/edit child component, on clicking the edit button current customer data need to be passed to the child component to... By Ali Adravi   On 30 Sep 2017  Viewed: 1,086
  • angular2
  • angularjs
  • input
  • output

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: 30,997
  • angular2
  • angularjs
  • web-api

OAuth Web API token based authentication with custom database

Token base authentication with custom database by using OAuth in Web API is not complicated but documents are not very clear, many people try it and ended up with scratching their head, but you are on the right page so you will not be one of them. We will not use any template code but we will start empty project with Web API, so all the authentication code we need to write, let's start a news... By Ali Adravi   On 11 Sep 2017  Viewed: 7,979
  • oauth
  • web-api

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,998
  • angular2
  • Angularjs
  • Web API

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: 26,360
  • angular2
  • angularjs
12345 ... 12Next