UNIT – 5 ANGULAR

1. What are three major types of directives in Angular.

• Components:
• A component directive is a directive that incorporates an HTML template
with JavaScript functionality to create a self-contained UI element that can
be added to an Angular application as a custom HTML element.

• Components are likely to be the directives you use the most in Angular.
• Structural:
• You use structural directives when you need to manipulate the DON I.
Structural directives allow you to create and destroy e. Iements an
components from a view. d

• Attribute:
• An attribute directive changes the appearance and behaviour of fITML
elements by using HTML attributes.
2. Write down the important angular CLI commands.

ng eject Makes the webpack config files

available to be edited
ng generate component [name] ng g c [name] Creates a new component
ng generate directive [name] ng g d [name] Creates a new directive
ng generate module [name] ng g m [name] Creates a module
ng generate pipe [name] ng g p [name] Creates a pipe
ng generate service [name] ng g s [name] Creates a service
ng generate enum [name] ng g e [name] Creates an enumeration
ng generate guard [name] ng g g [name] Creates a guard
ng generate interface [name] ng g i [name] Creates an interface
3. What are the @Component decorator options?
• selector:
• This option allows you to define HTML tag name used to add component
to application via HTML.

• Template:
• This option allows you to add inline HTML to define look of component.
• This is for when there won't be very much code to add, and it's helpful for
when you don't want extra files.
• Templa t e Url:
• This option allows you to import an external template file rather than inline
HTML.
• This is helpful for separating a large amount of IIIML code out of a
component to help with maintainability.
• Styles:
• This option allows you to add inline to your component.
• Use it when only minor style changes are needed.
• Styles Urls:
• This option allows you to import an array of external CSS style
• You should use this rather than styles when importing external CS
• View Providers:
• This is an array of dependency injection providers.
• It allows you to import and use Angular services that provide application
functionality such as HTTP communications.
4. Brief about the Injecting directives in Angular.
✓ Idea ofAngular dependency injection is to define and dynamically inject a dependency
object into another object, which makes available all the functionality provided by
the dependency object.
• Angular provides dependency injection through the use ofproviders and an
injector service.
 • In Angular, to use dependency injection on another directive or component,
you need to add directive's or component's class name to declarations metadata
in @NgModule decorator within module for application, which takes in an
array of directives imported into your application.
5. What are the benefits of Angular Expression bound to data model?
• First, you can use the property names and functions that are defined in the
component inside your expressions.
• Second, because the expressions are bound to the component, when data in
the component changes, so do the expressions.
• For example, say that a component contains the tbllowing values:
name: string='Brad';
score: number=95;

6. How the Angular expressions arc differs from TypeScriptaavaScript

expressions?
• Attribute evaluation: Property names are evaluated against the component
model instead of against the global .lavaSeript namespace.
• More forgiving: Expressions do not throw exceptions when they encounter
undefined or null variable types; instead, they treat them as having no value
• No flow control: Expressions do not allow the following:
• Assignments (for example, =, +=, -=)
• The new operator
• Conditionals
• Loops
• Increment and decrement operators (++ and --)
• Also, you cannot throw an error inside an expression
7. List down the data binding types in Angular.
• Interpolation: You can use double curly braces ({ } }) to get values direct 13,
from Component class.
• Property binding: You can use this type ofbinding to set property of an HTML
element.
 • Event binding: You can use this type of binding to handle user inputs.
• Attribute binding: This type of binding allows the setting of attributes to an
HTML element.
• Class binding: You can use this type of binding to set CSS class names to
element.
• Style binding: You can use this type ofbinding to create inline CSS styles for
element.
• Two-way binding with ngModel: You can use this type of binding- with data
entry forms to receive and display data.
8. Brief about the Angular directives.
• Component: A directive with a template
• Structural: A directive that manipulates elements in the DOM
• Attribute: A directive that manipulates the appearance and behavior of a DOM
element
9. Brief about the structural directive and its behaviours.

Dire cti■ c Description

