Tables and HTML DOM in Angular JS

Last updated on May 31 2022
Santosh Prakash

Table of Contents

Tables and HTML DOM in Angular JS

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily. Following example states the use of ng-repeat directive to draw a table.

<table>

<tr>

<th>Name</th>

<th>Marks</th>

</tr>

 

<tr ng-repeat = “subject in student.subjects”>

<td>{{ subject.name }}</td>

<td>{{ subject.marks }}</td>

</tr>

</table>

Table can be styled using CSS Styling.

<style>

table, th , td {

border: 1px solid grey;

border-collapse: collapse;

padding: 5px;

}

 

table tr:nth-child(odd) {

background-color: #f2f2f2;

}

 

table tr:nth-child(even) {

background-color: #ffffff;

}

</style>

Example

Following example will showcase all the above mentioned directive.

testAngularJS.htm

 

<html>

<head>

<title>Angular JS Table</title>

<script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script>

 

<style>

table, th , td {

border: 1px solid grey;

border-collapse: collapse;

padding: 5px;

}

 

table tr:nth-child(odd) {

background-color: #f2f2f2;

}

 

table tr:nth-child(even) {

background-color: #ffffff;

}

</style>

</head>

 

<body>

<h2>AngularJS Sample Application</h2>

<div ng-app = “mainApp” ng-controller = “studentController”>

 

<table border = “0”>

<tr>

<td>Enter first name:</td>

<td><input type = “text” ng-model = “student.firstName”></td>

</tr>

<tr>

<td>Enter last name: </td>

<td>

<input type = “text” ng-model = “student.lastName”>

</td>

</tr>

<tr>

<td>Name: </td>

<td>{{student.fullName()}}</td>

</tr>

<tr>

<td>Subject:</td>

 

<td>

<table>

<tr>

<th>Name</th>.

<th>Marks</th>

</tr>

<tr ng-repeat = “subject in student.subjects”>

<td>{{ subject.name }}</td>

<td>{{ subject.marks }}</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

 

<script>

var mainApp = angular.module(“mainApp”, []);

 

mainApp.controller(‘studentController’, function($scope) {

$scope.student = {

firstName: “Mahesh”,

lastName: “Parashar”,

fees:500,

 

subjects:[

{name:’Physics’,marks:70},

{name:’Chemistry’,marks:80},

{name:’Math’,marks:65},

{name:’English’,marks:75},

{name:’Hindi’,marks:67}

],

 

fullName: function() {

var studentObject;

studentObject = $scope.student;

return studentObject.firstName + ” ” + studentObject.lastName;

}

};

});

</script>

 

</body>

</html>

Output

Open textAngularJS.htm in a web browser. See the result.

AngularJS – HTML DOM

Following directives can be used to bind application data to attributes of HTML DOM Elements.

Sr.No. Name & Description
1 ng-disabled

disables a given control.

2 ng-show

shows a given control.

3 ng-hide

hides a given control.

4 ng-click

represents a AngularJS click event.

ng-disabled directive

Add ng-disabled attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

<input type = “checkbox” ng-model = “enableDisableButton”>Disable Button

<button ng-disabled = “enableDisableButton”>Click Me!</button>

ng-show directive

Add ng-show attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

<input type = “checkbox” ng-model = “showHide1”>Show Button

<button ng-show = “showHide1”>Click Me!</button>

ng-hide directive

Add ng-hide attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

<input type = “checkbox” ng-model = “showHide2”>Hide Button

<button ng-hide = “showHide2”>Click Me!</button>

ng-click directive

Add ng-click attribute to a HTML button and update a model. Bind the model to html and see the variation.

<p>Total click: {{ clickCounter }}</p>

<button ng-click = “clickCounter = clickCounter + 1”>Click Me!</button>

Example

Following example will showcase all the above mentioned directives.

testAngularJS.htm

 

<html>

<head>

<title>AngularJS HTML DOM</title>

</head>

 

<body>

<h2>AngularJS Sample Application</h2>

 

<div ng-app = “”>

<table border = “0”>

<tr>

<td><input type = “checkbox” ng-model = “enableDisableButton”>Disable Button</td>

<td><button ng-disabled = “enableDisableButton”>Click Me!</button></td>

</tr>

 

<tr>

<td><input type = “checkbox” ng-model = “showHide1”>Show Button</td>

