How to create Angular Pipe Using CLI ?
You can use the following CLI command to create Pipe in your Angular project.
ng g pipe search
search is the name of the pipe. It creates a file called search.pipe.ts in your project.
Error Handling in JavaScript
How to handle error in JavaScript ?
You can handle error in JavaScript by adding a try and catch block.
try{
let k = 1/infinity;
} catch(e){
console.log('Error occured ', e);
}
Format Date Using Pipe | Angular
Format Date Using Pipe in Angular.
First you need to import DatePipe module file and add it to the providers array in your app.module.ts file.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { DatePipe } from '@angular/common'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule BrowserAnimationsModule ], providers: [DatePipe], bootstrap: [AppComponent] }) export class AppModule { } Create an instance of DatePipe in your component file.
[Read More]
Install Bootstrap in Next.js | React
Install Bootstrap in React App. Install Bootstrap in Next.js.
Recently, I started experimenting with Next.js framework for building web apps. Let’s see how to install bootstrap in Next.js.
Once you have created the Next.js app,
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter" Navigate to the project directory and install bootstrap using npm.
cd nextjs-blog npm install bootstrap jquery popper.js The above command installs bootstrap, jQuery and popper.js. Bootstrap requires jQuery and popper.
[Read More]
JSON as Table | Console
How to view JSON data as table?
It’s a lot easier to interpret data if it’s displayed in a tabular form. JSON data can be printed to the browser console as tabular data using the console.table method.
Let’s see that with the help of an example. https://jsonplaceholder.typicode.com/users returns a certain JSON data. Let’s print the data to the console using console.table.
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(json => console.table(json))
Pass Param to IIFE Function | JavaScript
Pass parameter to IIFE in JavaScript. You can pass paramter to IIFEE functions as shown:
let k = 500;
(function(param){
console.log('Paramerter is ', param);
})(k);
// "Paramerter is ", 500
Routing Without Changing URL | Angular
Routing Without Changing URL in Angular Using skipLocationChange.
In this video, you’ll learn how to route without changing the browser URL. You are going to make use of skipLocationChange to accomplish the same.
Set Default If Null or Undefined | Angular
With Angular 12 version you can use Nullish coalescing operator ?? in templates to set default values if value is null or undefined.
Here is your app.component.ts:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor(){} my_value = null; ngOnInit(){} } Here is how you can use Nullish coalescing operator ?? in template file app.component.html.
<div> {{my_value ?
[Read More]
Set Default Value For HTML Select
How to set default value for HTML dropdown select ?
This is your HTML dropdown with four options.
<select> <option>Value1</option> <option>Value2</option> <option>Value3</option> <option>Value4</option> </select> By default the Value is selected since it’s the first dropdown select option. To set another default value for the HTML select dropdown you can use the selected attribute to the respective select option.
<select> <option>Value1</option> <option>Value2</option> <option selected>Value3</option> <option>Value4</option> </select> Now since the Value3 has the selected attribute it will be selected by default.
[Read More]
Setting Up Angular Project From Scratch
Setting Up Angular Project From Scratch
To setup Angular project from scratch, first you need to have Node.js installed in your project. Once you have installed it you can check the version from command prompt.
node --version Node also installed npm(Node Package Manager). You can use npm to install the Angular CLI. From you command prompt, type in the following:
npm install -g @angular/cli To create a new project using the Angular CLI, from the command prompt type
[Read More]