Interview Questions on .Net and Msbi Technologies

Binding Dropdown in Angular :

Add customer form adding dropdown code:

ngOnInit() {
this.addCustomerFormControls();
this.getAllCountryList();
}

getAllCountryList() {
this._commonService.getAllCountryList().subscribe(data => this.country = data);
}

addCustomerFormControls() {
this.addNewCustomerForm = new FormGroup({
'firstName' : new FormControl(null, [Validators.required, Validators.minLength(3)]),
'lastName' : new FormControl(null, [Validators.required, Validators.minLength(3)]),
'mobileNumber' : new FormControl(null, [Validators.required, Validators.maxLength(11), Validators.minLength(11)]),
'emailAddress' : new FormControl(null, [Validators.required, Validators.email,
Validators.pattern ('[^ @]*@[^ @]*') ]),
'addressLine1' : new FormControl(null, [Validators.required]),
'addressLine2' : new FormControl(null, [Validators.required]),
'countryId' : new FormControl('', [Validators.required]),
'postCode' : new FormControl(null, [Validators.required]),
});
}

html page:

<div class="col-md-2">
<label class="label" for="country">Country</label>
</div>
<div class="col-md-4">
<select class="dropdown" formControlName="countryId">
<option value="0">--Select--</option>
<option *ngFor="let countries of country"
value={{countries.countryId}}>
{{countries.countryName}}
</option>
</select>

<span *ngIf="!addNewCustomerForm.get('countryId').valid &&
addNewCustomerForm.get('countryId').touched"
class="alert alert-danger">
Please select Country Name !
</span>
</div>

--------------------------------------------------
Update Customer form

public country;
public customer;
errorMessage: any;
editCustomerForm: FormGroup;
customerId: any;
countryId: any[];

ngOnInit() {
this.editCustomerFormControls();
this.getAllCountryList();
this.customerId = this._route.snapshot.paramMap.get('id');
this.getCustomerDetailsByCustomerId(this.customerId);
}

getCustomerDetailsByCustomerId(customerId: number) {
this._customerService.getAllCustomersDetails(customerId).subscribe(data => this.customer = data);
}

editCustomerFormControls() {
this.editCustomerForm = new FormGroup({
'firstName' : new FormControl(null, [Validators.required, Validators.minLength(3)]),
'lastName' : new FormControl(null, ),
'mobileNumber' : new FormControl(null, [Validators.required, Validators.maxLength(11), Validators.minLength(11)]),
'emailAddress' : new FormControl(null, [Validators.required, Validators.email]),
'addressLine1' : new FormControl(null, [Validators.required]),
'addressLine2' : new FormControl(null, [Validators.required]),
'countryId' : new FormControl({disabled: true}, [Validators.required]),
'postCode' : new FormControl(null, [Validators.required
])
});
}

getAllCountryList()
{
this._commonService.getAllCountryList().subscribe(data=>this.country=data);
}

html page:

<div class="col-md-2">
<label class="label" for="districtId">Country</label>
</div>
<div class="col-md-4">
<input
type="text"
id="postCode"
formControlName="countryId"
[(ngModel)]= "customer.countryId"
[disabled]="true"
class="textBox">

</div>

-------------------------------------------------------------------------------------------------
AddCustomerComponent.ts
----------------------------------------------
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

import { CustomerService } from '../../services/customer.service';
import { CommonService } from '../../services/common.service';

import { Country } from '../../models/country.model';
import { Customer } from '../../models/customer.model';

