Home Blog

Angular 2 Customized Grid Example

0

Introduction:
Explained an example to create the customized grid with column sorting mechanism.

First created a grid component.
angular-grid.ts:

Then created a template for table.

angular-grid.html:

Add Input data properties named headerData and rowData to the angular grid component. So that this component can get table column header data and row data from other component where it’s called. Also defined a property named actualData, in order to store the actual input row data.  In the below code snippet used Object.assign property to copy only data not the reference.

Updated angular-grid.ts:

For sort ascending, sort descending and reset mechanism added following methods with normal java script sorting logic.

Updated angular-grid.ts:

Now Added little styling to sorting glyph icons.

Updated angular-grid.css:

Now our angular grid component is ready to use from other components by simply calling with selector name and passing appropriate table inputs.

 app.component.html:

In app component added some mock data for table row details and table column names.

 app.component.ts:

 

Angular 2 – Basic Login Example

0

Introduction:
In this post, explained the basic login example  for beginners . Create a login page like below.

Login/login.component.html:

Create a component for the login page and defined properties username and password.And also added login method to handle login event.
Login/login.component.ts:

app.component.ts:

app.component.html:

 

Angular2 CRUD App – with JSON, PHP

0

Introduction:
In this post, explained a example on the Angular 2 CRUD(Create, Read, Update and Delete) opearations using PhP.
Following prerequisites are required.
1. Angular 2 Basis setup
2. MAMP Server(WAMP for windows) to run PhP code.

 

In this example, we will read list of records from JSON file and then show it in a table. User can search,edit or delete the records. User also can create new record. Create two directories inside angular 2 app  folder named Dashboard  and User .

Create a interface to define user records properties like below and export it.

User/user.ts:

Keep the following files on MAMP server and run the server.

htdocs/www/userData.json:

htdocs/www/user.php:

Create a template and component for dashboard page is like below.
Dashboard/dashboard.component.html:

In the below dashboard component, we have injected the service named UserService and accessing respective service methods. We have added this
service to reduce the component logic.

Dashboard/dashboard.component.ts:

Create a user service file and add methods to do CRUD operations by Http call.
User/user.service.ts:

Create a template and component for create user and edit user like below.
User/createUser.component.html:

User/createUser.component.ts:

User/editUser.component.html:

User/editUser.component.ts:

Add above created components to the dashboard page on condition based like below.
Updated Dashboard/dashboard.component.html:

Angular 2 Custom Directive – Form Validation

2

Introduction:
Form field validations are very important  to restrict from user to enter invalid data on client side. In this post explained simple example to validate form input fields using custom directive. And also explained, injection of bootstrap library to the template for form styling.

Create a  form template  file and  avoid default HTML 5 validations by  adding form property novalidate.

forms.component.html :

Create a component with component selector name is “form-component” and add templateUrl path.

form.component.ts:

Now in order to add styles to your component, define stylesUrl path to your component meta data like below.

Updated form.component.ts:

Note: You should install bootstrap css library using npm install (by adding “bootstrap”:”~3.3.7″ to the devDependencies property in package.json file). Then add above mentioned path.

Create a directive with selector name “validateValue”, we can use this directive, by simply injecting directive selector name to the form template.

Now update our form template by adding  directive selector name as attribute to  the our form fields like below.

Updated forms.component.html :

In the above code,we are passing field values (like [validateValue]="uname" ) and field name (like fieldName="name" ) to the directive. Now update our directive file by adding input properties.

validation.directive.ts:

Add a constructor function to get the template DOM control to the directive and also add HostListener to listen the input field events.

Updated validation.directive.ts:

Now you are getting model data and elements to the directive, so you can write your validations. Refer below input field validation code.

Updated validation.directive.ts:

 

source code :  link