Handling 404 with Angular 2 | How to handle 404 (page not found) page in Angular 2,4,5

How to handle the exception if user is trying to access the page which not found. I'm going to explain how to handle a page not found exception in Angular 2,4,5.

In you RouterConfig add the following below line:

And here is the whole route file.

For more information about routing in Angular 2,4,5 click here.

Share This:


Angular 2 Routing | How to Set Up Basic Routing in Angular 2,4,5 | Routing example in Angular 2,4,5

In Angular 2,4,5 we nevigates our components through routing. Here in this tutorial I'll explain how to manage routing in Angular 2,4,5 very easily.

Because Angular Js is preferred to develop single page web applications so if you have common navigation then you can manage them through the routing in angular.

We also can manage the authenticated routing in Angular 2,4,5.

Here we will create a file called app.routing.ts inside the app directory of application.

app.routing.ts

 ...  Read More

Share This:


How to push objects into array in Angular 2 | How to iterate objects in Angular 2 Component

Sometime we need to push objects into array in Angular or to iterate the objects. Today I'll explain how we can do it in an easy proficient way.

Here I have declared that allitems is an array of any type. And we got some users data from the web service is assigned to the allitems array.

Here allItems is an array of object and I will iterate this array like:

 

Share This:


What is the difference in let and var in typescript

I will try to explain this by taking an example.

create a file main.ts

Now compile and run the compiled code like:

 Output will be:

0
1
2
3
4
last value: 5

here value of i at the end is 5.

This is the issue of declaring a variable with var keyword. we have declared value of i inside the for block but it is also available outside the for block or it is available inside the whole function body.

if you declare the variable with let keyword.like:

It will immediately give a compilation error say 'can not find name i' and you will catch this error at compile time. This is the beauty of Typescript. ...  Read More

Share This:


Typescript in Angular Js

Install Typescript:

To check the Typescript version:

Typescript is just a superset of JavaScript. It is client side object oriented language. It follows classes, objects, Inheritance, Interface etc.. object oriented concepts like in Java or .net.

A valid JavaScript code is also valid typescript code. Because when you compile the typescript code it create a JavaScript file.

Example:

when you compile this main.ts file like:

a new file will generated here named as main.js. ...  Read More

Share This:


Angular 2 Interceptors | ng2-interceptors

Concept of Interceptors is used for intercepting the HTTP request and response in Angular 2. You can append values in your HTTP request before sending to the server. You can alter you server response before displaying it.

For example in every request you wanted to show a loader and after coming response from server you wanted to hide the loader this show and hide of loader can be manage with Interceptors.

If you wanted to send some authentication token in headers you can manage it through Interceptors...  Read More

Share This:


Upload file in Angular 2

In this tutorial we will discuss how to upload file in Angular 2.

Here is the view of uploading file. There is an option to browse the file as you select the file fileChange function will be called which is written in FileComponent.



Create a component :

html :                                                                                                                                     Download Code

In this component I have written fileChange function which calls the service to upload the file. But before calling the function we create the FormData object and then append the file object into FormData object. ...  Read More

Share This:


Export data to CSV with headers in Angular 2

Sometime we need to export data in CSV. Here I'm going to explain how can we export the data to CSV in Angular 2 along with headers.

Data which will be exported will be received form web service on and click event.




First of all you need to install angular2-csv library by following below command.

Install:

Html:

Component:

 


 ...  Read More

Share This:


Generate PDF in Angular 2





First of all you need to install following javascript libraries:

Then add following in angular-cli.json:

Create a component

html:

component ts:


Share This: