Provides tutorials on Angular. Includes tutorial to create a full stack app using Angular and backend technologies along with including JWT security at client side.
Angular 8 CRUD Example
By Dhiraj , 30 June, 2019 108K
In this tutorial, we will be developing an Angular 8 application and perform CRUD operation on a user entity. We will be developing a full stack app with REST API integration. We will have a login, list user, add and edit user component and based on the routing configurations these pages will be served. We will have HTTP interceptor to intercept our HTTP request and inject JWT token in the header. The backend server code is implemented using Spring Boot....
Angular Multiple File Upload
By Dhiraj , 30 December, 2018 76K
In this lesson, we will provide a solution to upload multiple files and images to server with angular as a client. We will be creating a sample Angular project and define a file component and hit REST endpoint to upload files. There will be an option either to select files from local PC or drag and drop the file from PC to browser and upload them in one shot....
Newsletter Subscription Template in Angular
By Dhiraj , 03 December, 2018 4K
In this article, we will be developing a sample newsletter subscription template in an Angular app using material design. To do so, first, we will generate a sample angular 7 app with Angular CLI. The app will have routing added. Then we will be integrating material design in it. We will make use of material MatDialogModule to create a custom dialog and then apply some CSS and add scripts to function it as a newsletter subscription template....
Angular 7 CRUD Example (Full Stack App)
By Dhiraj , 31 October, 2018 144K
In this article, we will be creating a sample Angular 7 application step by step from scratch and perform CRUD operations on a user entity. The back-end API will be exposed using Spring Boot REST and MySQL will be used for persistent storage. We will be using Angular CLI to generate our sample project and then we will add our all user components to it....
PayUMoney Integration with Angular and Spring Boot
By Dhiraj , 27 August, 2018 19K
In this tutorial, we will be integrating PayuMoney payment gateway with a spring boot and Angular application. Here, we will be using Angular 6 but the same is also applicable for Angular 5 and 4. For server-side implementation, we will be using Spring boot 2 with Spring data and Mysql DB to save the transaction details. In my last article, we discussed integrating the same payment gateway with Spring Boot MVC and Angular 1. The server-side implementation is exactly the same as my last article and hence, we may skip some common configurations....
Angular Universal Server-Side Rendering
By Dhiraj , 29 July, 2018 9K
In this article, we will be discussing server side rendering of Angular Single Page App(SPA) using node server with example. For this, we will be using ng-toolkit/universal which adds all the necessary files required for server-side rendering of the .html pages. Doing so makes our pages SEO friendly and our Angular based websites can be crawled and indexed by search engines....
Hide SideNav While Login in Angular Material
By Dhiraj , 28 July, 2018 34K
In my last article, we looked into creating a SideNav using Angular 6 material designing in a single page application(SPA). But in most of the real time scenario, we require the SideNav to be hidden during login and viewable only after successful login. Being a SPA with routing implemented, sometimes it becomes challenging to do so. Hence, in this article we will be creating a SPA with routing to hide SideNav during login and make it viewable post login....
Angular 6 Material SideNav Example
By Dhiraj , 24 July, 2018 153K
In this article, we will be discussing about angular material SideNav and integrate SideNav in an Angular 6 Single Page App along with MatToolBar. We will be creating a collapsible side navigation content on a menu icon click and on the click of the items inside the side nav, different router components will be loaded in the primary content. To achieve this, we will be using different directives provided by angular material 6 such as <mat-sidenav-container>, <mat-sidenav-content>, <mat-sidenav>....
Spring Boot Angular Captcha Example
By Dhiraj , 09 July, 2018 16K
In this article, we will be integrating Google reCaptcha with a spring boot web applications with Angular as a client. The ReCaptcha will appear in an angular login form and once the form is submitted, it will be validated on the server side with the secret key along with the username and password. In the example, once the user credentials and the captcha is validated, post login page will appear....
Deploying Angular App with Nginx on Cloud
By Dhiraj , 08 June, 2018 28K
In this article, we will be discussing deploying Angular applications to cloud with Nginx server. Hence, first we will be building an angular 6 application and then install and set up Nginx on cloud. I already have an ec2 instance on aws. Also, we will briefly discuss about different Nginx directives and then deploy the angular app on Nginx. Though we are using Angular 6 app for example but same process can be used to deploy any angular version that is released after angular version 2....
Angular 6 CRUD Example
By Dhiraj , 23 May, 2018 282K
In this article, we will be building an Angular 6 application step by step from scratch. We will be generating our Angular 6 Hero application using angular CLI and then modify it to have a user management project where there will be a login screen for an admin and post-login he can perform CRUD operations such as create, read, update and delete user with the sample REST API exposed using HttpClientModule. We will also be using RouterModule to have routing enabled....
Creating Progressive Web Applications With Angular
By Saurabh , 22 April, 2018 2K
Progressive web applications might soon become the new web apps standard. This is not based on some controversial opinion or a wild fantasy, but rather on how well it’s performing vs traditional web applications. Progressive Web Applications, known as PWA, are built using the traditional web technologies ( HTML, CSS, and JS) but they look and behave as a combination of mobile applications and web applications....
Building Angular5 Application Step By Step
By Dhiraj , 03 February, 2018 13K
In this article, we will be building an angular5 application from scratch with step by step configuration and explanation.This single page application will be created using angular CLI command with different angular modules integrated with it such as RouterModule, HttpClientModule, AppRoutingModule, FormsModule. The application will have a sample login page styled with bootstrap and a user dashboard page. Once, the user is authenticated successsfully, he will be redirected to the dashboard page where he can see a list of users....
Angular Material Data Table Example(Pagination + Sorting + Filtering)
By Dhiraj , 29 January, 2018 148K
This tutorial is about angular 5 data table.Here, we will be creating a angular application from CLI command and then integrate material with it and create a sample data table using
mat-table directive.The data table will support pagination, sorting, filtering and row selection provided by
matSort in MatPaginatorModule and MatSortModule...
Angular 5 Material Dialog Implementation Example
By Dhiraj , 28 January, 2018 35K
This tutorial is about creating and implementing angular material dialog. We will be using angular 5 provided
MatDialogModule to create a custom dialog with functionality to share data between dialog component, global configurations, entry components with example codes. In the last tutorial, we created a sample material login application and used browser alert to show error messages. We will be using the same application and integrate MatDialogModule in it to show messages....
Angular 5 Material Design Application
By Dhiraj , 25 January, 2018 76K
This tutorial is about creating a sample application using angular 5 material design.The app will have a login page as a landing page and after successful login user will be redirected to next page. To design this page we will be using different angular 5 material components such as form controls, navigation menu, layout and buttons....
TypeScript Tutorial for Beginners
By Dhiraj , 20 January, 2018 8K