CS17505 – Question Bank – Unit 5 – Angular 4

Part A

1 Difference between Angular 4.0 and Angular JS.

AngularJS was based on the model view controller. Angular 2/4 - structure of Angular is based on
the components/services architecture. Angular 4 applications are smaller and faster when compared
to Angular2. It uses the TypeScript version 2.2, which makes the final compilation small in size.

2 What is the purpose of services in angular 4.0?

A service in Angular is a class which contains some functionality that can be reused across the
application.
3 List the default files in app component of angular 4.0.
app.component.css, app.component.html, app.component.spec.ts, app.component.ts
4 How to check if nodejs is installed in the system or not?
C:\node -v
5 Difference between ng-Class and ng-Style
ngStyle is used to set multiple inline styles for the HTML element.
ngClass is used to enable or disable a class in an element
6 What is mean Routing and how does it work in Angular 2/4?
Routing is navigation between multiple views in a single page (Menu items). It enables developers to
build Single Page Applications with multiple views and allow navigation between these views
7 What are Components in Angular 4?
Components are the most important basic UI building blocks for an Angular project. It is used to
design and build an application. Components are basically classes that interact with the .html file of
the component, which gets displayed on the browser.
8 How to share global data across components in Angular 4?
In Angular 4, services are used to communicate data between different components.
As one component could pass, the data to the service while another component could read from it.
Therefore, this data service could pass the data from one components to multiple components.

Part B

1. Explain about components and templates in Angular 4.0.

Components:
Components are the most important basic UI building blocks for an Angular project. It is used to
design and build an application. Components are basically classes that interact with the .html file of
the component, which gets displayed on the browser. A Component is a TypeScript class where we
can create our own methods and properties as per your requirement which is used to bind with a UI
(html page) of our application.
Default Components
1. app.component.css – Style sheet of a component
2. app.component.html – HTML web page view of a component
3. app. Component.spec.ts – Debug file used for unit testing
4. app.component.ts – class file to define modules, properties, etc
5. app.module.ts – to bind the components, directives, pipes and services which are related to
the application
Example: Refer PPT
Templates
Templates separates view layer from the rest of the framework. We can change the view layer
without breaking the application. We can define a template in two ways
Inline Template External Template

Component styling can be done in 3 different ways:

styleUrls metadata - external style sheet is added to component.ts file

styles metadata – Internal style added to component.ts

Inline style into template - <style> <style> tag added in component.html file

2. Write an angular 4 app folder and file structure with example.

Folder structure

e2e − end to end test folder. Mainly e2e is used for integration testing and helps ensure the
application works fine.
node_modules − The npm package installed is node_modules. You can open the folder and see the
packages available.
src − This folder is where we will work on the project using Angular 4.
File structure
.angular-cli.json − It basically holds the project name, version of cli, etc.
.editorconfig − This is the config file for the editor.
.gitignore − A .gitignore file should be committed into the repository, in order to share the ignore
rules with any other users that clone the repository.
karma.conf.js − This is used for unit testing via the protractor. All the information required for the
project is provided in karma.conf.js file.
package.json − The package.json file tells which libraries will be installed into node_modules when
you run npm install.

3. Write notes on in-built directives. Explain the steps to create custom directives with sample
code?
Directives are used to change the behavior of components or elements.
Types: 1. Component, 2. Structural and 3. Attribute Directive
Components Directive - Components are directives with a template or view. @Component
decorator is actually @Directive with templates. how the component should be processed,
instantiated and used at runtime.
Structural Directive - deals with manipulating DOM elements *directive-name = expression
(i) *ngIf - add/remove elements in DOM tree based on criteria
Ex: <div *ngIf="courses.length >0">List of Courses</div>
(ii) *ngFor – use for iterating the elements
<tr *ngFor='let c of cricketers let i=index’>  
<td>{{i+1}}</td>            
<td>{{c.name}}</td> <td>{{c.ODI}}</td>  
            <td>{{c.Test}}</td> 
