Server Side Pagination Using NodeJS, MongoDB and Angular Material Tables

Normally, we use Angular Material's data tables with pagination (mat-paginator) to list the results. This is not an efficient and optimal approach particularly if there are lots of records to show in the table. Angular Material's pagination just divides the received records into the paginated records. So, if we need to display lots of records in data tables, then the efficient and optimal approach is to use Server Side Pagination. Following, sections will demonstrate the server-side pagination using NodeJS (API), MongoDB (database), and Angular Material data tables. API using NodeJS and MongoDB Following is a sample code, written in NodeJS...
forward
#03 Components - Learn Angular 9 From Scratch with Junaid Hassan
#03 – Components – Learn Angular 9 From Scratch with Junaid Hassan

In this post, we will learn about components and how to create new components in an Angular 9 application using Angular CLI. We will create the required components for our application and will show how components can be used to organize the content of the application.

forward
#01 Introduction - Learn Angular From Scratch with Junaid Hassan
#01 – Introduction – Learn Angular 9 From Scratch with Junaid Hassan

In this post, we will learn: 1. What is Angular? 2. What are Single Page Applications (SPA’s)? 3. What are the prerequisites to create an angular application? 4. What is NodeJS and Node Package Manager (npm)? 5. What is Angular CLI?

forward

Profile Image Upload Functionality Using Angular and Node

In a recent project, I was working on a user profile component that can be used by the user to edit their profile information. A part of that component was a profile image section which lets the user change their profile picture. The profile picture is sent to the Node API via HTTP Post request, stored in a folder and then name/URL of the image is stored in the database. In this post, I will share the code on how to implement this functionality.

forward

Host Angular App and NodeJS App on Same Domain

In this tutorial, we will discuss the steps to host angular app (front-end) and NodeJS App (back-end API) on same domain. The idea is that we will have a folder named as ‘public’ in the root folder of the app which will have all files associated to the angular app.

forward

Get Started with Angular 8

Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile, and native desktop. https://angular.io/ Important Commands: npm install -g @angular/cling new hello-worldng build --prod (for generating production ready files)ng serve and the app is available at http://localhost:4200To create a component use the command ng g c courseTo create services use the command; ng g s service-nameng add @angular/material OR npm install --save @angular/material @angular/cdknpm install --save @angular/animationsnpm install --save hammerjsng add angular-bootstrap-md Core Angular Concepts: InterpolationProperty interpolationClass bindingStyle bindingEvent bindingTemplate reference variablesTwo way bindingStructural...
forward

How to Add Quill Editor in Angular Project

This post describes the steps to integrate Quill Editor in an angular project. Run the following commands in your angular project directory: npm install ngx-quill --save npm install quill --save Inside app.module.ts or any shared module import the QuillModule import { QuillModule } from 'ngx-quill'; Add the following in imports array: QuillModule, // inside app.module.ts or any shared module Add following in index.html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.min.css"> Now add the following where you want to display editor: <quill-editor></quill-editor> <!--replace existing text areas with this tag and rest will be handled by this-->...
forward

How to add Like/Love reactions in angular

This blog post describes step by step process to add like/love reactions in angular project. Step 1: Create a component by using the command ng g c e.g ng g c postReactions Step 2: <button (click)="incrementLove()"> love it{{post.loveCount}} </button> I have added a button in the html file of the post reactions component Step 3: On the blog page, we have a list of blog posts and we want to add post reactions in each post, so we have added the selector for post reactions at the bottom of each post inside the loop <app-post-reactions [postType]='posts' [post]='post'><br> </app-post-reactions> Also, you...
forward