ngFor This directive is used to create a copy of a template for each within
an iterable object. Here is an example:
<div *ngFor-="let person of people"></div
ngIf When this directive is present in an element, that element is added to
the DOM if the value returns true. If the value re false, then that
element is removed from the DOM, preve that element from using
resources. Here is an example:

<div *ngIf="person"></div>
ngSwitch This directive displays a template based on the value passed As with
ngIf, if the value does not match the case, the eler is not created.
Here is an example:
<div [ngSwitch] ="timeOfDay">
<span [ngSwitchCase] =" 'morning' ">Morning</span>
<span [ngSwitchCase] =" 'afternoon' ">Afternoon</span>
<span [ngSwitchDefault] =" 'daytime' ">Evening</span>
The ngSwitch directive relies on two other directives to
ngSwitchCase and ngSwitchDefault. These directive are be explained
below.

ngSwitchCase This directive evaluates the value it has stored against the value passed
into ngSwitch and determines whether the HTML template it is
attached to should be created.
ngSwitchDefault This directive creates the HTML template if all the above ngS itchCase
expressions evaluate to false. This ensure that some HTML is
generated no matter what.

10. Define Angular framework.

❖ Angular is a popular open-source front-end web application framework

developed and maintained by Google and a community of individual developers and
corporations.

❖ It is designed to simplify the development of dynamic, single-page web

applications (SPAs) and provide a structured and organized way to build complex,
client-side applications.

11. What is TypeScript? State two advantages.

TypeScript is an open-source programming language developed and maintained
by Microsoft. It is a strict syntactical superset of JavaScript, which means that any
valid JavaScript code is also valid TypeScript code

1. Static Typing
2. Advanced Features and Tooling

12. What are the features of TypeScript?

1) Module System: TypeScript uses a module system that helps organize code into
reusable and maintainable units. It supports both CommonJS and ES6 modules.
2) IDE Support: Most popular integrated development environments (IDEs) and
code editors provide excellent support for TypeScript. Features like
autocompletion, type checking, and inline documentation enhance developer
productivity.

13. How to write a class in TypeScript?

class Person {

// Properties firstName:
string; lastName: string;
// Constructor

constructor(firstName: string, lastName: string) {

this.firstName = firstName;
this.lastName = lastName;
}

// Method getFullName(): string {

return `${this.firstName} ${this.lastName}`;

}
 }

// Creating an instance of the class

const person1 = new Person('John', 'Doe');

// Accessing properties and calling methods

console.log(person1.firstName); // Output: John
console.log(person1.getFullName()); // Output: John Doe

14.What is the use of ngModule in Angular?

❖ Angular modules consolidate components, directives and pipes into cohesive
blocks of functionality.

❖ For defining the module we use the ngModule.

❖ Every Angular application has at least one NgModule class, the root module,
which is conventionally named AppModule and resides in a file named
app.module.ts.

15.What are the two types of data bindings in Angular?

There are two types of data bindings-

1. Property binding: This type of binding allows to pass the interpolated values from
application data to HTML. The interpolated values are specified in
{{ and }} bracket pair. For instance - the student.name is interpolating value.

<p>Name: {{ student.name}}</p>
2. Event binding: Event binding is used to capture events on the user's end on the
app and respond to it in the target environment by updating the application data.

16.What is Directives?List the types of Directives?

Directives are JavaScript classes with metadata that defines the structure and behavior.
Directives provide the majority of UI functionality for Angular applications.
There are three major types of directives:

Components: A component directive is a directive that incorporates an HTML template

with JavaScript functionality to create a self-contained UI element that can be added to an
Angular application as a custom HTML element.
Components are likely to be the directives you use the most in Angular. Structural:.
Structural directives allow you to create and destroy elements and components from a
view.
Attribute: An attribute directive changes the appearance and behavior of HTML
elements by using HTML attributes.

17. What is Dependency Injection?

Dependency injection is a process in which a component defines dependencies on other

components. When the code is initialized, the dependent component is made available for
access within the component. Angular applications make heavy use of dependency
injection.

18. List the rules to implement Angular?

