Download our latest MNC Answers Application at Play Store. Download Now

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


Angular - Routes and Forms Fresco Play Handson Solutions

Disclaimer: Disclaimer: The primary purpose of providing this solution is to assist and support anyone who are unable to complete these courses due to a technical issue or a lack of expertise. This website's information or data are solely for the purpose of knowledge and education.
Make an effort to understand these solutions and apply them to your Hands-On difficulties. (It is not advisable that copy and paste these solutions).


Course Path: Modern Web Development/MV* FRAMEWORK/Angular - Routes and Forms

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'); }

}



If you have any queries, please feel free to ask on the comment section.

If you want MCQs and Hands-On solutions for any courses, Please feel free to ask on the comment section too.