Angular Lab Manual

Problem Statement What will you do? Create an Angular application. Create a component to inject a service into it. The component will also display the data provided by the service. The service will provide an array of employee details.

Solution What will be the steps steps to get the output? • Step-1: Create a service and provide an array of employees. • Step-2: Register the service. • Step-3: Create a component and inject the service into the component and utilize the array. • Step-4: Add the component to the main app module.

Code Open the command prompt and execute the command – • Create a service– ng g service EmployeeService • Define a function to return an array of employees in the service– import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' })

Code export class EmployeeService { constructor() { } getEmployees() { return [ { \"name\": \"Anil\", \"age\": 30 }, { \"name\": \"Sunita\", \"age\": 30 }, { \"name\": \"Sunil\", \"age\": 37 } ]; } }

Code • Register the service in the app.module.ts – import { EmployeeService } from './employee.service’; @NgModule({ providers: [EmployeeService] … • Create a component – ng g c test • Inject the service and call the function to receive the array of employees. Then, display the employees array as a list. import { Component, OnInit } from '@angular/core'; import { EmployeeService } from '../employee.service'; @Component({ selector: 'app-test',

Code template: ` <h3 align=left>List of Employees</h3> <ul *ngFor=\"let emp of employees\" align=left> <li>Name : {{emp.name}}</li> <li>Age : {{emp.age}}</li> </ul> `, styleUrls: ['./test.component.css'] })

Code export class TestComponent implements OnInit { public employees:any = [] constructor(private _employeeService: EmployeeService) { } ngOnInit(): void { this.employees = this._employeeService.getEmployees(); } } • Add the component in app.component.html – <app-test></app-test>

Output Output for the Adedxetercxitsheewreil:l- be :-

Learning Outcome After performing this Add teexxt ehrecries:e- You’ll be able to create and inject a service in your application.

Working With Observables

Problem Statement What will you do? Write a program to continuously update a component’s view with the current time using observables.

Solution What will be the steps steps to get the output? • Step-1: Define a simple component • Step-2: Use the async observable template • Step-3: Implement the async pipe to return the latest value emitted by the time observable.

Code @Component({ selector: 'async-observable-pipe', template: `<div><code>observable|async</code>: Time: {{ time | async }}</div>` }) export class AsyncObservablePipeComponent { time = new Observable<string>(observer => { setInterval(() => observer.next(new Date().toString()), 1000); }); }

Output Output for the Adedxetercxitsheewreil:l- be :- The component’s view will be continuously updated with the current time Will be displayed.

Learning Outcome After Performing this Add teExxt ehrecries:e- You’ll be able to write code to continuously update a component’s view with the current time using observables.

The Angular Component Router

Problem Statement What will you do? Write a program to define a route and implement it in an application.

Solution What will be the steps steps to get the output? • Step-1: Import RouterModule and Routes into your routing module. • Step-2: Define your routes in your Routes array. It will have two properties, one for defining the URL path and one for defining the component Angular should use for the path. • Step-3: Add your defined routes to your application.

Code CLI application routing module import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; // sets up routes constant where you define your routes @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

Code AppRoutingModule const routes: Routes = [ { path: 'first-component', component: FirstComponent }, { path: 'second-component', component: SecondComponent }, ];

Code Template with routerLink and router-outlet <h1>Angular Router App</h1> <nav> <ul> <li><a routerLink=\"/first-component\" routerLinkActive=\"active\" ariaCurrentWhenActive=\"page\">First Component</a></li> <li><a routerLink=\"/second-component\" routerLinkActive=\"active\" ariaCurrentWhenActive=\"page\">Second Component</a></li> </ul> </nav> <router-outlet></router-outlet>

Output Output for the Adedxetercxitsheewreil:l- be :- The routed views render in the <router-outlet>

Learning Outcome After Performing this Add teExxt ehrecries:e- You will be able to define a route and implement it in an application.

Happy Learning!