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:

{
         path: '**',
         component: PageNotFoundComponent
       }

{

path: '**',

component: PageNotFoundComponent

}

And here is the whole route file.

import { ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { PopupComponent } from './popup/popup.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { AppComponent } from './app.component';

const appRoutes: Routes = [
    {
        path: '',
        component: AppComponent
      },
       {
         path: 'popup',
         component: PopupComponent
       }
       ,
       {
         path: '**',
         component: NotFoundComponent
       }
     
      
   ];
   
   export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

import { ModuleWithProviders } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { PopupComponent } from './popup/popup.component';

import { NotFoundComponent } from './not-found/not-found.component';

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

const appRoutes: Routes = [

{

path: '',

component: AppComponent

{

path: 'popup',

component: PopupComponent

}

{

path: '**',

component: NotFoundComponent

}

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

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

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

import { ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

<!-- These are the components which I have imported you can do it according to your need -->
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { DashboardComponent } from './dashboard/dashboard.component';
// NavComponent has been used to show the navigations on every page after login
import { NavComponent } from './nav/nav.component';
<!--- End of import components -->

// Here i have imported the guard which authenticates the user to access the route
import { AuthGuard, AdminAuthGuard  } from './guards/index';

const appRoutes: Routes = [
    {
      path: '',
      component: LoginComponent
    },
    {
      path: 'login',
      component: LoginComponent
    },
     { path: 'dashboard', component: NavComponent,canActivate: [AuthGuard], children : [
    {
      path: '',
      component: DashboardComponent
    }
  ] },
{ path: 'managers', component: NavComponent,canActivate: [AdminAuthGuard], children : [
    {
      path: '',
      component: ManagersComponent
    }
  ] },
{ path: 'edit-user/:role/:id', component: NavComponent,canActivate: [AuthGuard], children : [
    {
      path: '',
      component: EditUserComponent
    }
  ] },
       {
         path: '**',
         component: PageNotFoundComponent
       }
      
   ];
   
   export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

import { ModuleWithProviders } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from './login/login.component';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { DashboardComponent } from './dashboard/dashboard.component';

// NavComponent has been used to show the navigations on every page after login

import { NavComponent } from './nav/nav.component';

// Here i have imported the guard which authenticates the user to access the route

import { AuthGuard, AdminAuthGuard } from './guards/index';

const appRoutes: Routes = [

{

path: '',

component: LoginComponent

{

path: 'login',

component: LoginComponent

{ path: 'dashboard', component: NavComponent,canActivate: [AuthGuard], children : [

{

path: '',

component: DashboardComponent

}

] },

{ path: 'managers', component: NavComponent,canActivate: [AdminAuthGuard], children : [

{

path: '',

component: ManagersComponent

}

] },

{ path: 'edit-user/:role/:id', component: NavComponent,canActivate: [AuthGuard], children : [

{

path: '',

component: EditUserComponent

}

] },

{

path: '**',

component: PageNotFoundComponent

}

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

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.

  public allItems: any[];
  this.allItems = data.result.users;

1 2	public allItems: any[]; this.allItems = data.result.users;

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

// declaring array 
let exportData:any[] = [];
enum Gender { Other = 3, Male = 1, Female = 2 };
 this.allItems.forEach(item => {
 // data manipulation part
 let gender = Gender[item.gender] || Gender.Other;
 // here we are pushing objects into exportData array.
 exportData.push({'firstName': item.firstName,'lastName': item.lastName
 ,'dob': item.dob,'gender': gender});
 });

// declaring array

let exportData:any[] = [];

enum Gender { Other = 3, Male = 1, Female = 2 };

this.allItems.forEach(item => {

// data manipulation part

let gender = Gender[item.gender] || Gender.Other;

// here we are pushing objects into exportData array.

exportData.push({'firstName': item.firstName,'lastName': item.lastName

,'dob': item.dob,'gender': gender});

});

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

function printData(){
	for(var i=0; i<5; i++){
	console.log(i);
	}

	console.log('last value:' + i);
}

printData();

function printData(){

for(var i=0; i<5; i++){

console.log(i);

}

console.log('last value:' + i);

}

printData();

Now compile and run the compiled code like:

tsc main.ts | node main.js

1	tsc main.ts \| node main.js

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:

function printData(){
	for(let i=0; i<5; i++){
	console.log(i);
	}

	console.log('last value:' + i);
}

printData();

function printData(){

for(let i=0; i<5; i++){

console.log(i);

}

console.log('last value:' + i);

}

printData();

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

Typescript in Angular Js

Install Typescript:

sudo npm install -g typescript

1	sudo npm install -g typescript

To check the Typescript version:

tsc --version

1	tsc --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:

function log(message){
	console.log(message);
}

var message = 'Coding 4 Developers';

log(message);

function log(message){

console.log(message);

}

var message = 'Coding 4 Developers';

log(message);

when you compile this main.ts file like:

tsc main.ts

1	tsc main.ts

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

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

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

<h2>Upload Files Sample</h2>
{{fileUploadMsg}}
<div class="fileUpload btn btn-primary" *ngIf="isUploadBtn">
<span>Upload</span>
<input type="file" id="btnUpload" value="Upload" (change)="fileChange($event)" class="upload" />
</div>
<style>
.fileUpload {
position: relative;
overflow: hidden;
margin: 20px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>

<h2>Upload Files Sample</h2>

<span>Upload</span>

</div>

<style>

.fileUpload {

position: relative;

overflow: hidden;

margin: 20px;

}

.fileUpload input.upload {

position: absolute;

top: 0;

right: 0;

margin: 0;

padding: 0;

font-size: 20px;

cursor: pointer;

opacity: 0;

filter: alpha(opacity=0);

}

</style>

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

ng2-admin - Angular 2 Admin

Admin in angular 2 with following functionalities:

User login & logout
Consume web services
User listing
Update user profile
Pagination
Export to CSV
Export to PDF
Upload file
Delete user

Click here for code

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:

npm install --save angular2-csv

1	npm install --save angular2-csv

Html:

<button (click)="download()">download </button>

1	<button (click)="download()">download </button>

Component:

import { Component, OnInit } from '@angular/core';
import { Angular2Csv } from 'angular2-csv/Angular2-csv';
import { UserService } from '../_services/index';

@Component({
selector: 'app-csv',
templateUrl: './csv.component.html',
styleUrls: ['./csv.component.css']
})
export class CsvComponent implements OnInit {
private allItems: {};
constructor(private userService: UserService) { }

ngOnInit() {
}

download() {
this.userService.getAll()
.subscribe(data => {
//API data
this.allItems = data.result.users;
/*var dummyData = [
{
first_name: "Saurabh",
last_name: "Sharma",
id: 147
},
{
first_name: "Gaurav",
last_name: "Sharma",
id: 9
}];
*/

var options = { 
fieldSeparator: ',',
quoteStrings: '"',
decimalseparator: '.',
showLabels: true, 
showTitle: true,
headers: ['First Name','Last Name','ID'] 
};
new Angular2Csv(this.allItems, 'My Report',options);
//new Angular2Csv(dummyData, 'My Report',options);
}); 
}

}

import { Component, OnInit } from '@angular/core';

import { Angular2Csv } from 'angular2-csv/Angular2-csv';

import { UserService } from '../_services/index';

@Component({

selector: 'app-csv',

templateUrl: './csv.component.html',

styleUrls: ['./csv.component.css']

})

export class CsvComponent implements OnInit {

private allItems: {};

constructor(private userService: UserService) { }

ngOnInit() {

}

download() {

this.userService.getAll()

.subscribe(data => {

//API data

this.allItems = data.result.users;

/*var dummyData = [

{

first_name: "Saurabh",

last_name: "Sharma",

id: 147

{

first_name: "Gaurav",

last_name: "Sharma",

id: 9

}];

var options = {

fieldSeparator: ',',

quoteStrings: '"',

decimalseparator: '.',

showLabels: true,

showTitle: true,

headers: ['First Name','Last Name','ID']

};

new Angular2Csv(this.allItems, 'My Report',options);

//new Angular2Csv(dummyData, 'My Report',options);

});

}

Generate PDF in Angular 2

First of all you need to install following javascript libraries:

npm install jspdf --save
npm install @types/jspdf --save

1 2	npm install jspdf --save npm install @types/jspdf --save

Then add following in angular-cli.json:

"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]

1	"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]

Create a component

ng g component pdf

1	ng g component pdf

html:

<button (click)="download()">download </button>

1	<button (click)="download()">download </button>

component ts:

import { Component, OnInit, Inject } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
selector:'app-pdf',
templateUrl:'./pdf.component.html',
styleUrls: ['./pdf.component.css'],
providers: [
{ provide: 'Window', useValue: window }
]
})
export class PdfComponent implements OnInit {

constructor(
@Inject('Window') private window: Window,
) { }

ngOnInit() {
}

download() {

vardoc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'http://www.coding4developers.com/');

// Save the PDF
doc.save('Test.pdf');
}

}

import { Component, OnInit, Inject } from '@angular/core';

import * as jsPDF from 'jspdf'

@Component({

selector:'app-pdf',

templateUrl:'./pdf.component.html',

styleUrls: ['./pdf.component.css'],

providers: [

{ provide: 'Window', useValue: window }

]

})

export class PdfComponent implements OnInit {

constructor(

@Inject('Window') private window: Window,

) { }

ngOnInit() {

}

download() {

vardoc = new jsPDF();

doc.text(20, 20, 'Hello world!');

doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');

doc.addPage();

doc.text(20, 20, 'http://www.coding4developers.com/');

// Save the PDF

doc.save('Test.pdf');

}

Coding 4 Developers

Running Code Website

Category: Angular2,4,5

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

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

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

What is the difference in let and var in typescript

Typescript in Angular Js

Angular 2 Interceptors | ng2-interceptors

Upload file in Angular 2

Export data to CSV with headers in Angular 2

Generate PDF in Angular 2

Share This:

Share This:

Share This:

Share This:

Share This:

Share This:

Share This:

Share This:

Share This:

Share This: