Angular Tutorial

Angular Tutorial will cover many aspects of Angular programming.

Angular Starter

Basics

• How to develop with Angular Service (Angular 4 Service)
• Angular NgFor Repeater Directive – Loop over a Collection (Angular 6)
• Display Data in Angular (6,7,8) Tutorial with Examples

Components & Elements

• Create a new Angular 4 Component – Multiple Components Angular Application
• Angular 6 Component – How to create & integrate New Angular 6 Component
• Angular 6 – Use Angular Elements to build Custom Elements example
• Angular 7 Drag and Drop example – Angular Material CDK
• Angular 7 Virtual Scroll example – Angular Material CDK

Setup

• How to setup Angular IDE with Spring Tool Suite
• How to Integrate Bootstrap with Angular (Angular 6)
• How to setup new Angular project with specific Version locally
• How to install Angular 8 locally

Async

• Angular 6 Service – with Observable Data for Asynchronous Operation
• Angular 6 NgRx Store example – Angular State Management
• Angular 6 NGXS example – Angular State Management

HTTP

• Error Handler Angular 6 HttpClient – catchError + retry – with Node.js/Express example
• Angular 6 Http Interceptor – with Node.js RestAPIs

Form

• Angular 6 Template Driven Form – NgModel for Two-Way Data Binding
• Angular 6 Form Validation example – Template-driven Forms
• Angular 6 Form Validation example – Reactive Forms

Pipe

• Angular NgIf Else Then – NgIf with Observables and Async Pipe (Angular 6)
• Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example
• Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format
• Angular 6 Custom Pipe | with Parameterizing a pipe | Angular Pure pipes + Impure pipes
• Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example
• Angular Built-in Pipe Uppercase Pipe + Lowercase Pipe + Titlecase Pipe Example

Routing & Navigation

• Angular 6 Routing/Navigation – with Angular Router Service
• Angular 6 dynamic Navigation Bar – add/remove Route dynamically

Misc

• Angular 6 Search Box example with Youtube API & RxJS 6

Angular SpringBoot

• How to integrate Angular 4 with SpringBoot RestApi using SpringToolSuite
• How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4
• How to work with Angular Routing – Spring Boot + Angular 4
• How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4
• How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite
• Angular 6 HttpClient – Get/Post/Put/Delete requests + SpringBoot RestAPIs + Bootstrap 4
• Error Handler Angular 6 HttpClient – catchError + retry – with Node.js/Express example
• Angular 6 Http Interceptor – with Node.js RestAPIs
• Angular 6 + Bootstrap 4 + SpringBoot RestAPI – Display Image from FileSystem Example
• Angular 6 – Display Image from Amazon S3 with SpringBoot RestAPI + Bootstrap 4 Example
• Amazon S3 + Angular 6 HttpClient + SpringBoot – Upload/Download Files/Images Example
• How to Integrate Angular 8 and SpringBoot RestAPIs Example

Angular Spring Boot JWT Authentication example | Angular 6 + Spring Security + MySQL Full Stack:

• Part 1: Overview and Architecture
• Part 2: Build Backend
• Part 3: Build Frontend

Angular Django

– Django + Angular 6 example | Django Rest Framework + MySQL CRUD example

• Part 1: Overview
• Part 2: Django Server
• Part 3: Angular Client

Angular ElasticSearch

• Angular 4 ElasticSearch – Quick Start – How to add Elasticsearch.js
• Angular 4 ElasticSearch example – How to create an Index
• Angular 4 ElasticSearch example – Add Document to Index
• Angular 4 ElasticSearch example – Get All Documents in Index
• Angular 4 ElasticSearch example – Documents Pagination with Scroll
• Angular 4 ElasticSearch example – simple Full Text Search
• Angular 6 ElasticSearch – Quick Start – How to add Elasticsearch.js
• Angular 6 ElasticSearch example – Add Document to Index
• Angular 6 ElasticSearch example – Get All Documents in Index
• Angular 6 ElasticSearch example – Documents Pagination with Scroll
• Angular 6 ElasticSearch example – simple Full Text Search

Angular Firebase

• How to integrate Firebase with Angular 4
• How to integrate Firebase with Angular 5 – AngularFire2 V5
• How to integrate Firebase with Angular 6 – AngularFire2 V5
• Integrate Firebase into Angular 8 App with @angular/fire

Firebase Realtime Database

• Angular 4 Firebase CRUD operations with AngularFire2 v4
• Angular 4 Firebase Pagination example with AngularFire2 v4
• Angular 4 Firebase AutoComplete Search example with AngularFire2 v4
• Angular 4 Firebase Filter Data example with AngularFire2 v4
• Angular 5 Firebase CRUD operations with AngularFire2 v5
• Angular 6 Firebase CRUD operations with AngularFire2 v5
• Angular 8 Firebase CRUD operations with @angular/fire

Firebase Firestore

• Angular 8 Firestore tutorial with CRUD application example – @angular/fire

Firebase Authentication

• Angular 4 Firebase Auth – Anonymous Authentication with AngularFire2 v4
• Angular 4 Firebase Auth – Email/Password Authentication with AngularFire2 v4

Firebase Cloud Storage

