React Login Logout With Spring Boot Security

React Spring Security Here in this example I am going to integrate React JS front-end with Spring Boot Security framework. When user will try to access the home page the user will be redirected to the login page if the user has not been authenticated already. Spring Boot’s default security mechanism asks for username and password when a user tries…

React Search Functionality In HTML Table

Search Functionality In any tabular format data it is necessary to have a search input so that user can search their intended data using particular text or string. This will help them to find the expected data in a little time than searching the whole HTML table data by navigating to different pages. This example will show you how to…

Prevent New Line In Angular Text Box

Avoid Line Break Sometimes you may need to prevent line break in the comment or remark section where an HTML input element <textarea/> is used. Generally as you type in the text area and press ENTER key to put the next part of string in the new line and it may cause some issues in other activities. For example, your…

JSF 2 AJAX Example – Check Username Availability

JSF 2 AJAX In this tutorial I am going to show you how to use AJAX (Asynchronous JavaScript And XML) technique in JSF (Java Server Faces) based applications. AJAX is generally used for updating or refreshing a small part of the page because, you may not need to refresh the whole page. Here in this example I am going to…

HTML Table Conditional Cell Color Using React

HTML Table HTML table is mainly used to display data in tabular format in rows and columns. Each row contains one or more columns to display data. Each row is indicated by <tr/> tag, whereas each column is indicated by <td/> tag. The HTML table is indicated by <table/> tag. The HTML table header is indicated by <thead/> and body is indicated by <tbody/> tag. In this example I am…

HTML Table Conditional Cell Color Using Angular

HTML Table HTML table is generally used to display data in tabular format in rows and columns. Each row contains one or more columns to display data. Each row is indicated by <tr/> tag, whereas each column is indicated by <td/> tag. The HTML table is indicated by <table/> tag. The HTML table header is indicated by <thead/> and body…

HTML Table Conditional Cell Color

Introduction In this example I am going to show you how to color HTML table’s cells based on condition. The condition may be a value range, for example, HTML table cells (<td/>) have certain values and based on values you can choose background color of the cells. I am using pure JavaScript to iterate through rows and columns of the…

Spring Boot Thymeleaf jQuery MultiSteps Form

Table of Contents Introduction Prerequisites Project Setup MySQL Table DataSource Config Entity Class Repository Interface Service Class Spring Web Controller Spring Boot Main Class UI (User Interface) Testing Multi Steps Form Source Code Introduction In this example I am going to show you how to build multisteps form using Spring Boot thymeleaf jquery. Multi steps form is required when users…

How To Create Photo Gallery In Angular

Table of Contents Introduction Prerequisites Project Setup Setup ngx-lightbox App Module Configuration Update Title App Component App HTML App Styles Testing Angular Photo Gallery Source Code Introduction In this example I am going to show you how to create photo gallery in Angular application. Photo gallery also known as image gallery or media gallery or photo album and it is…

Integrate Angular into Spring Boot using Gradle

Table of Contents Introduction Prerequisites Angular Project Settings Gradle Properties Spring Boot Project Build App Testing Angular Spring Boot Integration Source Code Introduction In this tutorial I will show you how to integrate Angular into Spring Boot using Gradle build tool. So, let’s say you have two different projects – Angular application and Spring Boot application and you do not…