some common regular expressions are below. If you find any errors comments below. I will correct my regex as soon as possible. If you need any regex for your work, just ping below. I will help you to solve it.
we will daily update all common regex soon. Please wait for a while. If you know or need any regular expression for your web development comment here. We will share our knowledge.
How to clear spawn EPERM at childProcess.spawn error in angular.
STEP1: Find the import statement in your whole project “ctrl + shift + F” in your terminal and search.
import { $ } from ‘protractor’;
If you find the above import protractor in your angular project, the child process of angular gets an error. Because you using “$” for jquery.
import { $ } from ‘protractor’ => it is used for end to end testing for angular application. so both get a conflict in your application. Remove the above code and instead add
Declare var $:any;
Remove this line => import { $ } from ‘protractor’; Add this line => Declare var $:any; Then run the project.
STEP 2:
If there is no protractor in your project. All code is fine then, Go to System Configuration in your windows
System configuration => General
Set to the normal setup and go to services
System Configuration => Services
Enable all services and click on Apply. It will prompt you to restart your computer. Just restart and check the now the error came. If issue clear comment below. Sharing the knowledge is the best thing! Thanks for reading.
Wanna download some paid Udemy courses “fully free”.
const str = '10';
const num = 5;
// This doesn't returnt the sum, its concatenated
str + num
// 105 (not correct)
//prepend string with "+" to calculate the sum
+str + num
// 15 (correct)
const word ='summer';
// old way
word.indexOf('sum') !=== -1 // true
// ES6 way
word.includes('sum');
Check the number is Negative or Positive
const num = -2;
// old ways
num === 0 ? num : (num > 0 ? 1 : -1) // -1
// ES6
Math.sign(num); // -1 if positive return 1
The standard naming pattern for boolean variable
// Non standard
const person = false;
const age = false;
cosnt dance = false
// Good standard
const isPerson = true;
const hasAge = true;
cosnt canDance = true
I hope this will helpful for most beginners as well as to everyone. Thanks for reading. If you know any tricks comment below.
Angular CDK has beautiful drag, drop, and sort facilities, but we only able to move only one at a time. So, I give a solution to move with multiple selections of lists.
https://youtu.be/p9VorqC3qCk
Angular CDK multi drag and drop with sorting video
Let see step by step from the package installation requirement.
npm i @angular/cdk
Step 1 – Next to import the needed module
import {DragDropModule} from ‘@angular/cdk/drag-drop’;
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {DragDropModule} from '@angular/cdk/drag-drop';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,FormsModule,CommonModule, DragDropModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I am using bootstrap jquery for Front End. If you don’t know how to import in angular. See this link.
Step 2 – Import some services like moveItemInArray, transferArrayItem form CDK drag-drop module.
import { CdkDragDrop, moveItemInArray, transferArrayItem } from ‘@angular/cdk/drag-drop’;
The above code has all functions like 1. ondragging() // drag started 2. drop() // on drop the dragged data 3. onKeyDown() // selection of list
We have a task list in the above example for Monday to Friday to assign the task.
ondragging() function doing when dragging the unselected element its check and added to the already item selected to drag. So when dropped if any selected item there will also be dropped into the container.
drop() function – It helps to drop the task in one container and remove the task from the previous container.
onKeyDown() function – It helps to select an item or deselect an item from the task list.
Important to know the details of 1. cdkDropListGroup 2. cdkDropList 3. [cdkDropListData] 4. (cdkDropListDropped) 5. cdkDrag 6. (cdkDragStarted)
cdkDropListGroup => If you add to the top of the drag-drop containers. It says any drop list can able to accept the dragging data. If you want to some container will accept only form particular then you can use [cdkDropListConnectedTo] . Its an array you can push the reference in to drop list connected.
cdkDropList => It says that the container will accept the dragging data.
[cdkDropListData] => You will add task list data into this.
(cdkDropListDropped) => It is an event triggering when dropping initiated.
cdkDrag => Which says that the elements are draggable.
(cdkDragStarted) => It is an event triggering when drag started.
Hi! we had solution for how to remove buttons from picklist in PrimeNg. Unfortunately PrimeNg picklist not having options to remove left and right side of buttons. So, here the solutions we provide.
Let’s see step by step from installation
npm install primeng primeicons –save
After install the packages of primeng, add styles to angular.json file.
You can get selected Users from selectedUserList:any and selectedGroupUserList:any. That’s it now you can able to move users from one list to another list. Hope it will help to you. Further queries below in comment section. Have a great day!.
To generate pdf from the client side with images. We need to convert the image to base 64. Let’s see how to convert images to base64 from our table data.
After that we applying to HTML. If you don’t want to show in HTML of pdf generation you can simply apply style display: none to the table but your table will generate in pdf.
Note: If you face any issue like the above image. This is just a CORS policy issue. This is about the image URL is not belongs to you. You don’t use the copyrighted image. Use your own image URL or some free lorem ipsum image URL.
Thanks for reading. I hope this will helpful to you. Have a nice day. If you have any queries your inputs are welcome in comment sections.
When we create an angular app from angular CLI, the main module as app.module.ts. But how to change that and learn about the flow of the angular application. In this article, we learn some basic errors too.
Errors we going to see here:
Error: No ErrorHandler is platform module browser module included
Error: The selector app-main did not match any element
Error: The module EcommerceModule was bootstrapped, but it does not declare “@NgModule.bootstrap” components nor a “ngDoBootstrap” method
Let’s start to create a new module. To create the main module manually. Go to Terminal type command to create a module with routing.
ng g m ecommerce –routing
ng – define angular
g – Generate
m – module
ecommerce – name of the module
–routing – define routing add to this module
ng generate module ecommerce –routing
Go to main.ts file and remove AppModule and add your newly created module. In my case, the module name is EcommerceModule.
Import <newModule> from ‘<path>‘;
import { EcommerceModule } from ‘./app/ecommerce/ecommerce.module’;
Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’. <form [formGroup]=”patientCategory”> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/app/select-option-default/select-option-default.component.ts:5:16 5 templateUrl: ‘./select-option-default.component.html’, ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component SelectOptionDefaultComponent
Error: Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’.
This error occurs due to not adding the Reactive form Module to your app.module.ts file.
Just add and Import ReactiveFormModule to your module file.