• Angular 4 Firebase – Upload File to Storage
• Angular 4 Firebase – Get List Files from Storage
• Angular 4 Firebase – Delete File from Storage
• Angular 4 Firebase – Upload Image & Display List Images from Storage
• Angular 5 Firebase – Upload/Display/Delete Files from Storage
• Angular 5 Firebase – Upload/Display/Delete Images from Storage
• Angular 6 Firebase – Upload/Display/Delete Files from Storage
• Angular 6 Firebase – Upload/Display/Delete Images from Storage
• Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire

Angular Sample

Angular SpringBoot

• Angular 4 + Spring JPA + PostgreSQL example | Angular 4 Http Client – Spring Boot RestApi Server
• Angular 4 + Spring JPA + MySQL example | Angular 4 Http Client – Spring Boot RestApi Server
• Angular 4 – Upload/Get MultipartFile to/from Spring Boot Server
• Angular 4 – Upload/Get Images to/from Spring Boot Server
• Angular 4 + Spring Boot + MongoDB CRUD example
• Angular 4 + Spring Boot + Cassandra CRUD example
• Angular 6 – Send Nested Object to Spring Boot Server example
• Spring Boot + Angular 6 example | Spring Data JPA + REST + PostgreSQL CRUD example
• Spring Boot + Angular 6 example | Spring Data JPA + REST + MySQL CRUD example
• Spring Boot + Angular 6 example | Spring Data + REST + Cassandra CRUD example
• Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example
• Angular 6 Client – Upload Files/Download Files to MySQL with SpringBoot RestAPIs example
• Angular 6 Client – Upload Files/Download Files to PostgreSQL with SpringBoot RestAPIs example
• Angular 6 + SpringBoot RestAPIs + ActiveMQ Producer/Consumer example
• Angular 6 HttpClient + Spring Boot + MariaDB example | Spring Data JPA + RestAPIs CRUD example
• Angular 6 + Spring Boot + H2 Database [embedded mode] example | Spring Data JPA + RestAPIs CRUD example
• Spring Boot WebSocket with Angular 5 Client | SockJS + STOMP

Angular 6 WebSocket example with Spring Boot WebSocket Server | SockJS + STOMP

• Spring Boot 2.1 + Angular 8 + MySQL example | Angular HTTP Client + RestAPIs + Spring JPA CRUD + MySQL tutorial

Angular Spring Boot JWT Authentication example | Angular 6 + Spring Security + MySQL Full Stack:

• Part 1: Overview and Architecture
• Part 2: Build Backend
• Part 3: Build Frontend

Angular Node.js

• Node.js/Express RestAPIs – Angular 6 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4
• Node.js/Express RestAPIs server – Angular 6 Upload/Download Files – Multer + Bootstrap
• Angular 6 HttpClient Crud + Node.js Express Sequelize + MySQL – Get/Post/Put/Delete RestAPIs
• Mongoose CRUD MongoDB – Angular 6 HttpClient Get/Post/Put/Delete – Node.js/Express RestAPIs
• Angular 6 HttpClient – Upload Files/Download Files to MySQL with Node.js/Express RestAPIs – using Multer + Sequelize ORM
• Angular 6 HttpClient – PostgreSQL – Node.js/Express Sequelize CRUD APIs – Post/Get/Put/Delete
• Angular 6 HttpClient – Upload File/Download File from PostgreSQL – with Node.js/Express RestAPIs example – using Multer + Sequelize ORM
• Angular 6 HttpClient + Node.js/Express RestAPIs + MariaDB example | Sequelize ORM CRUD APIs example
• Angular 6 + Node.js + Amazon S3 | Upload Files + Download Files + List Files | using Express RestAPI, Multer, AWS-SDK

Angular & Nodejs JWT Authentication fullstack | Nodejs/Express RestAPIs + JWT + BCryptjs + Sequelize + MySQL:

• Part 1: Overview and Architecture
• Part 2: Build Backend
• Part 3: Build Frontend

Full Reactive

• Angular 4 + Spring WebFlux + Spring Data Reactive MongoDB example | Full-Reactive Angular 4 Http Client – Spring Boot RestApi Server
• Angular + Spring WebFlux + Spring Data Reactive Cassandra example | Full-Reactive Angular Http Client – Spring Boot RestApi Server

AngularJS

• How to configure AngularJs with Spring MVC | SpringBoot
• How to integrate Http Angularjs with Spring MVC | Spring Boot
• Spring JPA + PostgreSQL + AngularJS example | Spring Boot
• Spring JPA + MySQL + AngularJS example | Spring Boot
• MultipartFile – How to create Spring AngularJs MultipartFile application to download/upload files | SpringBoot + AngularJs + Bootstrap.
• Consume Spring HATEOAS Rest API using AngularJS example | Spring Boot
• Create Spring WebSocket Angular Application with SpringBoot + SockJS + STOMP

Deployment

• Deploy Angular on Apache Remote Server Example – Use Vultr Hosting
• Deploy Angular on Nginx remote Server Example – Use Vultr VPS Hosting
• How to Deploy Angular Application to GitHub Pages
• How to Deploy Angular Application on Firebase Hosting example
• How to Deploy Angular application on Heroku hosting with Git repository
• How to Deploy Angular 4/6/7 Application on Google App Engine – Google Cloud Platform