In this tutorial, you’ll learn how to render HTML page in express web application. I’ll start with creating a simple web app using express framework from very scratch.
Getting Started With Node Project Let’s start by create a project directory for our node web app. Create a folder called render_html. Navigate to the project directory and initialize the Node project by entering the required details.
mkdir render_htmlcd render_htmlnpm initOnce the project has been created and initialized you’ll be having a package.
[Read More]
In this tutorial, you’ll learn how to use leaflet in Angular web applications. From the official documentation,
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.
This tutorial assumes the reader to have a basic understanding of Angular web application development. You’ll start by creating an Angular web app and learn how to use Leaflet in Angular.
[Read More]
In this tutorial, you’ll learn about the JavaScript Array includes method. This method is used to check if an array contains or includes a particular value. Let’s have a look at an example:
let arr = [1,2,3,4,5]; if(arr.includes(3)) { console.log('item found') } else { console.log('item not found') } includes method also accepts an optional parameter to specify the index from which to search. By default, the index to search parameter is zero.
[Read More]
Remove Vertical Scroll Bar When Using 100vh Height
While trying to add a height of 100vh I was getting a vertical scroll bar. In this video tutorial, I’m trying to debug what’s causing it and how to fix it using CSS.
Image Source
Angular is a popular framework for app development, but its security standards can be tricky to understand. To ensure your applications are secure, you need to familiarize yourself with the most common security vulnerabilities and the latest security practices. Angular Ecosystem Security Overview Whether you are already using Angular or are considering using it, you should be aware of where this framework’s security stands. To start, it’s important to note that Angular falls under Google’s publicly available security guidelines.
[Read More]
How to unit test PrimeNG ConfirmDialog ConfirmationService.
Let’s say you are using the PrimeNG confirmDialog. Here is how your app.component.html looks:
<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog> <button (click)="confirm()" pButton icon="pi pi-check" label="Confirm"></button> Here is the app.component.ts file.
import { Component, OnInit } from '@angular/core'; import { ConfirmationService } from 'primeng/api'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [ConfirmationService] }) export class AppComponent implements OnInit { public confirmSuccess: any; public confirmReject: any; constructor(private confirmationService: ConfirmationService) { } ngOnInit() { } confirm() { this.
[Read More]
How to Use Angular Material Table or mat-table?
Getting Started You can follow the following steps to setup your Angular app with bootstrap and Angular material.
Set up Angular project from scratch Install Bootstrap to the Angular project Add Angular Material to the project Once you have the Angular app set up, you need to import the MatTableModule in the app.module.ts.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from '.
[Read More]
Getting the following error in Next.js - A required parameter (id) was not provided as a string in getStaticPaths
While using getStaticPath in Next.js pages I was getting the above error. Here is my method,
export async function getStaticPaths() { const res = await fetch('https://jsonplaceholder.typicode.com/users') const userList = await res.json() let params = userList.map((user:any) => { return { params: {id : user.id} } }) return { paths: params, fallback: false, } } The issue was user.
[Read More]
How to do server side redirect in Next.js application ?
Page Router If you are using page router then from inside your data fetching method you can return redirect.
export async function getServerSideProps(){ if(!userIsAuthenticated()){ // ## this will redirect to destination url return { redirect:{ permanent : false, destination : 'https://www.google.com' } } } } App Router If you are using App router in Next.js 13 then from inside your page you need to import redirect.
[Read More]
How to Make an API call from server side in Next.js using getServerSideProps
In this tutorial, you’ll see how you can make an API call from server side using getServerSideProps. Using getServerSideProps you can make an API call in the Next.js page during server side rendering.