CodeIgniter 4 REST API, MySQL and Angular 10 CRUD Example

I am going to show you an example on Angular CodeIgniter 4 REST API MySQL CRUD. CRUD is an acronym and stands for Create, Read, Update and Delete operations. REST or RESTful is a Representational State Transfer which defines an architectural style in software engineering. The REST API works on HTTP or HTTPS protocol. The Angular framework will be used in this example for representing the UI (User Interface) where end users will perform CRUD operations.

Continue

How to load local JSON File in Angular Application

JSON, i.e., JavaScript Object Notation is a lightweight format for interchanging data. It is based on a subset of JavaScript language. For example, this JSON data format is used in the webservice response. In old days webservices used XML for the primary data format but nowadays JSON, being lightweight, is becoming the preferred data format for exchanging data for most of the webservices. JSON is built on two structures: A collection of name/value pairs. In various languages, the JSON structure is realized as an object, record, struct, dictionary, hash table,…

Continue

Allow only numeric values or digits in input field using Angular 10

In this tutorial I am going to show you how to allow users only input numeric values or digits. If users enter non-numeric value then we will show an error message. We can also completely prevent from entering non-numeric values. In this case, we need to accept only numbers for a textbox or input field instead of validating the value in the textbox or input field. In this type of validation user will not be able to type a non-numeric values.

Continue

Autocomplete input using Angular 9

Introduction I am going to show you how to give auto complete suggesstion when users search for something by typing in the input field. Autocomplete allows users to have other suggested strings or values displayed on typing of the relevant text in the input field. You have also seen when you start a search on Google or other search engines, you can find the information you are looking for using search predictions.

Continue

How to add routes to existing Angular project

Introduction In this tutorial we will see how to create or add routes to existing Angular project. The situation may arise when you forget to add routes while creating new project or probably you thought that routes may not be required but later you find that routes are required for appropriate navigation in your application. By the time you discover routes are required for your application you might have already implemented few functionalities and probably you are not interested to create another project to start over again with the same…

Continue

How to consume GraphQL CRUD API using Angular 9 and Apollo

Here we are going to see how to consume GraphQL CRUD API using Angular and Apollo. So this is a client for GraphQL Server API. We are going to use various modules for working with GraphQl client. For GraphQL server side implementation you can use any technology and here I am going to use Spring Boot framework for performing CRUD operations on GraphQL server. CRUD means Create, Read, Update and Delete operations. In the server side implementation we are performing CRUD operations on category and product using GraphQL and Spring…

Continue

Delete Multiple Table Rows from Server using Angular 9

Introduction In this tutorial we will see how to delete multiple rows from HTML table as well as from database server at one go. We have seen tutorial how to display data from server to client side and how to select multiple rows on HTML table. We will put checkbox against each row on the table so that user will be able to select a particular row for deletion. We will also put a checkbox on the table header and selecting this checkbox all rows on the table will be…

Continue

Angular 9 Check/Uncheck Individual/All Checkbox on HTML Table Rows

Introduction Here we will create an example on how to check/uncheck individual/all checkbox on HTML table rows. We have seen how to display data from server using Angular and alternate row color using CSS. We will put checkbox against each row on the table so that user will be able to select a particular row. We will also put a checkbox on the table header and selecting this checkbox all rows on the table will be selected.

Continue

Display Data on HTML Table from Server using Angular 9 and Alternate Row Color

Introduction In this tutorial we are going to show you how to display data from server using Angular 9 and how to apply two different colors on alternate rows using css (cascading style sheet). We will use Spring Boot REST API to send data on client side and consume using client side technology Angular 9. We will use ngIf, else, ngFor directives to render data conditionally. We will show elseBlock if no record is found from the REST API. We will use index to determine odd or even column and…

Continue