</tr> 
(iii) *ngSwitch – used to check for matching cases.
<div [ngSwitch]="Pselection">  
<p *ngSwitchCase="'SG'">Sourav selected</p>  
<p *ngSwitchCase="'ST'">Sachin selected</p>  
<p *ngSwitchCase="'RD'">Rahul selected</p>  
<p *ngSwitchDefault>NO player selected</p>  
            </div> 
Attribute directive - is used to change/modify the behavior of the HTML element in the Dom
Layout. Types: ngStyle, ngClass
(i) ngStyle – ngStyle is used to set multiple inline styles for the HTML element.
ng-style="{color: 'red'}"

(ii) ngClass - Used to enable or disable a class in an element

<button [ngClass]="{'btn':isButton, 'btn-primary':isPrimary}"> Simple Button</button>

4. Compare template driven forms and reactive forms. Write the code to create a simple
template form with input tags having email id, password and the submit button.
Forms play an important role in web applications and enable the users to perform data entry task.
Template driven Forms - Used to create small to medium sized forms. Entire form validation is
done in HTML templates.
Model driven Forms or Ractive Forms - Used to create large size forms. Entire form validation is
done in Component class using FormBuilder and Validators classes.
<form #empform="ngForm" (ngSubmit)="abc(empform)" novalidate>
Email id <input type="text" name="fname" ngModel required ><br>
Password <input type="text" name="pwd" ngModel required ><br>
<button class="btn btn-primary" type="submit”'> Save </button>
</form>

5. What is the use of services in Angular 4? Write the step by step process to create a service
and create a function which will display today’s date.
A service in Angular is a class which contains some functionality that can be reused across the
application. Components use to display and present the data. Services use to fetch the data. We will
simply create a service and it will be used by the component where we want the data. Purpose of
service might be one of the following:
To write the business logic.
To provide shared data to the components.
To handle the external interactions, like to get the data from API.
How to create a service?
1. ng generate service (name of service)
Example: >ng generate service studentdata
It will create the following files.
studentdata.service.ts
studentdata.service.spec.ts
2. Now, import the service file into the app.module.ts file
import {StudentdataService} from './studentdata.service';
@NgModule({
providers: [StudentdataService],
})
3. Add some code to the studentdata.service.ts file. This file contains the data that we need to
consume. So this is service file. So this file provides services from frontend to backend.
4. Use services into the component app.component.ts
5. update the HTML app.component.html
Example: Refer PPT – slide 51

6. Explain about routing in angular 4.0

Routing is navigation between multiple views in a single page (Menu items). It enables developers to
build Single Page Applications with multiple views and allow navigation between these views.
Routing allows us to express some aspects of the application’s state in the URL. We can build the full
application without ever changing the URL.
Advantages
Maintain the state of the application
Implement modular applications
Implement the application based on the roles
Steps for Routing
1. Create a Angular Project with Routing – Y
2. Generate Components (Menu items) using ng generate component home
3. Configure routes
4. Add Buttons and use directives to navigate
Configure Routes app-routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { StudentsComponent } from './students/students.component';
import { HomeComponent } from './home/home.component';
import { CoursesComponent } from './courses/courses.component';

const routes: Routes = [
{path: 'home',component:HomeComponent},
{path: 'courses', component:CoursesComponent},
{path: 'students', component:StudentsComponent},  
{path: '',redirectTo:'/home', pathMatch:'full'} ];

export class AppRoutingModule { }
export const routingComponents=[HomeComponent,CoursesComponent,StudentsComponent]
app.component.html
<h1>welcome to Angular Routing</h1>
<ul>
        <li><a routerLink="/home">Home</a></li>
        <li><a routerLink="/courses">Courses</a></li>
        <li><a routerLink="/students">Students</a></li>     
</ul>
<router-outlet></router-outlet>