Angular Tutorial

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....

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....

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....

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....

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....

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....

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....

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....

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>....

Today we will learn about typescript and this tutorial provides fundamentals of typescript and try to cover most of the topics such as typescript variables, functions, enum, class, access modifiers, interface, typecasting, arrow functions and many more for beginners to get started with angular.Typescript is a superset of javascript and it adds optional static typing to javascript. You can do everything in typescript which you were doing in javascript.Typescript is free and open-source programming language developed and maintained by Microsoft.Typescript compiles based on ES5 which is supported by all browsers....

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....

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....

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....

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....

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 MatTableModule and mat-table directive.The data table will support pagination, sorting, filtering and row selection provided by MatPaginator and matSort in MatPaginatorModule and MatSortModule...

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....

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....