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.
In this article, we will learn more about automated testing in angular.
What is automated testing? It is type of testing software without humans with lesser time. It helps you to catch the defects before releasing the software.
How to write a test coding in angular? Before jumping into the test coding. Let see the different type of testing in angular.
Type of Testingin angular
Unit Testing (UT)
Integration Testing (IT)
End to End Testing (e2e)
Unit Testing Test a component in Isolation, without external resources (e.g. file system, database, API endpoints).
Easiest to write
Superfast
Don’t give us much confidence.
Integration Tests Test a component with external resources (e.g. file system, database, API endpoints) Integration tests: component + template Unit tests: component
End-to-end Tests
Test the entire application as a whole.
More confidence
Very slow
Very fragile
Let’s see the fundamental of Unit Testing Tests are first-class citizens.
Clean Coding Practices
Small functions/ methods (10 lines of code or less)
Use jasime javascript library to write the test code. Common function using in angular is describe() // suite it() // spec expect() // ecpected value
compute.spec.ts // test file
import {compute} from '.compute'
describe('compute', () =>{
it('should return O if input is negative', () => {
const result = compute(-1);
expect(result).toBe(0);
})
})
Run the code with “ng test compute”
As you can see in the above image "Executed 1 of 1 success".
Run the ng test command create a browser instantiated and show like below. Karma will connected.
angular karma listener
After click on debug and see it in the console will reply the same of the test result. You can save it in a file for your track.
debug angular
This is how Unit testing will write. In next article will see the integration testing and later end to end testing.
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.
import {FilterSearchModule} from 'ng-filter-search';
@NgModule({
imports: [
FilterSearchModule
]
})
step2: Import FilterSearchService to component.ts
import { Component } from '@angular/core';
import {FilterSearchService} from 'ng-filter-search';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public productList: any;
// productList must be a type any.
public cloner = [];
// searchMap is defined to which key to filter
public searchMap = ['name', 'price', 'sellerName', 'status'];
constructor(private fs: FilterSearchService){
// dummy productList you can load from your api
this.productList = [{
id: 1,
identity: 11012,
name: 'Blue Headset',
price: '$123',
sellerName: 'Alibaba',
count: 12,
status: 'Sold Out'
},
{
id: 2,
identity: 31012,
name: 'Red Shoe',
price: '$143',
sellerName: 'Amazon',
count: 2,
status: 'Available'
},
{
id: 3,
identity: 6423,
name: 'Red Shoe',
price: '$123',
sellerName: 'FlipKart',
count: 5,
status: 'Available'
},
{
id: 4,
identity: 64123,
name: 'Mi Phone',
price: '$1123',
sellerName: 'FlipKart',
count: 11,
status: 'Sold out'
},
{
id: 5,
identity: 86423,
name: 'Redmi pro',
price: '$223',
sellerName: 'Alibaba',
count: 9,
status: 'Available'
}];
// this.cloner is important to copy your productList
this.cloner = [...this.productList];
}
onSearchChange(sval: string): void {
// Use filterSearch() function to filter the data
this.productList = this.fs.filterSearch(sval, this.cloner, this.searchMap);
}
}
HTML
Table Filter search
<input placeholder="SEARCH FILTER" (input)="onSearchChange($event.target.value)" />
<table>
<thead>
<tr>
<th>#</th>
<th>Product Identity</th>
<th>Product Name</th>
<th>Product Price</th>
<th>Seller Name</th>
<th>Total Count</th>
<th>Status</th>
</tr>
</thead>
<tbody>
// productList is an array of an object from which we need to filter
<tr *ngFor="let product of productList; let i = index">
<td>{{i+1}}</td>
<td>{{product.identity}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.sellerName}}</td>
<td>{{product.count}}</td>
<td>{{product.status}}</td>
</tr>
</tbody>
</table>
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.
Sign Up form with validation in angular | ReactiveFormModule
In this article, we going to learn about how to create a signup form with validating client-side errors.
Overview:
Add ReactiveFormModule in module.ts
Create and Design component
Import FormBuilder in component.ts file
Add password validator
Add ReactiveFormModule in module.ts
Code: app.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { EcommerceRoutingModule } from './ecommerce-routing.module';
import { MainComponent } from './main/main.component';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [MainComponent],
imports: [
CommonModule,
BrowserModule,
EcommerceRoutingModule,
ReactiveFormsModule
],
bootstrap: [MainComponent],
})
export class EcommerceModule { }
Create and Design component
In terminal type: ng g c signup to create a new component for sign up. After created the component. you must add bootstrap for styling. If you don’t know how to add bootstrap in angular, then go to this article and check that once and come back.
If you need image which I used is fully free. Go to undraw.co , then click on illustration and search welcome cats. You can use anywhere its fully free vector image. you can have the option of download to both SVG and png. We can also change the color of the illustration as a need.
undraw.co
Code:signup.component.css
/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
.error{
position:absolute;
left:15px;
}
Then go to the important todo. Import form builder and validators to our sign up module.
The above file is important to the password validators to check password matches or not. Then run the code. I hope this will help. You can easily use this code for any project you want.
If any queries about this signup form. Please ping in the comment and I will help you to solve the error. Have a good day!