Sunday, 21 June 2020

Create a component without spec file in Angular 9

How to Create a component without spec file in Angular 9?


In the angular 9 there are two ways to do this.

1. By using angular CLI command

Just use following commands to remove spec file for generate component

ng generate component componentname --spec=false;


2. or using Angular.json

just use following command

ng config schematics.@schematics/angular:component.spec false


it will create following section in angular.json

Monday, 18 February 2019

How to update a column value with Autoincrement value in SQL server

How to update a column value with Autoincrement value in SQL server


As a full stack developer many time we face we accidently create a column with some value or we want to add column in table and provide the value in it with auto increment to we can do it with following query


DECLARE @counter int
SET @counter = 0
UPDATE Your_Table_Name
SET @counter = your_table_column_name = @counter + 1


Example:
DECLARE @counter int
SET @counter = 0
UPDATE [Policy].[MasterBroker]
SET @counter = brokerId = @counter + 1

Wednesday, 26 December 2018

Error: No ‘Access-Control-Allow-Origin’ Header is Present – Origin ‘localhost:…’ is therefore not allowed access

If you are using .net web api and again and again you build your's project and run that you will see that your's runs on different port after running you will be get following error in console window

Error: No ‘Access-Control-Allow-Origin’ Header is Present – Origin ‘localhost:…’ is therefore not allowed access.



this is very comman issue which can stuck  the developer in web api 
you can remove this by just configure the Global.asax file in Application_BeginRequest section  

by the following code in which we just configure the header section of the service


protected void Application_BeginRequest(object sender, EventArgs e){
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin","*"")
}

How to dynamically add and remove the validators from angular reactive forms?

For the Angular Developer most of the computer and learner want to know how to dynamically add and remove the validation in reactive Forms:

So the Angular provide the 3 set of the methods which can be used for this.

1. setValidators()
2. clearValidators()
3. updateValueAndValidity()


setValidators: setting the validation on the control on which you want to apply on this

clearValidators: If user want to remove the existing validations from the control then he
can use this method.

updateValueAndValidity: this method is always use when you set or clear the validation in
angular reactive forms.

for applying all the above method first we find the control in our typescript file by
following way

suppose on my component here is the HTML part of the phone control

<label class="radio-inline">
<input type="radio" value="phone" (click)="onContactPreferenceChange('phone')" formControlName="contactPreference" >Phone
</label>

Now on the ts file we will find the phone control by following way
const phoneControl = this.employeeForm.get('phone');

after this according to our need we can add or clear the validation from the control.

Friday, 21 December 2018

How to find out how many data are in the colums are in the upper case in sql server

In Most of the interview, Interviewer asked write down a query to find out the how many rows have upper case data.


so here is the answer to crack this question in the interview.


select * from T(table_name)
  where fld(coloum_name) = upper(fld) collate SQL_Latin1_General_CP1_CS_AS
You can force to check the case sensitive collation.

Wednesday, 19 December 2018

what is best way to deal with set a value in ReactiveForm?

Most of the angular developer say the which is the best way to set a value of reactive form
1. setvalue() or patchValue()

In my opinion patchValue() is the best way to initialize the reactive form because if accidently developer miss to assign a value of field in reactive form user get the error with dealing with setValue() method.
on the other hand if we deal with patchValue() user can not get any type of error if he accidently miss to assign any fileld in the form.

Problem: Must supply a value for form control with name 'say xyz'

Most of the angular developer face the above problem when they are dealing with Reactive forms

"Must supply a value for form control with name /......"

this is because we donot provide the all field value that are in the reactive form and we are using the setValue method in angular.

this problem can be solved by two ways.
1. you can provide the value of all form control that you are using with reactive form.
2. or in your's case you want to provide the value for the some set of formcontrol then instead of using setValue() we can use patchValue() for loading the data

Problem: Can't bind to 'formGroup' since it isn't a known property of 'form'.

Can't bind to 'formGroup' since it isn't a known property of 'form'.


Most comman problem in angular is : 'Can't bind to 'formGroup' since it isn't a known property of 'form'.'

this is because formGroup and formControl directive are provided by angular reactiveform

and probably you did not include this is your's angular app. so first you include this in your's angular app so that this error is gone

so include the reactive form directive in your's app.component.module by following way

import { ReactiveFormsModule } from "@angular/forms";

and also include this in imports array so your's
app.module.ts would we look like this


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from "@angular/forms";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CreateEmployeeComponent } from './employee/create-employee.component';
import { ListEmployeesComponent } from './employee/list-employees.component';

@NgModule({
declarations: [
AppComponent,
CreateEmployeeComponent,
ListEmployeesComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


and also include the FormGroup and FormControl in your's component.ts
in my case it is create-employee.component.ts
have a look
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";
@Component({
selector: 'app-create-employee',
templateUrl: './create-employee.component.html',
styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {
employeeForm: FormGroup;
constructor() { }

ngOnInit() {
this.employeeForm = new FormGroup({
fullName: new FormControl(),
email: new FormControl()
})
}
onSubmit(): void {
console.log(this.employeeForm.value);
}

}

Now i can hope that your's error should be gone. enjoy......

AdSense

The Ultimate Guide to Interceptors: Understanding Their Power and Functionality

  The Ultimate Guide to Interceptors: Understanding Their Power and Functionality An interceptor is a service that can intercept HTTP reques...

Follow