Angular - Routes and Forms

-0.6 Credits -150 Miles

Hands-On Solutions:

 Http in Angular
1. contact.service.ts

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

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

import { Observable, of } from 'rxjs';

import { Contacts } from '../models/contacts';

// @Injectable({

// providedIn: 'root'

// })

export class ContactService {

url = 'http://www.mocky.io/v2/5c5d880f3200000e11220880';

constructor(

private http: HttpClient

){}
 getContacts(): Observable<Contacts> {

// make http request to the given url and fetch the contacts

return this.http.get<Contacts>(this.url);

2. contact-list.component.ts

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

import { ContactService } from 'src/app/services/contact.service';

import { Contacts } from 'src/app/models/contacts';

@Component({

selector: 'app-contact-list',

templateUrl: './contact-list.component.html',

styleUrls: ['./contact-list.component.css']

})

export class ContactListComponent implements OnInit {

contacts: any;

constructor( private contactService : ContactService

){}

ngOnInit() {

// call your service, and assign its response to contacts variable

 this.contactService.getContacts().subscribe( data => {

this.contacts = data ? data.contactsList : [];

})

3. app.module.ts

import { BrowserModule } from '@angular/platform-browser';

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

import { HttpClientModule } from '@angular/common/http';

import { ContactService } from 'src/app/services/contact.service';

import { AppComponent } from './app.component';

import { ContactListComponent } from './components/contact-list/contact-list.component';

@NgModule({

declarations: [

AppComponent,

ContactListComponent

],

imports: [

BrowserModule,

HttpClientModule

],

providers: [ContactService],

bootstrap: [AppComponent]
})

export class AppModule { }

 Routing Angular
 1. app.component.html

<p class="title"> Contact Applications </p>

<!-- redirect the following links to appropriate routes -->

<p class="menus">

<a routerLink="/contacts" > <span class="menu-item" routerLinkActive="menu-item-

active" id="contact-link"> Contacts </span> </a>

<a routerLink="/cities" > <span class="menu-item" routerLinkActive="menu-item-active"

id="cities-link"> Cities </span> </a>

</p>

<div *ngFor = "let c of contacts">

<h3> {{ c.city}} </h3>

<p> {{c.name}} </p>

</div>

<router-outlet></router-outlet>
 2. app-routing.module.ts

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

import { Routes, RouterModule } from '@angular/router';

import { ContactsComponent } from './components/contacts/contacts.component';

import { CityComponent } from './components/city/city.component';

export const routes: Routes = [

{path:'contacts',component:ContactsComponent},

{path:'cities',component:CityComponent}

];

@NgModule({

imports: [RouterModule.forRoot([])],

exports: [RouterModule]

})

export class AppRoutingModule { }

3. contact.service.ts

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

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

import { Contacts } from '../models/contacts';

import { Observable, of } from 'rxjs';

// @Injectable({

// providedIn: 'root'

// })

export class ContactService {

url = `http://www.mocky.io/v2/5c5d880f3200000e11220880`;

constructor( private http:HttpClient

){}

getContacts(): Observable<Contacts> {

return this.http.get<Contacts>(this.url);

// get contacts from the above url

// const contacts = this.http.get<Contacts>(this.url);

//return of(this.contacts);

4.city.component.ts

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

import { ContactService } from 'src/app/services/contact.service';

import { Contact, Contacts } from 'src/app/models/contacts';

@Component({

selector: 'app-city',

templateUrl: './city.component.html',

styleUrls: ['./city.component.css']

})

export class CityComponent implements OnInit {

contacts: Contact[] = [];

constructor( private contactService : ContactService

){}

ngOnInit() {

// call your service and assign response to contacts

this.contactService.getContacts().subscribe( data => {

this.contacts = data ? data.contactsList : [];

})

5. contacts.ts (Interface already in that)

export interface Contacts {

contactsList: Contact[];
}

export interface Contact {

id: number;

name: string;

city: string;

5. contacts.component.ts

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

import { ContactService } from '../../services/contact.service';
import { Contacts, Contact } from 'src/app/models/contacts';

@Component({
selector: 'app-contacts',
templateUrl: './contacts.component.html',
styleUrls: ['./contacts.component.css']
})
export class ContactsComponent implements OnInit {

contacts: Contact[];
constructor( private contactService : ContactService

){}
 ngOnInit() {

// call your service and assign response to contacts

this.contactService.getContacts().subscribe( data => {

this.contacts = data ? data.contactsList : [];

})

}
 Dependency Injection in Angular
1. contact.service.ts

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

import { of, Observable } from 'rxjs';

import { Contacts } from '../models/contacts';

export class ContactService {

contacts = {

'contactsList': [

{'id': 1, 'name': 'Rajesh', 'city': 'bangalore'},

{'id': 2, 'name': 'Aarjith', 'city': 'london'},

{'id': 3, 'name': 'Anjan', 'city': 'california'},

{'id': 4, 'name': 'David', 'city': 'delhi'}

};
 constructor(

){}

getContacts(): Observable<Contacts> {

// send contacts to subscriber

return of(this.contacts);

2.contact-list.component.ts

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

import { ContactService } from 'src/app/services/contact.service';

@Component({

selector: 'app-contact-list',

templateUrl: './contact-list.component.html',

styleUrls: ['./contact-list.component.css']

})

export class ContactListComponent implements OnInit {

contacts : any ;

constructor(

private contactService: ContactService

){}
 ngOnInit() {

// get contacts from service and assign it to contacts

this.contactService.getContacts().subscribe( data => {

this.contacts = data ? data.contactsList : [];

});

}
  Angular Reactive Forms

1. app.component.ts

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

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

/** create a form (contactForm) with following controls/groups and validations

* - name: control, valiations: required

* - phone: control, validations: required, number of 10 digits

* - address: group

* - street: control

* - city: control

* - zip: number of 6 digits

*/

contactForm = new FormGroup({

name: new FormControl(null,[

Validators.required]),

phone: new FormControl(null,[

Validators.required,

Validators.pattern("^[0-9]*$"),

Validators.minLength(10),

Validators.maxLength(10)]),

address: new FormGroup({

 street: new FormControl(null),

city: new FormControl(null),

zip: new FormControl(null,[

Validators.minLength(6),

Validators.maxLength(6),

Validators.pattern('^[0-6]*$')])

})

});

onSubmit() {

console.log('form value =>', this.contactForm.value);

get name() { return this.contactForm.get('name'); }

get phone() { return this.contactForm.get('phone'); }

get zip() { return this.contactForm.controls['address'].get('zip'); }