Angular - Routes and Forms Hands-on Solution | TCS Fresco Play

All Question of the Quiz Present Below for Ease Use Ctrl + F to find the Question.

1.Welcome to Try it out - Angular Dependency Injection

Dependency Injection in Angular(30 min)

1.1 File Name: 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);

}

}

1.2 File Name: 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 : [];

});

}

}

2.Welcome to Try it out - Http in Angular

HTTP In Angular(30 Min)

2.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.2 File Name: 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 : [];

})

}

}

Use only the above two files code and check whether your code passes all test cases or not if it passes no need to write the below code else write this code also.

2.3 File Name: app.module.ts

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

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

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

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

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

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

@NgModule({

declarations: [

AppComponent,

ContactListComponent

],

imports: [

BrowserModule,

HttpClientModule

],

providers: [ContactService],

bootstrap: [AppComponent]

})

export class AppModule { }

3.Welcome to Try it out - Angular routing

Routing in Angular(120 Min)

3.1 File Name: 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>

3.2 File Name: app-routing.module.js

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.3 File Name: 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

//return of();

}

}

3.4 File Name: 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 : [];

})

}

}

3.5 File Name: 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 : [];

})

}

}

4.Welcome to Try it out - Angular Reactive Forms

Angular reactive forms question(30 min)

4.1 File Name: 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'); }

}