import { Observable, Subscription } from 'rxjs';
import { Router } from '@angular/router';
@Component({
selector: 'app-add-customer',
templateUrl: './add-customer.component.html',
styleUrls: ['./add-customer.component.css']
})
export class AddCustomerComponent implements OnInit {
public country;
public customer: Customer;
errorMessage: any;
addNewCustomerForm: FormGroup;
constructor( private _customerService: CustomerService,
private _commonService: CommonService,
private _router: Router
) { }
ngOnInit() {
this.addCustomerFormControls();
this.getAllCountryList();

}
getAllCountryList() {
this._commonService.getAllCountryList().subscribe(data => this.country = data);
}
addCustomerFormControls() {
this.addNewCustomerForm = new FormGroup({
'firstName' : new FormControl(null, [Validators.required, Validators.minLength(3)]),
'lastName' : new FormControl(null, [Validators.required, Validators.minLength(3)]),
'mobileNumber' : new FormControl(null, [Validators.required, Validators.maxLength(11), Validators.minLength(11)]),
'emailAddress' : new FormControl(null, [Validators.required, Validators.email,
Validators.pattern ('[^ @]*@[^ @]*') ]),
'addressLine1' : new FormControl(null, [Validators.required]),
'addressLine2' : new FormControl(null, [Validators.required]),
'countryId' : new FormControl('', [Validators.required]),
'postCode' : new FormControl(null, [Validators.required]),
});
}

onSubmit() {
console.log(this.addNewCustomerForm);
if (!this.addNewCustomerForm.valid) {
return ;
}{
this._customerService.saveCustomer
(this.addNewCustomerForm.value).subscribe((data) => {
this.success() ;
this.addNewCustomerForm.reset();
this._router.navigate(['/']);
},
(error) => {
this.logError(error);
}
);
}

logError(error: any) {
alert('We are sorry..! We are not able to process your request');
}

success() {
alert('New Customer added successfully');
}
}

====================================================================

AddCustomerComponent.html

<br>

<div class="card-header bg-primary">Add Customer </div>

<label class="label" class="label" for="firstName">First Name</label>

</div>

<input type="text"

id="firstName"

formControlName="firstName"

class="textBox">

<span *ngIf="!addNewCustomerForm.get('firstName').valid && addNewCustomerForm.get('firstName').touched"

class="alert alert-danger">Please enter First Name !</span>

</div>

First Name is required.

</div>

</div>

<input type="text"

id="lastName"

formControlName="lastName"

class="textBox">

<span *ngIf="!addNewCustomerForm.get('lastName').valid && addNewCustomerForm.get('lastName').touched"

class="alert alert-danger">Please enter Last Name !</span>

</div>

<label class="label" for="mobileNo">Mobile Number</label>

</div>

<input type="text" id="mobileNumber"

formControlName="mobileNumber" class="textBox">

<span *ngIf="!addNewCustomerForm.get('mobileNumber').valid &&

addNewCustomerForm.get('mobileNumber').touched"

class="alert alert-danger">

Please enter Mobile Number !

</span>

</div>

<label class="label" for="emailId">Email Id</label>

</div>

<input type="text"

id="emailAddress"

formControlName="emailAddress"

class="textBox">

<span *ngIf="!addNewCustomerForm.get('emailAddress').valid &&

addNewCustomerForm.get('emailAddress').touched"

class="alert alert-danger">

Please enter Email Address !

</span>

</div>

<label class="label" for="addressLine1">Address Line1</label>

</div>

<input

type="text"

id="addressLine1"

formControlName="addressLine1"

class="textBox">

<span *ngIf="!addNewCustomerForm.get('addressLine1').valid &&

addNewCustomerForm.get('addressLine1').touched"

class="alert alert-danger">

Please enter Email Address !

</span>

</div>

<label class="label" for="addressLine2">Address Line2</label>

</div>

<input type="text"

id="addressLine2"

formControlName="addressLine2"

class="textBox">

<span

*ngIf="!addNewCustomerForm.get('addressLine2').valid &&

addNewCustomerForm.get('addressLine2').touched"

class="alert alert-danger">

Please enter Email Address Line2 !

</span>

</div>

<label class="label" for="country">Country</label>

</div>

<option value="0">--Select--</option>

<option *ngFor="let countries of country"

value={{countries.countryId}}>

</option>

</select>

<span *ngIf="!addNewCustomerForm.get('countryId').valid &&

addNewCustomerForm.get('countryId').touched"

class="alert alert-danger">

Please select Country Name !

</span>

</div>

<label class="label" for="postCode">Postcode</label>

</div>

<input

type="text"

id="postCode"

formControlName="postCode"

class="textBox">

<span *ngIf="!addNewCustomerForm.get('postCode').valid &&

addNewCustomerForm.get('postCode').touched"

class="alert alert-danger">

Please enter Postcode !

</span>

</div>

<button class="btn btn-primary" type="submit">Submit</button>

</div>

</form>

</div>

=====================================================================

UpdateComponent.ts

import { Component, OnInit } from '@angular/core';

import { Router, ActivatedRoute, Params } from '@angular/router';

import { FormGroup, FormControl,Validators } from '@angular/forms';

import { CustomerService } from '../../services/customer.service';

import { CommonService } from '../../services/common.service';

import { FlashMessagesService } from 'ngx-flash-messages';

@Component({

selector: 'app-edit-customer',

templateUrl: './edit-customer.component.html',

styleUrls: ['./edit-customer.component.css']

})

export class EditCustomerComponent implements OnInit {

public country;

public customer;

errorMessage: any;

editCustomerForm: FormGroup;

customerId: any;

countryId: any[];

constructor(

private _customerService: CustomerService,

private _commonService: CommonService,

private _router: Router,

private _route: ActivatedRoute,

private _flashMessagesService: FlashMessagesService

) { }

ngOnInit() {

this.editCustomerFormControls();

this.getAllCountryList();

this.customerId = this._route.snapshot.paramMap.get('id');

this.getCustomerDetailsByCustomerId(this.customerId);

}

getCustomerDetailsByCustomerId(customerId: number) {

this._customerService.getAllCustomersDetails(customerId).subscribe(data => this.customer = data);

}

onSubmit() {

console.log(this.editCustomerForm.value);

if (!this.editCustomerForm.valid) {

return;

}

this.customerId = this._route.snapshot.paramMap.get('id');

this._customerService.upDateCustomer(this.editCustomerForm.value, this.customerId).subscribe((data) => {

this.success() ;

this.editCustomerForm.reset();

this._router.navigate(['customer']);

(error) => {

this.logError(error);

}

);

}

editCustomerFormControls() {

this.editCustomerForm = new FormGroup({

'firstName' : new FormControl(null, [Validators.required, Validators.minLength(3)]),

'lastName' : new FormControl(null, ),

'mobileNumber' : new FormControl(null, [Validators.required, Validators.maxLength(11), Validators.minLength(11)]),

'emailAddress' : new FormControl(null, [Validators.required, Validators.email]),

'addressLine1' : new FormControl(null, [Validators.required]),

'addressLine2' : new FormControl(null, [Validators.required]),

'countryId' : new FormControl({disabled: true}, [Validators.required]),

// 'countryId' : new FormControl(null, [Validators.required]),

'postCode' : new FormControl(null, [Validators.required

])

});

}

logError(error: any) {

this._flashMessagesService.show('Unable to Update Customer!.', {

classes: ['alert', 'alert-danger'],timeout: 1000,

});

}

success() {

this._flashMessagesService.show('Unable to Update Customer!.', {

classes: ['alert', 'alert-info'], timeout: 1000,

});

}

getAllCountryList()

{

this._commonService.getAllCountryList().subscribe(data=>this.country=data);

}

--------------------------------------------------------------------------------------------------------------

UpdateCustomerComponent.html

Back to Customer

</div>

</a>

</div>

<div class="card-header bg-primary">Edit Customer </div>

<label class="label" class="label" for="firstName">First Name</label>

</div>

<span *ngIf="!editCustomerForm.get('firstName').valid && editCustomerForm.get('firstName').touched"

class="alert alert-danger">Please enter First Name !</span>

</div>

</div>

<span *ngIf="!editCustomerForm.get('lastName').valid && editCustomerForm.get('lastName').touched"

class="alert alert-danger">Please enter Last Name !</span>

</div>

<label class="label" for="mobileNo">Mobile Number</label>

</div>

<input type="text" id="mobileNumber"

formControlName="mobileNumber"

[(ngModel)]= "customer.mobileNumber"

class="textBox">

<span *ngIf="!editCustomerForm.get('mobileNumber').valid &&

editCustomerForm.get('mobileNumber').touched"

class="alert alert-danger">

Please enter Mobile Number !

</span>

</div>

<label class="label" for="emailId">Email Id</label>

</div>

<input type="text"

id="emailAddress"

[(ngModel)]= "customer.emailAddress"

formControlName="emailAddress"

class="textBox">

<span *ngIf="!editCustomerForm.get('emailAddress').valid &&

editCustomerForm.get('emailAddress').touched"

class="alert alert-danger">

Please enter Email Address !

</span>

</div>

<label class="label" for="addressLine1">Address Line1</label>

</div>

<input

type="text"

id="addressLine1"

formControlName="addressLine1"

[(ngModel)]= "customer.addressLine1"

class="textBox">

<span *ngIf="!editCustomerForm.get('addressLine1').valid &&

editCustomerForm.get('addressLine1').touched"

class="alert alert-danger">

Please enter Email Address !

</span>

</div>

<label class="label" for="addressLine2">Address Line2</label>

</div>

<input type="text"

id="addressLine2"

formControlName="addressLine2"

[(ngModel)]= "customer.addressLine2"

class="textBox">

<span

*ngIf="!editCustomerForm.get('addressLine2').valid &&

editCustomerForm.get('addressLine2').touched"

class="alert alert-danger">

Please enter Email Address Line2 !

</span>

</div>

<label class="label" for="districtId">Country</label>

</div>

<input

type="text"

id="postCode"

formControlName="countryId"

[(ngModel)]= "customer.countryId"

[disabled]="true"

class="textBox">

</div>

<label class="label" for="postCode">Postcode</label>

</div>

<input

type="text"

id="postCode"

formControlName="postCode"

[(ngModel)]= "customer.postCode"

class="textBox">

<span *ngIf="!editCustomerForm.get('postCode').valid &&

editCustomerForm.get('postCode').touched"

class="alert alert-danger">

Please enter Postcode !

</span>

</div>

<label class="label" for="country">Country</label>

</div>

<select class="dropdown" formControlName="countryId"

[ngModel]= "customer.countryId">

<option *ngFor="let countries of country"

value={{countries.countryId}}>

</option>

</select>

</div>

<label class="label" for="postCode">Postcode</label>

</div>

<input

type="text"

id="postCode"

formControlName="postCode"

class="textBox">

</div>

<button class="btn btn-primary" type="submit">Submit</button>

</div>

</form>

</div>

----------------------------------------------------------------------------------------------------------------

CustomerService.ts

----------------------------------------

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { map } from 'rxjs/operators';

import { Observable, Subject, pipe } from 'rxjs';

import { Customer } from '../models/customer.model';

@Injectable({

providedIn: 'root'

})

export class CustomerService {

myAppUrl: String = 'http://localhost:52406/api/Customer/';

myCommonAppUrl: String = 'http://localhost:51662/api/Common/';

private headers: HttpHeaders;

customer: Customer[];

constructor( private _http: HttpClient) {

}

getAllCustomerDetails(userId: number) {

return this._http.get(this.myAppUrl + 'CustomerDetails/' + userId)

.pipe(map(res => res));

}

saveCustomer(customer: Customer) {

customer.userId = 1;

return this._http.post(this.myAppUrl + 'Save', customer)

.pipe(map(response => response));

}

getAllCustomers(userId: number) {

return this._http.get(this.myAppUrl + 'CustomerDetails/' + userId)

.pipe(map(res => res ));

}

getAllCustomersDetails(customerId: number) {

return this._http.get(this.myAppUrl + 'GetCustomer/' + customerId).pipe(map(res => res ));

}

upDateCustomer(customer: Customer, customerId: number) {

customer.userId = 1;

customer.customerId = customerId;

return this._http.put(this.myAppUrl + 'Update', customer) .pipe(map(response => response));

}

deleteCustomer(customer: Customer, customerId: number) {

customer.userId = 1;

customer.customerId = customerId;

//return this._http.delete(this.myAppUrl + 'Update', customer) .pipe(map(response=>response));

}

https://jasonwatmore.com/post/2019/01/08/aspnet-core-22-role-based-authorization-tutorial-with-example-api

Interview Questions on .Net and MSBI

Pages

Men

rh

10/02/2019

Dotnet With Angular app examples

No comments :

Post a Comment