Quick Contact


    MEAN Stack Transforming Response Data

    We learnt how to get data from the database in the previous section. We spoke about the map() method before, but we didn’t utilise it. The ID has yet to be utilised on the front-end. We have a problem that we have previously discussed. The problem was that we expected an id without an underscore on the front end, but our back-end data included an underscore.

    As a result, we’ll need to put up a system where the correct data is kept on the front end. On the front-end model, we can just rename id to _id and everything will function fine, but we’ll transform the data we get back from the server. To convert data, we’ll do the following steps:

    We’ll return to our service.ts file and utilise another function, pipe(), before the subscribe() method in the getPosts() function. We may use the pipe() method to include such an operator. Multiple operators can be piped together. The operator will be imported so that it can be used in the pipe() method. Because we’ll be using the map operator, we’ll import it from the rxjs package as follows:

    map from ‘rxjs/operators’ import;
    Component.Phtml File:-
    	< div class="row justify-content-center">
    	< div class="col-md-4 register-Person">
    	< !-- form card register -->
    	< div class="card-body">
    	< form [formGroup]="PersonForm" (ngSubmit)="onSubmit()">
    	< div class="form-group">
    	< label for="inputName">Name< /label>
    	< input class="form-control" type="text" formControlName="name">
    	< !-- error -->
    	< div class="invalid-feedback" *ngIf="submitted &&myForm.name.errors?.required">
    	            Name is required.
    	< /div>
    	< /div>
    
    	< div class="form-group">
    	< label for="inputEmail3">Email< /label>
    	< input class="form-control" type="text" formControlName="email">
    	< !-- error -->
    	< div class="invalid-feedback" *ngIf="submitted &&myForm.email.errors?.required">
    	            Enter your email.
    	< /div>
    	< div class="invalid-feedback" *ngIf="submitted &&myForm.email.errors?.pattern">
    	            Enter valid email.
    	< /div>
    	< /div>
    
    	< div class="form-group">
    	< label for="inputPassword3">Designation< /label>
    	< select class="custom-select form-control" (change)="updateProfile($event.target.value)"
    	formControlName="designation">
    	< option value="">Choose...< /option>
    	< option *ngFor="let PersonProfile of PersonProfile" value="{{PersonProfile}}">{{PersonProfile}}
    	< /option>
    	< /select>
    	< !-- error -->
    	< div class="invalid-feedback" *ngIf="submitted &&myForm.designation.errors?.required">
    	             Choose designation.
    	< /div>
    	< /div>
    
    	< div class="form-group">
    	< label for="inputVerify3">Mobile No< /label>
    	< input class="form-control" type="text" formControlName="phoneNumber">
    	< !-- error -->
    	< div class="invalid-feedback" *ngIf="submitted &&myForm.phoneNumber.errors?.required">
    	             Enter your phone number.
    	< /div>
    	< div class="invalid-feedback" *ngIf="submitted &&myForm.phoneNumber.errors?.pattern">
    	            Enter Numbers Only
    	< /div>
    	< /div>
    
    	@Component({
    	selector: 'app-Person-list',
    	templateUrl: './Person-list.component.html',
    	styleUrls: ['./Person-list.component.css']
    	})
    
    	export class PersonListComponent implements OnInit {
    
    	Person:any = [];
    
    	constructor(private apiService: ApiService) { 
    	this.readPerson();
    	  }
    
    	ngOnInit() {}
    
    	readPerson(){
    	this.apiService.getPersons().subscribe((data) => {
    	this.Person = data;
    	    })    
    	  }
    
    	removePerson(Person, index) {
    	if(window.confirm('Are you sure?')) {
    	this.apiService.deletePerson(Person._id).subscribe((data) => {
    	this.Person.splice(index, 1);
    	        }
    	      )    
    	    }
    	  }
    
    	}
    	TypeScript
    	To display Persons list open the src/app/components/Person-list/Person-list.component.html file and add the following code in it.
    
    	< div class="container">
    	< !-- No data message -->
    	< p *ngIf="Person.length<= 0" class="no-data text-center">There is no Person added yet!< /p>
    
    	< !-- Person list -->
    	< table class="table table-bordered" *ngIf="Person.length> 0">
    	< thead class="table-success">
    	< tr>
    	< th scope="col">Person ID< /th>
    	< th scope="col">Name< /th>
    	< th scope="col">Email< /th>
    	< th scope="col">Designation< /th>
    	< th scope="col">Phone No< /th>
    	< th scope="col center">Update< /th>
    	< /tr>
    	< /thead>
    	< tbody>
    	< tr *ngFor="let Person of Person; let i = index">
    	< th scope="row">{{Person._id}}< /th>
    	< td>{{Person.name}}< /td>
    	< td>{{Person.email}}< /td>
    	< td>{{Person.designation}}< /td>
    	< td>{{Person.phoneNumber}}< /td>
    	< td class="text-center edit-block">
    	< span class="edit" [routerLink]="['/edit-Person/', Person._id]">
    	< button type="button" class="btnbtn-success btn-sm">Edit< /button>
    	< /span>
    	< span class="delete" (click)="removePerson(Person, i)">
    	< button type="button" class="btnbtn-danger btn-sm">Delete< /button>
    	< /span>
    	< /td>
    	< /tr>
    	< /tbody>
    	< /table>
    	< /div>
    	

    Markup

    #11 Edit Persons Data in MEAN Stack Angualr 7 App

    In order to edit Persons data we need to add the following code in src/app/components/Person-edit/Person-edit.component.html file.

    
    	< div class="row justify-content-center">
    	< div class="col-md-4 register-Person">
    	< !-- form card register -->
    	< div class="card card-outline-secondary">
    	< div class="card-header">
    	< h3 class="mb-0">Edit Person< /h3>
    	< /div>
    	< div class="card-body">
    	< form [formGroup]="editForm" (ngSubmit)="onSubmit()">
    
    	< div class="form-group">
    	< label for="inputName">Name< /label>
    	< input class="form-control" type="text" formControlName="name">
    	< div class="invalid-feedback" *ngIf="submitted &&myForm.name.errors?.required">
    	               Name is required.
    	< /div>
    	< /div>
    	< div class="form-group">
    	< label for="inputEmail3">Email< /label>
    	< input class="form-control" type="text" formControlName="email">
    	< !-- error -->
    	< div class="invalid-feedback" *ngIf="submitted &&myForm.email.errors?.required">
    	               Enter your email.
    	< /div>
    	< div class="invalid-feedback" *ngIf="submitted &&myForm.email.errors?.pattern">
    	               Enter valid email.
    	< /div>
    	< /div>
    	@Component({
    	selector: 'app-Person-edit',
    	templateUrl: './Person-edit.component.html',
    	styleUrls: ['./Person-edit.component.css']
    	})
    
    	export class PersonEditComponent implements OnInit {
    	submitted = false;
    	editForm: FormGroup;
    	PersonData: Person[];
    	PersonProfile: any = ['Finance', 'BDM', 'HR', 'Sales', 'Admin']
    
    	constructor(
    	publicfb: FormBuilder,
    	privateactRoute: ActivatedRoute,
    	privateapiService: ApiService,
    	private router: Router
    	  ) {}
    
    	ngOnInit() {
    	this.updatePerson();
    	let id = this.actRoute.snapshot.paramMap.get('id');
    	this.getPerson(id);
    	this.editForm = this.fb.group({
    	name: ['', [Validators.required]],
    	email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')]],
    	designation: ['', [Validators.required]],
    	phoneNumber: ['', [Validators.required, Validators.pattern('^[0-9]+$')]]
    	    })
    	  }
    
    	  // Choose options with select-dropdown
    	updateProfile(e) {
    	this.editForm.get('designation').setValue(e, {
    	onlySelf: true
    	    })
    	  }
    
    	  // Getter to access form control
    	getmyForm() {
    	returnthis.editForm.controls;
    	  }
    
    	getPerson(id) {
    	this.apiService.getPerson(id).subscribe(data => {
    	this.editForm.setValue({
    	name: data['name'],
    	email: data['email'],
    	designation: data['designation'],
    	phoneNumber: data['phoneNumber'],
    	      });
    	    });
    	  }
    
    	updatePerson() {
    	this.editForm = this.fb.group({
    	name: ['', [Validators.required]],
    	email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')]],
    	designation: ['', [Validators.required]],
    	phoneNumber: ['', [Validators.required, Validators.pattern('^[0-9]+$')]]
    	    })
    	  }
    
    	< div class="form-group">
    	< label for="inputPassword3">Designation< /label>
    	< select class="custom-select form-control" (change)="updateProfile($event.target.value)"
    	formControlName="designation">
    	< option value="">Choose...< /option>
    	< option *ngFor="let PersonProfile of PersonProfile" value="{{PersonProfile}}">{{PersonProfile}}
    	< /option>
    	< /select>
    	< !-- error -->
    	< div class="invalid-feedback" *ngIf="submitted &&myForm.designation.errors?.required">
    	               Choose designation.
    	< /div>
    	< /div>
    
    	< div class="form-group">
    	< label for="inputVerify3">Mobile No< /label>
    	< input class="form-control" type="text" formControlName="phoneNumber">
    	< !-- error -->
    	< div class="invalid-feedback" *ngIf="submitted &&myForm.phoneNumber.errors?.required">
    	               Enter your phone number.
    	< /div>
    	< div class="invalid-feedback" *ngIf="submitted &&myForm.phoneNumber.errors?.pattern">
    	               Enter Numbers Only
    	< /div>
    	< /div>
    
    	< div class="form-group">
    	< button class="btnbtn-success btn-lgbtn-block" type="submit">Update< /button>
    	< /div>
    	< /form>
    	< /div>
    	< /div>< !-- form  -->
    	< /div>
    	< /div>
    	
    Markup

    To edit Persons data we need to add the following code in src/app/components/Person-edit/Person-edit.component.ts file.

    	import { Person } from './../../model/Person';
    	import { Component, OnInit } from '@angular/core';
    	import { ActivatedRoute, Router } from "@angular/router";
    	import { ApiService } from './../../service/api.service';
    	import { FormGroup, FormBuilder, Validators } from "@angular/forms";
    
    
    	@Component({
    	selector: 'app-Person-edit',
    	templateUrl: './Person-edit.component.html',
    	styleUrls: ['./Person-edit.component.css']
    	})
    
    	export class PersonEditComponent implements OnInit {
    	submitted = false;
    	editForm: FormGroup;
    	PersonData: Person[];
    	PersonProfile: any = ['Finance', 'BDM', 'HR', 'Sales', 'Admin']
    
    	constructor(
    	publicfb: FormBuilder,
    	privateactRoute: ActivatedRoute,
    	privateapiService: ApiService,
    	private router: Router
    	  ) {}
    
    	ngOnInit() {
    	this.updatePerson();
    	let id = this.actRoute.snapshot.paramMap.get('id');
    	this.getPerson(id);
    	this.editForm = this.fb.group({
    	name: ['', [Validators.required]],
    	email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')]],
    	designation: ['', [Validators.required]],
    	phoneNumber: ['', [Validators.required, Validators.pattern('^[0-9]+$')]]
    	    })
    	  }
    
    	  // Choose options with select-dropdown
    	updateProfile(e) {
    	this.editForm.get('designation').setValue(e, {
    	onlySelf: true
    	    })
    	  }
    
    	  // Getter to access form control
    	getmyForm() {
    	returnthis.editForm.controls;
    	  }
    
    	getPerson(id) {
    	this.apiService.getPerson(id).subscribe(data => {
    	this.editForm.setValue({
    	name: data['name'],
    	email: data['email'],
    	designation: data['designation'],
    	phoneNumber: data['phoneNumber'],
    	      });
    	    });
    	  }
    
    	updatePerson() {
    	this.editForm = this.fb.group({
    	name: ['', [Validators.required]],
    	email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')]],
    	designation: ['', [Validators.required]],
    	phoneNumber: ['', [Validators.required, Validators.pattern('^[0-9]+$')]]
    	    })
    	  }
    
    	onSubmit() {
    	this.submitted = true;
    	if (!this.editForm.valid) {
    	return false;
    	    } else {
    	if (window.confirm('Are you sure?')) {
    	let id = this.actRoute.snapshot.paramMap.get('id');
    	this.apiService.updatePerson(id, this.editForm.value)
    	          .subscribe(res => {
    	this.router.navigateByUrl('/Persons-list');
    	console.log('Content updated successfully!')
    	          }, (error) => {
    	console.log(error)
    	          })
    	      }
    	    }
    	

    We obtain our postData in the map method, and then do something with it in the body of the function. There will be no message: string, posts: Post[] in this postData. Because the ID is incorrect, it will not hold a legitimate post. Instead of type post[, we’ll change the type of posts to any as follows:

    The rxjs package will automatically encapsulate this into an observable, thus the subscribe method will still subscribe to an observable.

    We’ve already removed the message, but we still need to transform each post, which we’ll accomplish using the standard javascript technique. This map() method may be applied to any array, and we’ll utilise it like this:

    returnpostData.posts.map();
    app.component.ts File:-
    
    	import { Component } from '@angular/core';
    	import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    
    	@Component({
    	selector: 'app-root',
    	templateUrl: './app.component.html',
    	styleUrls: ['./app.component.scss']
    	})
    	< div class="container mt-5">
    
    	< h2>Angular Pattern URL Validation Example< /h2>
    
    	< form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate>
    	< div class="form-group">
    	< label>Enter URL< /label>
    	< input type="text" formControlName="url" class="form-control mb-2">
    
    	< div *ngIf="m.url.touched&&m.url.invalid" class="alert alert-danger">
    	< div *ngIf="m.url.errors?.required">Please provide url< /div>
    	< div *ngIf="m.url.errors?.pattern">Please provide valid url< /div>
    	< /div>
    	< /div>
    
    	< div class="d-grid mt-3">
    	< button class="btnbtn-dark" [disabled]="!myForm.valid" type="submit">Store< /button>
    	< /div>
    	< /form>
    	< /div>
    	export class AppComponent {
    	< div *ngIf="m.url.touched&&m.url.invalid" class="alert alert-danger">
    	< div *ngIf="m.url.errors?.required">Please provide url< /div>
    	< div *ngIf="m.url.errors?.pattern">Please provide valid url< /div>
    	< /div>
    	< /div>
    
    	< div class="d-grid mt-3">
    	< button class="btnbtn-dark" [disabled]="!myForm.valid" type="submit">Store< /button>
    	< /div>
    	< /form>
    	< /div>
    	export class AppComponent {
    	publicmyForm: FormGroup;
    
    	constructor(private formBuilder: FormBuilder) {
    	this.myForm = formBuilder.group({
    	url: ['', [Validators.required, Validators.pattern('(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?')]]
    	    })
    	  }
    
    	< div *ngIf="m.url.touched&&m.url.invalid" class="alert alert-danger">
    	< div *ngIf="m.url.errors?.required">Please provide url< /div>
    	< div *ngIf="m.url.errors?.pattern">Please provide valid url< /div>
    	< /div>
    	< /div>
    
    	< div class="d-grid mt-3">
    	< button class="btnbtn-dark" [disabled]="!myForm.valid" type="submit">Store< /button>
    	< /div>
    	< /form>
    	< /div>
    	export class AppComponent {
    	publicmyForm: FormGroup;
    	constructor(private formBuilder: FormBuilder) {
    	this.myForm = formBuilder.group({
    	url: ['', [Validators.required, Validators.pattern('(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?')]]
    	    })
    	  }
    
    	publicmyForm: FormGroup;
    	constructor(private formBuilder: FormBuilder) {
    	this.myForm = formBuilder.group({
    	url: ['', [Validators.required, Validators.pattern('(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?')]]
    	    })
    	  }
    
    	get m(){
    	returnthis.myForm.controls;
    	  }
    	onSubmit(){
    	console.log(this.myForm.value);
    	  }
    	}
    	

    The ngx-slider library is a fantastic tool that can be found in the node package management. It enables you to create a mobile-friendly, self-contained drag slider component in an Angular 6+ application.

    Drag single basic sliders, range sliders, ticks, vertical sliders, and dynamic option sliders are all possible. Furthermore, the drag ngx slider supports reactive forms and makes custom style a breeze.

    
    	returnpostData.posts.map(post=>{  
    	return{
    	title: post.title,  
    	content:post.content,  
    	id: post._id
    	    };  
    	});
    	

    Also, our subscribe code has to be updated. We simply substituted transformedPost for postData and allocated it to this.posts in the following manner:

    Code:-

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

    	@Component({
    	selector: 'app-root',
    	templateUrl: './app.component.html',
    	styleUrls: ['./app.component.scss']
    	})
    
    	export class AppComponent {
    
    	browserName = '';
    	browserVersion = '';
    
    
    	ngOnInit() {
    	this.browserName = this.detectBrowserName();
    	this.browserVersion = this.detectBrowserVersion();
    	  }
    	detectBrowserVersion(){
    	varuserAgent = navigator.userAgent, tem, 
    	matchTest = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    
    	if(/trident/i.test(matchTest[1])){
    	tem =  /\brv[ :]+(\d+)/g.exec(userAgent) || [];
    	return 'IE '+(tem[1] || '');
    	      }
    
    	if(matchTest[1]=== ‘Firefox'){
    	tem = userAgent.match(/\b(OPR|Edge)\/(\d+)/);
    	if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    	      }
    
    	matchTest= matchTest[2]? [matchTest[1], matchTest[2]]: [navigator.appName, navigator.appVersion, '-?'];
    
    	if((tem= userAgent.match(/version\/(\d+)/i))!= null) matchTest.splice(1, 1, tem[1]);
    	returnmatchTest.join(' ');
    
    
    	detectBrowserName() { 
    	const agent = window.navigator.userAgent.toLowerCase()
    	switch (true) {
    	caseagent.indexOf('edge') > -1:
    	return 'edge';
    	caseagent.indexOf('opr') > -1 && !!(window).opr:
    	return 'opera';
    	caseagent.indexOf('chrome') > -1 && !!(window).chrome:
    	return 'chrome';
    	caseagent.indexOf('trident') > -1:
    	return 'ie';
    	caseagent.indexOf('firefox') > -1:
    	return 'firefox';
    	caseagent.indexOf('safari') > -1:
    	return 'safari';
    	default:
    	return 'other';
    	    }
    	  }
    
    
    	detectBrowserVersion(){
    	varuserAgent = navigator.userAgent, tem, 
    	matchTest = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    
    	if(/trident/i.test(matchTest[1])){
    	tem =  /\brv[ :]+(\d+)/g.exec(userAgent) || [];
    	return 'IE '+(tem[1] || '');
    	      }
    
    	if(matchTest[1]=== 'Chrome'){
    	tem = userAgent.match(/\b(OPR|Edge)\/(\d+)/);
    	if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    	      }
    
    	matchTest= matchTest[2]? [matchTest[1], matchTest[2]]: [navigator.appName, navigator.appVersion, '-?'];
    
    	if((tem= userAgent.match(/version\/(\d+)/i))!= null) matchTest.splice(1, 1, tem[1]);
    	returnmatchTest.join(' ');
    	  }
    
    	detectBrowserVersion(){
    	varuserAgent = navigator.userAgent, tem, 
    	matchTest = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    
    	if(/trident/i.test(matchTest[1])){
    	tem =  /\brv[ :]+(\d+)/g.exec(userAgent) || [];
    	return 'IE '+(tem[1] || '');
    	      }
    
    	if(matchTest[1]=== 'Safari'){
    	tem = userAgent.match(/\b(OPR|Edge)\/(\d+)/);
    	if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    	      }
    
    	matchTest= matchTest[2]? [matchTest[1], matchTest[2]]: [navigator.appName, navigator.appVersion, '-?'];
    
    	if((tem= userAgent.match(/version\/(\d+)/i))!= null) matchTest.splice(1, 1, tem[1]);
    	returnmatchTest.join(' ');
    	detectBrowserVersion(){
    	varuserAgent = navigator.userAgent, tem, 
    	matchTest = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    
    	if(/trident/i.test(matchTest[1])){
    	tem =  /\brv[ :]+(\d+)/g.exec(userAgent) || [];
    	return 'IE '+(tem[1] || '');
    	      }
    
    	if(matchTest[1]=== 'Chrome'){
    	tem = userAgent.match(/\b(OPR|Edge)\/(\d+)/);
    	if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    	      }
    
    	matchTest= matchTest[2]? [matchTest[1], matchTest[2]]: [navigator.appName, navigator.appVersion, '-?'];
    
    	if((tem= userAgent.match(/version\/(\d+)/i))!= null) matchTest.splice(1, 1, tem[1]);
    	returnmatchTest.join(' ');
    	}ʼ’
    	

    After writing the login for detecting the browser name and version, the following step is to utilise interpolation to show the browser name and version.

    The double curly brackets are used to define an interpolation, which allows the user to bind a value to a UI element. In the title example, we’ll also utilise the angled pipe to convert the value.

    Test.html File:-
    	< h2>Contacts< /h2>
    	< p>
    	< a ng-click="vm.add()">Add new< /a>
    	< /p>
    
    	< div class="container">
    	< div class="row">
    	< div class="form-inline">
    	< div class="form-group">
    	< input type="text" name="firstName" class="form-control" placeholder="First name" ng-model="vm.search.firstName" />
    	< /div>
    
    	< div class="form-group">
    	< input type="text" name="middleName" class="form-control" placeholder="Middle name" ng-model="vm.search.middleName" />
    	< /div>
    
    	< div class="form-group">
    	< input type="text" name="lastName" class="form-control" placeholder="Last name" ng-model="vm.search.lastName" />
    	< /div>
    
    	< div class="form-group">
    	< select name="pageSize" class="form-control list-box" ng-model="vm.search.pageSize">
    	< option value="10" selected="selected">10< /option>
    	< option value="25">25< /option>
    	< option value="50">50< /option>
    	< option value="100">100< /option>
    	< /select>
    	< /div>
    	< div class="form-group">
    	< input type="text" name="middleName" class="form-control" placeholder="Middle name" ng-model="vm.search.middleName" />
    	< /div>
    
    	< div class="form-group">
    	< input type="text" name="lastName" class="form-control" placeholder="Last name" ng-model="vm.search.lastName" />
    	< /div>
    
    	< div class="form-group">
    	< select name="pageSize" class="form-control list-box" ng-model="vm.search.pageSize">
    	< option value="10" selected="selected">10< /option>
    	< option value="25">25< /option>
    	< option value="50">50< /option>
    	< option value="100">100< /option>
    	< /select>
    	< /div>
    
    	< div class="form-group">
    	< button type="button" class="btnbtn-primary glyphiconglyphicon-search" ng-click="vm.search();" />
    	< /div>
    	< /div>
    	< /div>
    	< /div>
    
    	< br />
    
    	< table class="table table-hover">
    	< tr>
    	< th>First name< /th>
    	< th>Middle name< /th>
    	< th>Last name< /th>
    	< th>Phone< /th>
    	< th>Email< /th>
    	< th>< /th>
    	< /tr>
    	< trng-repeat="contact in vm.contacts">
    	< td>{{ contact.firstName }}< /td>
    	< td>{{ contact.middleName }}< /td>
    	<  td>{{ contact.lastName }}< /td>
    	< td>{{ contact.phone }}< /td>
    	< td>{{ contact.email }}< /td>
    	< td>
    	< div class="dropdown">
    	< button class="btnbtn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
    	< span class="caret">< /span>< /button>
    	< ul class="dropdown-menu">
    	< li>< a ng-click="vm.details(contact._id)">Details< /a>< /li>
    	< li>< a ng-click="vm.remove(contact._id)">Remove< /a>< /li>
    	< div class="form-group">
    	< input type="text" name="middleName" class="form-control" placeholder="Middle name" ng-model="vm.search.middleName" />
    	< /div>
    
    	< div class="form-group">
    	< input type="text" name="lastName" class="form-control" placeholder="Last name" ng-model="vm.search.lastName" />
    	< /div>
    
    	< div class="form-group">
    	< select name="pageSize" class="form-control list-box" ng-model="vm.search.pageSize">
    	< option value="10" selected="selected">10< /option>
    	< option value="25">25< /option>
    	< option value="50">50< /option>
    	< option value="100">100< /option>
    	< /select>
    	< /div>
    
    	< div class="form-group">
    	< button type="button" class="btnbtn-primary glyphiconglyphicon-search" ng-click="vm.search();" />
    	< /div>
    	< /div>
    	< /div>
    	< /div>
    
    	< br />
    
    	< table class="table table-hover">
    	< tr>
    	< th>First name< /th>
    	< th>Middle name< /th>
    	< th>Last name< /th>
    	< th>Phone< /th>
    	< th>Email< /th>
    	< th>< /th>
    	< /tr>
    	< trng-repeat="contact in vm.contacts">
    	< td>{{ contact.firstName }}< /td>
    	< td>{{ contact.middleName }}< /td>
    	< td>{{ contact.lastName }}< /td>
    	< td>{{ contact.phone }}< /td>
    	< td>{{ contact.email }}< /td>
    	< td>
    	< div class="dropdown">
    	< button class="btnbtn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
    	< span class="caret">< /span>
    	< ul class="dropdown-menu">
    	< li>< a ng-click="vm.details(contact._id)">Details< /a>
    	< li>< a ng-click="vm.remove(contact._id)">Remove< /a>< /li>
    
    	< div class="form-group">
    	< button type="button" class="btnbtn-primary glyphiconglyphicon-search" ng-click="vm.search();" />
    	< /div>
    	< /div>
    	< /div>
    	< /div>
    
    	< br />
    
    	< table class="table table-hover">
    	< tr>
    	< th>First name< /th>
    	< th>Middle name< /th>
    	< th>Last name< /th>
    	< th>Phone< /th>
    	< th>Email< /th>
    	< th>< /th>
    	< /tr>
    	< trng-repeat="contact in vm.contacts">
    	< td>{{ contact.firstName }}< /td>
    	< td>{{ contact.middleName }}< /td>
    	< td>{{ contact.lastName }}< /td>
    	< td>{{ contact.phone }}< /td>
    	< td>{{ contact.email }}< /td>
    	< td>
    	< div class="dropdown">
    	< button class="btnbtn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
    	< span class="caret">< /span>< /button>
    	< ul class="dropdown-menu">
    	< li>< a ng-click="vm.details(contact._id)">Details< /a>< /li>
    	< li>< a ng-click="vm.remove(contact._id)">Remove< /a>< /li>
    	< /ul>
    	
    	<  /td>
    	< /tr>
    	< /table>
    	

    This file defines an AngularJS module and a route table; we use the same name pattern for the route table and singular for entities. We’ll put all injectable services for modules in the services directory, and in this instance, we’ll add the code to offer all API related activities in this service:

    	Controller javascript File:-
    	var module = angular.module("contactManager", [
    	    "ngRoute",
    	    "ngAnimate",
    	    "toaster"
    	]);
    
    	(function (app) {
    	app.config(function ($routeProvider) {
    	var base = "/views/";
    
    	        $routeProvider
    	            .when("/", {
    	templateUrl: base + "contact/index.html",
    	controller: "HomeController",
    	controllerAs: "vm"
    	            })
    	            .when("/contact/add", {
    	templateUrl: base + "contact/add.html",
    	controller: "ContactAddController",
    	controllerAs: "vm"
    	            })
    	(function (app) {
    	    "use strict";
    
    	app.service("RepositoryService", RepositoryService);
    
    	RepositoryService.$inject = ["$log", "$http"];
    
    	functionRepositoryService($log, $http) {
    	var svc = this;
    
    	varapiUrl = "/api";
    
    	svc.getContacts = getContacts;
    	svc.getContact = getContact;
    	svc.createContact = createContact;
    	svc.updateContact = updateContact;
    	svc.deleteContact = deleteContact;
    
    	functiongetContacts(fields) {
    	varqueryString = [];
    
    	if (fields.pageSize) {
    	queryString.push("pageSize=" + fields.pageSize);
    	            }
    
    	if (fields.firstName) {
    	queryString.push("firstName=" + fields.firstName);
    	            }
    	.when("/", {
    	templateUrl: base + "contact/index.html",
    	controller: "HomeController",
    	controllerAs: "vm"
    	            })
    	            .when("/contact/add", {
    	templateUrl: base + "contact/add.html",
    	controller: "ContactAddController",
    	controllerAs: "vm"
    	            })
    	(function (app) {
    	    "use strict";
    
    	app.service("RepositoryService", RepositoryService);
    
    	RepositoryService.$inject = ["$log", "$http"];
    
    	functionRepositoryService($log, $http) {
    	var svc = this;
    
    	varapiUrl = "/api";
    
    	svc.getContacts = getContacts;
    	svc.getContact = getContact;
    	svc.createContact = createContact;
    	svc.updateContact = updateContact;
    	svc.deleteContact = deleteContact;
    
    	functiongetContacts(fields) {
    	varqueryString = [];
    
    	if (fields.pageSize) {
    	queryString.push("pageSize=" + fields.pageSize);
    	            }
    
    	if (fields.firstName) {
    	queryString.push("firstName=" + fields.firstName);
    	            }
    
    	if (fields.middleName) {
    	queryString.push("middleName=" + fields.middleName);
    	            }
    
    	if (fields.lastName) {
    	queryString.push("lastName=" + fields.lastName);
    	            }
    
    	varurl = [apiUrl, "contact"].join("/");
    
    	varfullUrl = queryString.length == 0 ? url : [url, "?", queryString.join("&")].join("");
    
    	return $http.get(fullUrl);
    	        };
    
    	functiongetContact(id) {
    	return $http.get([apiUrl, "contact", id].join("/"));
    	        };
    
    	functioncreateContact(model) {
    	return $http.post([apiUrl, "contact"].join("/"), model);
    	        };
    
    	functionupdateContact(id, model) {
    	return $http.put([apiUrl, "contact", id].join("/"), model);
    	        };
    
    	functiondeleteContact(id) {
    	return $http.delete([apiUrl, "contact", id].join("/"));
    	        };
    	    };
    	})(angular.module("contactManager"));
    	            .when("/contact/details/:id", {
    	templateUrl: base + "contact/details.html",
    	controller: "ContactDetailsController",
    	controllerAs: "vm"
    	            })
    	            .when("/contact/edit/:id", {
    	templateUrl: base + "contact/edit.html",
    	controller: "ContactEditController",
    	controllerAs: "vm"
    	            })
    	.when("/", {
    	templateUrl: base + "contact/index.html",
    	controller: "HomeController",
    	controllerAs: "vm"
    	            })
    	            .when("/contact/add", {
    	templateUrl: base + "contact/add.html",
    	controller: "ContactAddController",
    	controllerAs: "vm"
    	            })
    	(function (app) {
    	    "use strict";
    
    	app.service("RepositoryService", RepositoryService);
    
    	RepositoryService.$inject = ["$log", "$http"];
    
    	functionRepositoryService($log, $http) {
    	var svc = this;
    
    	varapiUrl = "/api";
    
    	svc.getContacts = getContacts;
    	svc.getContact = getContact;
    	svc.createContact = createContact;
    	svc.updateContact = updateContact;
    	svc.deleteContact = deleteContact;
    
    	functiongetContacts(fields) {
    	varqueryString = [];
    
    	if (fields.pageSize) {
    	queryString.push("pageSize=" + fields.pageSize);
    	            }
    
    	if (fields.firstName) {
    	queryString.push("firstName=" + fields.firstName);
    	            }
    
    	if (fields.middleName) {
    	queryString.push("middleName=" + fields.middleName);
    	            }
    
    	if (fields.lastName) {
    	queryString.push("lastName=" + fields.lastName);
    	            }
    
    	varurl = [apiUrl, "contact"].join("/");
    
    	varfullUrl = queryString.length == 0 ? url : [url, "?", queryString.join("&")].join("");
    
    	return $http.get(fullUrl);
    	        };
    
    	functiongetContact(id) {
    	return $http.get([apiUrl, "contact", id].join("/"));
    	        };
    
    	functioncreateContact(model) {
    	return $http.post([apiUrl, "contact"].join("/"), model);
    	        };
    
    	functionupdateContact(id, model) {
    	return $http.put([apiUrl, "contact", id].join("/"), model);
    	        };
    
    	functiondeleteContact(id) {
    	return $http.delete([apiUrl, "contact", id].join("/"));
    	        };
    	    };
    	})(angular.module("contactManager"));
    	            .when("/contact/details/:id", {
    	templateUrl: base + "contact/details.html",
    	controller: "ContactDetailsController",
    	controllerAs: "vm"
    	            })
    	            .when("/contact/edit/:id", {
    	templateUrl: base + "contact/edit.html",
    	controller: "ContactEditController",
    	controllerAs: "vm"
    	            })
    
    	if (fields.middleName) {
    	queryString.push("middleName=" + fields.middleName);
    	            }
    
    	if (fields.lastName) {
    	queryString.push("lastName=" + fields.lastName);
    	            }
    
    	varurl = [apiUrl, "contact"].join("/");
    
    	varfullUrl = queryString.length == 0 ? url : [url, "?", queryString.join("&")].join("");
    
    	return $http.get(fullUrl);
    	        };
    
    	functiongetContact(id) {
    	return $http.get([apiUrl, "contact", id].join("/"));
    	        };
    
    	functioncreateContact(model) {
    	return $http.post([apiUrl, "contact"].join("/"), model);
    	        };
    
    	functionupdateContact(id, model) {
    	return $http.put([apiUrl, "contact", id].join("/"), model);
    	        };
    
    	functiondeleteContact(id) {
    	return $http.delete([apiUrl, "contact", id].join("/"));
    	        };
    	    };
    	})(angular.module("contactManager"));
    	            .when("/contact/details/:id", {
    	templateUrl: base + "contact/details.html",
    	controller: "ContactDetailsController",
    	controllerAs: "vm"
    	            })
    	            .when("/contact/edit/:id", {
    	templateUrl: base + "contact/edit.html",
    	controller: "ContactEditController",
    	controllerAs: "vm"
    	            })
    	            .when("/contact/remove/:id", {
    	templateUrl: base + "contact/remove.html",
    	controller: "ContactRemoveController",
    	controllerAs: "vm"
    	            });
    	    });
    	})(angular.module("contactManager"));
    	

    The sublime content or picture slider ngx-useful-swiper, aka Swiper, is used in contemporary platforms to generate a cyclic view carousel. Touch-based slider support is available in nearly every modern platform, including JavaScript, Angular, React, Vue, and Svelte.

    It provides with top-notch capabilities to boost carousel components; it requires no third-party jQuery or dependencies; it is free; and it supports full touch interactivity. It provides extensive API support, allowing mutation watchers to automatically reinitialize and recalculate key parameters in order to manage dynamic DOM changes. It is, above all, open-source and free to use.

    add.html code file:-
    	< h2>Create< /h2>
    
    	< form name="form" novalidateng-submit="vm.save()">
    	< div class="form-horizontal">
    	< h4>Contact< /h4>
    	< hr />
    
    	< div class="form-group" ng-class="{ 'has-error': form.firstName.$invalid }">
    	< label for="firstName" class="control-label col-md-2">First name< /label>
    	< div class="col-md-10">
    	< input type="text" name="firstName" class="form-control" required ng-model="vm.model.firstName" />
    	< span class="text-danger help-block" ng-show="form.firstName.$error.required">(*) Required< /span>
    	< /div>
    	< /div>
    	< div class="form-group" ng-class="{ 'has-error': form.firstName.$invalid }">
    	< label for="firstName" class="control-label col-md-2">First name< /label>
    	< div class="col-md-10">
    	< input type="text" name="firstName" class="form-control" required ng-model="vm.model.firstName" />
    	< span class="text-danger help-block" ng-show="form.firstName.$error.required">(*) Required< /span>
    	< /div>
    	< /div>
    
    	< div class="form-group">
    	< label for="middleName" class="control-label col-md-2">Middle name< /label>
    	< div class="col-md-10">
    	< input type="text" name="middleName" class="form-control" ng-model="vm.model.middleName" />
    	< /div>
    	< /div>
    
    	< div class="form-group" ng-class="{ 'has-error': form.lastName.$invalid }">
    	< label for="lastName" class="control-label col-md-2">Last name< /label>
    	< div class="col-md-10">
    	< input type="text" name="lastName" class="form-control" required ng-model="vm.model.lastName" />
    	< span class="text-danger help-block" ng-show="form.lastName.$error.required">(*) Required< /span>
    	< /div>
    	< /div>
    
    	< div class="form-group" ng-class="{ 'has-error': form.phone.$invalid }">
    	< label for="phone" class="control-label col-md-2">Phone< /label>
    	< div class="col-md-10">
    	< input type="text" name="phone" class="form-control" required ng-model="vm.model.phone" />
    	< span class="text-danger help-block" ng-show="form.phone.$error.required">(*) Required< /span>
    	< /div>
    	< /div>
    
    	< div class="form-group" ng-class="{ 'has-error': form.email.$invalid }">
    	< label for="email" class="control-label col-md-2">Email< /label>
    	< div class="col-md-10">
    	< input type="text" name="email" class="form-control" required ng-model="vm.model.email" />
    	< span class="text-danger help-block" ng-show="form.email.$error.required">(*) Required< /span>
    	< /div>
    	< /div>
    
    	< div class="form-group">
    	< label for="middleName" class="control-label col-md-2">Middle name< /label>
    	< div class="col-md-10">
    	< input type="text" name="middleName" class="form-control" ng-model="vm.model.middleName" />
    	< /div>
    	< /div>
    
    	< div class="form-group" ng-class="{ 'has-error': form.lastName.$invalid }">
    	< label for="lastName" class="control-label col-md-2">Last name< /label>
    	< div class="col-md-10">
    	< input type="text" name="lastName" class="form-control" required ng-model="vm.model.lastName" />
    	< span class="text-danger help-block" ng-show="form.lastName.$error.required">(*) Required< /span>
    	< /div>
    	< /div>
    
    	< div class="form-group" ng-class="{ 'has-error': form.phone.$invalid }">
    	< label for="phone" class="control-label col-md-2">Phone< /label>
    	< div class="col-md-10">
    	< input type="text" name="phone" class="form-control" required ng-model="vm.model.phone" />
    	< span class="text-danger help-block" ng-show="form.phone.$error.required">(*) Required< /span>
    	< /div>
    	< /div>
    
    	< div class="form-group" ng-class="{ 'has-error': form.email.$invalid }">
    	< label for="email" class="control-label col-md-2">Email< /label>
    	< div class="col-md-10">
    	< input type="text" name="email" class="form-control" required ng-model="vm.model.email" />
    	< span class="text-danger help-block" ng-show="form.email.$error.required">(*) Required< /span>
    	< /div>
    	< /div>
    
    	< div class="form-group">
    	< div class="col-md-offset-2 col-md-10">
    	< input type="submit" value="Save" ng-disabled="!form.$valid" class="btnbtn-primary" />
    	< a ng-click="vm.cancel()">Cancel< /a>
    	< /div>
    	< /div>
    	< /div>
    	< /form>
    	

    Now, we will save it and run our angular app on localhost:4200.

    Copyright 1999- Ducat Creative, All rights reserved.