a. The view acts as the official presentation structure for the application. Indicate
any presentation logic as directives in the HTML template of the view.
b. If you need to perform any DOM manipulation, do it in a built-in or custom
directive JavaScript code—and nowhere else.
c. Implement any reusable tasks as services and add them to your modules by
using dependency injection.
d. Ensure that the metadata reflects the current state of the model and is the single
source for data consumed by the view.
e. Define controllers within the module namespace and not globally to ensure
that your application can be packaged easily and avoid overwhelming the
global namespace.
 19. List some Command Line Interface commands in Angular?

20. Brief about the attribute directive and its behaviours.

Directive Description
ngModel This directive watches a variable for changes and then updates display
value based on those changes. Consider these examples:
<input [(ngModel) ] = "text"><br>
<hl>{{text}}</h1>
ngForm This directive creates a form group and allows it to track the values and
validation within that form group. By using ngSubmit, you can pass the form
data as an object to the submission event. Here is an example:
<form #formName="ngForm" (ngSubmit) ="onSubmit (fo rmN ame)"> </

ngStyle This directive updates the styles of an HTML element.

21. Brief about the structural directive and its behaviours.

Dire cti■ c Description

ngFor This directive is used to create a copy of a template for each within
an iterable object. Here is an example:
<div *ngFor-="let person of people"></div
ngIf When this directive is present in an element, that element is added to
the DOM if the value returns true. If the value re false, then that
element is removed from the DOM, preve that element from using
resources. Here is an example:

<div *ngIf="person"></div>
ngSwitch This directive displays a template based on the value passed As with
ngIf, if the value does not match the case, the eler is not created.
Here is an example:
<div [ngSwitch] ="timeOfDay">
<span [ngSwitchCase] =" 'morning' ">Morning</span>
<span [ngSwitchCase] =" 'afternoon' ">Afternoon</span>
<span [ngSwitchDefault] =" 'daytime' ">Evening</span>
The ngSwitch directive relies on two other directives to
ngSwitchCase and ngSwitchDefault. These directive are be explained
below.

ngSwitchCase This directive evaluates the value it has stored against the value passed
into ngSwitch and determines whether the HTML template it is
attached to should be created.
ngSwitchDefault This directive creates the HTML template if all the above ngS itchCase
expressions evaluate to false. This ensure that some HTML is
generated no matter what.
22. List down the common structural directives is nglg a.nd ng Switch.

• nglf displays a section of HTML if a value or an expression returns true.

• nglf uses the * symbol to let Angular know it's there.
• Following is an example of the syntax for ngIf:
<div *ngIf="myFunction(val)" >...</div> <div *ngIf-
---"myValue" > { {myValue } } </div>

• Ng Switch uses ng Switch Case, which displays a section of HTML if a value

oran expression returns true.

• ngSwitch is surrounded by as a form of one-way data binding to pass the

data to eachng Switch Case for evaluation.

• Following is an example of the syntax for ng Switch:

<div [ngSwitch]="time">

<span *ngSwitchCase="'night"'>It's night time </span>

<span *ngSwitchDefault>It's daytime </span>
 LONG ANSWERS
1. Illustrate your understanding on Interface and Functions of typescript.
(Refer topic No.: 4.7.2& 4.7.5)
2. Explain about implementing classes and modules of t y p e s c r i p t .
(Refer topic No.: 4.7 .3 & 4.7 .4)
3. Illustrate in details about Angular Expression. (Refer topic No.: 4.9)
4. Describe in detail about Data binding. (Refer topic No.: 4.10)
5. Illustrate in detail about Structural and Attribute directives.
(Refer topic No.: 4.11.2 & 4.11.3)
16 mark
1. Illustrate your understanding on interface and functions of typescript in Angular. (K3)
2. Describe about implementing classes and modules of typescript in Angular.(K2)
3. Illustrate in detail about Angular Components.(K3)
4. Discuss in detail about Data Binding.(K2)
5. Summarise in detail about angular expression .(K2)
6. Illustrate in detail about Structural and attribute directives(K2) 4.11