Hirushan De Silva

Angular Sample

2 Comments Posted by Hirushan Wednesday, January 8, 2020 at 7:00 PM

Create WebAPI Application

New-> Web->ASP.Net WebApplication –“WebAPI” -> OK

Select WebAPI OK

Create Database called “WebAPIDB”

USE [WebAPIDB]

/****** Object: Table [dbo].[Employee] Script Date: 1/8/2020 9:46:07 PM ******/

SET ANSI_NULLS ON

SET QUOTED_IDENTIFIER ON

CREATE TABLE [dbo].[Employee](

[EmployeeID] [int] IDENTITY(1,1) NOT NULL,

[FirstName] [varchar](50) NULL,

[LastName] [varchar](50) NULL,

[EmpCode] [varchar](50) NULL,

[Position] [varchar](50) NULL,

[Office] [varchar](50) NULL,

PRIMARY KEY CLUSTERED

(

[EmployeeID] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY]

Add ADO.Net Model

Model right click -> add ADO.Net Entity data model -> “DBModels”-> Generate from database-> Build app

Right click on Controllers-> add “web api 2 controller with actions entity framework”

Controller name => “EmployeeController”

Model Class: “Employee (WebAPI.Models)

Data context: DBModel (WebAPI.Models)

Remove (ModelState.IsValid) statements

Create angular application “ng new angularCRUD”

To run “ng serve –open”

Generate component “gn g c employees” -> Remove TS file

Right click on Employees folder and open terminal create two components

“Ng g c employee” & “ng g c employee-list”

Create folder called “shared” ->then create service class “ng g s employee”, remove test file

Create model class -> “ng g class employee.model” -> remove .Model in ts file.

Add following code in model class

export class Employee{

EmployeeID: number;

FirstName: string;

LastName: string;

EmpCode: string;

Position: string;

Office: string;

}

npm install @angular/http@latest

npm install ngx-toastr --save

Open Getbootstrap.com -> click get started copy css cdn path and add in index.html

Index.html

<!doctype html>

<head>

<title>AngularCRUD</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

appComponent.html

<app-employees ></app-employees>

</div>

Employeescomponent.html

Employee Register

</h2>

</div>

<app-employee></app-employee>

</div>

<app-employee-list></app-employee-list>

</div>

Employees.component.ts

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

import { EmployeeService } from './shared/employee.service';

@Component({

selector: 'app-employees',

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

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

providers:[EmployeeService]

})

export class EmployeesComponent implements OnInit {

constructor(private employeeService: EmployeeService) { }

ngOnInit() {

}

EmployeeService.ts

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

import { Employee } from './employee.model';

import { Http, Response, Headers, RequestOptions, RequestMethod, Request } from '@angular/http';

import { Observable } from 'rxjs';

import { map, filter, scan } from 'rxjs/operators';

//import 'rxjs/add/operator/map';

//import 'rxjs/add/operator/toPromise';

//import './rxjs-operators';

@Injectable()

export class EmployeeService {

selectedEmployee: Employee;

employeeList: Employee[];

constructor(private http: Http) { }

postEmployee(emp: Employee) {

var body = JSON.stringify(emp);

var headerOptions = new Headers({ 'content-type': 'application/json' });

var requestOptions = new RequestOptions({ method: RequestMethod.Post, headers: headerOptions });

return this.http.post('http://localhost:52537/api/Employees', body, requestOptions).pipe(map(x => x.json()));

}

putEmployee(id, emp) {

var body = JSON.stringify(emp);

var headerOptions = new Headers({ 'content-type': 'application/json' });

var requestOptions = new RequestOptions({ method: RequestMethod.Put, headers: headerOptions });

return this.http.post('http://localhost:52537/api/Employees/' + id, body, requestOptions).pipe(map(x => x.json()));

}

getEmployeeList() {

this.http.get('http://localhost:52537/api/Employees').pipe(map((data: Response) => { return data.json() as Employee[]; })).toPromise().then(x => { this.employeeList = x; })

}

deleteEmployee(id: number) {

return this.http.delete('http://localhost:52537/api/Employees/' + id).pipe(map(res => res.json()));

}

Employee.component.html

<div class="validation-error" *ngIf="FirstName.invalid && FirstName.touched">This Field is Required</div>

</div>

<div class="validation-error" *ngIf="LastName.invalid && LastName.touched">This Field is Required</div>

</div>

</div>

</div>

</div>

</div>

<button [disabled]="!employeeForm.valid" type="submit" class="btn btn-lg btn-block btn-info"><i class="fa fa-floppy-o"></i>Submit</button>

</div>

<button type="button" class="btn btn-lg btn-block btn-secondary" (click)="resetForm(employeeForm)"><i class="fa fa-repeat"></i>Reset</button>

</div>

</form>

Employee.component.ts

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

import { EmployeeService } from '../shared/employee.service';

import { NgForm } from '@angular/forms';

import { ToastrService } from 'ngx-toastr';

@Component({

selector: 'app-employee',

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

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

})

export class EmployeeComponent implements OnInit {

constructor(private employeeService: EmployeeService, private toastr: ToastrService) { }

ngOnInit() {

this.resetForm();

}

resetForm(form?: NgForm) {

if (form != null)

form.reset();

this.employeeService.selectedEmployee = {

EmployeeID: null,

FirstName: '',

LastName: '',

EmpCode: '',

Position: '',

Office: ''

}

onSubmit(form: NgForm) {

debugger;

if (form.value.EmployeeID == null) {

this.employeeService.postEmployee(form.value).subscribe(data => {

this.resetForm(form);

this.employeeService.getEmployeeList();

this.toastr.success('New Record Added Successfully.', 'Employee Register');

})

}

else {

this.employeeService.putEmployee(form.value.EmployeeID, form.value).subscribe(data => {

this.resetForm(form);

this.employeeService.getEmployeeList();

this.toastr.info('Record Updated Successfully.', 'Employee Register');

})

}

Employee-list.component.html

<br />

<div>

<tr>

<th scope="col">Employee Name</th>

<th scope="col">Employee Code</th>

<th scope="col">Position</th>

<th scope="col">Office</th>

<th scope="col">Edit / Delete</th>

</tr>

<td>{{employee.FirstName}} - {{employee.LastName}}</td>

<td>{{employee.EmpCode}}</td>

<td>{{employee.Position}}</td>

<td>{{employee.Office}}</td>

<td>

</a>

</a>

</td>

</tr>

</table>

</div>

Employee-list.component.ts

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

import { EmployeeService } from '../shared/employee.service';

import { Employee } from '../shared/employee.model';

import { ToastrService } from 'ngx-toastr';

@Component({

selector: 'app-employee-list',

templateUrl: './employee-list.component.html',

styleUrls: ['./employee-list.component.css']

})

export class EmployeeListComponent implements OnInit {

constructor(private employeeService: EmployeeService, private toastr: ToastrService) { }

ngOnInit() {

this.employeeService.getEmployeeList();

}

showForEdit(emp: Employee) {

this.employeeService.selectedEmployee = Object.assign({},emp);

}

onDelete(id: number) {

if (confirm('Are you sure you want to delete?') == true) {

this.employeeService.deleteEmployee(id).subscribe(x => {

this.employeeService.getEmployeeList();

this.toastr.warning('Record Deleted Successfully.', 'Employee Register');

})

}

App.module.ts

import { BrowserModule } from '@angular/platform-browser';

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

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

import { FormsModule } from '@angular/forms';

import { EmployeesComponent } from './employees/employees.component';

import { EmployeeListComponent } from './employees/employee-list/employee-list.component';

import { EmployeeComponent } from 'src/app/employees/employee/employee.component';

import { HttpModule } from '@angular/http';

import { ToastrModule } from 'ngx-toastr';

@NgModule({

declarations: [

AppComponent,

EmployeesComponent,

EmployeeComponent,

EmployeeListComponent

imports: [

BrowserModule, FormsModule, HttpModule, ToastrModule.forRoot()

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

app.component.ts

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

title = 'app';

}

Styles.css

/* You can add global styles to this file, and also import other style files */

form.emp-form{

background-color:#dbdbdb;

border-radius:4px;

padding:10px;

}

div.validation-error {

color:red;

text-align:center;

}

button:hover, a.btn.hover {

cursor:pointer;

}

Main.ts

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

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {

enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule)

.catch(err => console.log(err));

In web api install using tools->nugget.. ->package manager console

Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.2.7

Add enable cors in WebAPIConfig

// Web API configuration and services

config.EnableCors(new EnableCorsAttribute(origins: "http://localhost:4201", headers: "*", methods: "*"));

npm install @angular/animations

Pages

Hirushan De Silva

Latest Software,Sinhala Tutorials,MP3,MP4,Movies,DVDRips

Angular Sample

Blog Archive

Labels