<td><button ng-show = “showHide1”>Click Me!</button></td>

</tr>

 

<tr>

<td><input type = “checkbox” ng-model = “showHide2”>Hide Button</td>

<td><button ng-hide = “showHide2”>Click Me!</button></td>

</tr>

 

<tr>

<td><p>Total click: {{ clickCounter }}</p></td>

<td><button ng-click = “clickCounter = clickCounter + 1”>Click Me!</button></td>

</tr>

</table>

</div>

 

<script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”>

</script>

 

</body>

</html>

Output

Open textAngularJS.htm in a web browser. See the result.

So, this brings us to the end of blog. This Tecklearn ‘Tables and HTML DOM in Angular JS’ blog helps you with commonly asked questions if you are looking out for a job in Angular JS and Front-End Development. If you wish to learn Angular JS and build a career in Front-End Development domain, then check out our interactive, Angular JS Training, that comes with 24*7 support to guide you throughout your learning period. Please find the link for course details:

https://www.tecklearn.com/course/angular-js-training/

Angular JS Training

About the Course

Angular JS certification training is designed for developers who are responsible for building applications using AngularJS. Through a combination of presentations and hands-on practices, participants will explore Angular comprehensively and learn to build components, directives, template-driven forms, routing, etc. for complex data-centric (enterprise) applications. This Angular online training will update your knowledge and skills with the current Angular version to lift your career.

Why Should you take Angular JS Training?

  • The average salary for “Angular Developer” ranges from approximately $92,814 per year for a Developer to $113,069 per year for a Full Stack Developer (Indeed.com).
  • YouTube, Google, Cisco, Nike, Samsung, Microsoft, Forbes, BMW and many Fortune 500 companies are using Angular as their front-end development framework to deliver an engaging user experience.
  • Angular’s powerful cross-platform feature allows developers to build progressive web applications and native mobile applications.

What you will Learn in this Course?

Introduction to Angular

  • Introduction to Angular
  • Comparison between front-end tools
  • Angular Architecture
  • Building blocks of Angular
  • Angular Installation
  • Angular CLI
  • Angular CLI commands
  • Angular Modules

Angular Components and Data Binding

  • Working of Angular Applications
  • Angular App Bootstrapping
  • Angular Components
  • Creating A Component Through Angular CLI
  • Ways to specify selectors
  • Template and styles
  • Installing bootstrap to design application
  • Data Binding
  • Types of Data Binding
  • Component Interaction using @Input and @Output decorator
  • Angular Animations

TypeScript

  • What is TypeScript
  • Need of TypeScript
  • How to install TypeScript
  • Nodemon for monitoring changes
  • Interfaces in Class, String Templates, Maps,
  • Sets and Object Restructuring

Directives and Pipes in Angular

  • Angular Directives
  • @Component Directive
  • Structural Directives
  • Attribute Directives
  • Custom Directives
  • Pipes
  • Built-in Pipes
  • Chaining pipes
  • Custom pipes
  • Pipe Transform Interface & Transform Function
  • Pure and Impure pipes

Angular Services and Dependency Injection

  • Angular service
  • Need for a service
  • Dependency Injection
  • Creating a service
  • Hierarchical Injector
  • Injecting A Service into Another Service
  • Observables
  • RxJS Library
  • Angular’s Interaction with Backend
  • Parts of an Http Request
  • HttpClient

Forms in Angular

  • Forms in Angular
  • What are their functions
  • Advantages of Forms
  • Various Types of Forms
  • What is Angular Validation and Model driven approach

Angular Routing

  • Angular Routing
  • Angular Routing benefits and features
  • Building a single page application and updating it dynamically with Angular Routing
  • What is Parameter Routing
  • Router Lifecycle Hooks and Child Routes

Authentication and Security in Angular

  • What is Authentication?
  • Authentication and authorization
  • Types of Authentication
  • Where to store tokens?
  • JSON Web Tokens (JWT)
  • Authentication in Angular application
  • Security threats in web application

Testing Angular applications

  • Testing of Angular applications
  • Deployment of Angular Test Bed for testing on Angular framework
  • Setup of various tools for testing
  • Testing services in Angular Framework
  • E2E and Document Object Model testing

Got a question for us? Please mention it in the comments section and we will get back to you.

0 responses on "Tables and HTML DOM in Angular JS"

Leave a Message

Your email address will not be published. Required fields are marked *