Angular 12 Multiple Image Uploader with Preview Example – PHP Server to Save file

Upload multiple images and preview in Angular 2+ applications; In this Angular tutorial, we will discuss how to upload multiple images with preview and how to save them on the server using PHP backend.

To upload images, we will use the Angular reactive form approach. Using the form, a user can select more than one image. The images will be displayed to the user a preview before upload. After submitting the form, images will be saved into the server using the PHP backend.

Read more

[Angular 16] Global Loader Example – Spinner for HTTP Calls Tutorial

Global Spipper Loader shown on HTTP calls example using ng-http-loader; In this tutorial, we will implement a global Spinner Loader in the Angular project by using a third-party package.

Interceptors take count of pending HTTP calls, thus shows a spinner loader as an indication. Moreover, the loader spinner with a backdrop limits a user to perform any action until the pending HTTP call is completed.

Read more

Angular 12 Infinite Scroll Example – Auto Load Data on Reaching Bottom

Adding Infinite scroll component in Angular application for example; In this Angular tutorial, we will learn how to add infinitely scroll content in Angular application. Infinite means, the data will keep on loading when a user reaches the bottom of the content.

Infinite means, without any limit; In some situations, we have huge data to show on the user screens. But we can’t load the whole data at once and dump it onto the screen to render. In such a case, it will take loads of time to load, even if it is loaded it will be unmanageable for limited resources for browsers to render.

Read more

Slick Carousel Example using ngx-slick-carousel – Angular 12

Slick Carousel using ngx-slick-carousel is going to be discussed in this guide; we’ll create a demo application and create an example of Slick Carousel and check its properties and methods available as a configuration.

 Features of Slick Carousel in Angular Application

  • Fully equipped carousel
  • Easy to integrate using the exclusive ngx-slick-carousel package for Angular
  • Responsive layout to fit in screen size.
  • Server-Side Rendering with Angular Universal support.
  • Lazy-Loaded Images in Carousel
  • HTML content can be easily added, also support variable height of slides with cool effects.

Read more

Angular 12 Range Slider Example – @angular-slider/NGX-slider Tutorial

Angular range selection slider bar by dragging example tutorial; In this guide, we will discuss how to add Angular draggable range slider bar with to and from markers by using a popular npm package @angular-slider/ngx-slider.

To implement a Range Slider in the Angular application, we have the ngx-slider library. It is very popular, fully customizable and works perfectly in responsive screen sizes. Moreover, it works great with Angular 6+ version projects.

Read more

Angular 12 CRUD Example with Web API – HttpClient REST APIs

Angular applications are data-centric, which needs to connect with a server to store and fetch data. In Angular, we achieve the server communication channel through the HttpClientModule API service.

In this Angular tutorial, We’ll be discussing how to develop an Angular 12 application performing CRUD operations having Bootstrap 4 styles. CRUD is a combination of Create, Read, Update and Delete operations. These are the most common types of REST APIs or Webservice verbs we use.

Read more

Angular 12 Service Example – Http CRUD Operations

In this Angular tutorial, we are going to discuss Angular Services.  In the Angular Service example tutorial, we will create a Service to perform CRUD (Create, Read, Update and Delete) operations using the HttpClient Angular service.

Services help up managing functions and methods which can be consumed by other components or modules throughout the application. Ideally, use Services to perform network data communications and error handling in an application.

Read more

Angular 12 JavaScript Promise Example

In this Angular tutorial, we will understand Promises and how Promises work. We will discuss how to use ES6 Javascript Promises properly in Angular applications with examples.

Promises are TypeScript objects which are used to handle asynchronous operations in a program. A promise proves very helpful in managing single or multiple asynchronous operations like HTTPS calls and performs optimal error handling.

As we know JavaScript is a single-threaded programming language, due to which it waits for a previous statement to execute before moving to the next task. To tackle this synchronous behavior, we have Callback functions that take a specific task and sit aside to perform program execution asynchronously.

Read more

Angular 12 Providers | useValue, useClass & useFactory Tutorial with Examples

In this tutorial, we will learn about Providers. How to implement different types of providers like useValue, useClass and useFactory in Angular 12,11,10,9,8,7,6,5,4 application projects with practical and simple examples.

Let’s start with Provider and what role exactly it plays in Dependency Injection.

We can say Provider is the ‘How’ part of the DI Token of Dependency. Its helps in How to create/find the Dependency for a token.

You can check the previous post on Providers here.

Providers are used to registering classes, functions, or values as dependencies using Angular’s Dependency Injection (DI) system. Each Provider is located using a token. Three types of token available are available:

Read more

Angular 12/11/10 Promises Example with HTTP Rest API Calls

In this Angular tutorial, we will discuss how to make HTTP calls in Angular applications using JavaScript Promises.

JavaScript Promises

As we know JavaScript is a synchronous single-threaded programming language. Each statement executes after the previous task is completed. But with the help of callback functions, we can make JavaScript an asynchronous language.

A callback function is provided with a task to get completed based on some events triggered.  In a similar way, we can create Promise objects to handle the Asynchronous tasks which ensure to return a value in form of callbacks.

Read more

Angular 2+ Service Providers and Limiting its Scopes

In this Angular tutorial, we’ll learn about Providers. How we can limit the scope of Service Providers in Angular application which plays a crucial role in optimizing a large application.

 

[lwptoc]

What is a Provider?

A provider in Angular acts like an instruction for the Dependency Injection system, which directs on how to get a value for a particular dependency.

These Dependencies are the services that we create and provide to Angular application module(s).

Read more

Angular 12 Proxy Configuration to Handle CORS Issue

In this Angular tutorial, we are going to learn how to handle the Cross-Origin Resource Sharing (CORS) issue in Angular applications when using API or resources accessed from another origin. We will manage the proxy configuration setting in the Angular application.

What is CORS?

Cross-origin resource sharing known as CORS is the management of communication between 2 or more resources placed at multiple origins or domains. This could be the access of different types of resources including CSS, JS, API Rest services or event other Angular application which are running on localhost but different PORTS.

Read more

How to Add/ Create New Environments in Angular 12 Application

Creating a new build environment in the Angular application tutorial; In this tutorial, you will learn how to add a new environment in the Angular application and updated scripts in the package.json file.

In an Angular application, by default, we have a development and production environment file. Inside the environment folder at application root, you will see environment.ts and enviroment.prod.ts files referring to the development and production environment.

Read more

Facebook Sign-In Login Button in Angular 12 Application

Angular app with Facebook social login example; We will discuss how to add Facebook login in Angular application using the OAuth protocol. For quick and easy implementation, we will be using a widely used social login plugin named angularx-social-login.

In the upcoming tutorial, you will learn how to add a Facebook social sign-in feature in the Angular app like a pro. An application will have a Facebook login button, on clicking it, the OAuth implicit flow will trigger to authenticate the user with Facebook credentials. Thereafter, authenticating the user you will be provided with user claims, including email address, name and profile image.

Read more