Built-in Directives

 One of the most powerful features Angular provides is directives. Directives extend the
behavior of HTML, enabling you to create custom HTML elements, attributes, and
classes with functionality specific to an application.
 Angular provides many built-in directives, which provide the capability to interact with
form elements, bind data in a component to the view, and interact with browser events.
 Directives are a combination of Angular template mark-up and supporting Typescript
code.
 Angular directive markups can be HTML attributes, element names, or CSS classes.
The TypeScript directive code defines the template data and behavior of the HTML
elements.
 The Angular compiler traverses the template DOM and compiles all directives.

 Thenit links the directives by combining a directive with a scope to produce a new live
view. The live view contains the DOM elements and functionality defined in the
directive.

Built-in Directives
 Much of the Angular functionality that you need to implement in HTML elements is
provided through built-in directives.
 These directives provide a wide variety of support for Angular applications.
The following sections describe most of the Angular directives, which fall into three
categories:
1. Component: A directive with a template
2. Structural: A directive that manipulates elements in the DOM
3. Attribute: A directive that manipulates the appearance and behavior of a DOM
Element.

Components Directives
Angular components are a form of structural directive that utilize a template. A
component creates a selector that is used as an HTML tag to dynamically add HTML, CSS,
and Angular logic to the DOM. Components are at the heart of Angular.

Structural Directives
Several directives dynamically update, create, and remove elements from the DOM.

pg. 1
These directives create the layout, look, and feel of an application.

Directive Description
ngFor This directive is used to create a copy of a template for
each item 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
returns false, then that element is removed from the DOM,
preventing that element from using resources. Here is an
example:
<div *ngIf="person"></div>

ngSwitch This directive displays a template based on the value

passed in it. As with ngIf, if the value does not match the
case, the element 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
work: ngSwitchCase and ngSwitchDefault. These
directives 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
ngSwitchCase expressions evaluate to false. This ensures
that some HTML is generated no matter what.

 ngIf displays a section of HTML if a value or an expression returns true. ngIf uses the
* symbol to let Angular know it’s there. The following is an example of the syntax for
ngIf:
<div *ngIf="myFunction(val)" >...</div>
<div *ngIf="myValue" >{{myValue}}</div>
 ngSwitch uses ngSwitchCase, which displays a section of HTML if a value or an
expression returns true. ngSwitch is surrounded by [] as a form of one-waydata
binding to pass the data to each ngSwitchCase for evaluation. The following is an
example of the syntax for ngSwitch:
<div [ngSwitch]="time">
<span *ngSwitchCase="'night'">It's night time </span>
<span *ngSwitchDefault>It's day time </span>

pg. 2
Attribute Directives
 Angular attribute directives modify how HTML elements look and behave.
 They are injected straight into the HTML and dynamically modify how the user
interacts with an HTML segment. Attribute directives are so named because they
often look like normal HTML attributes.
 An example of an attribute directive that you’ve been using throughout the book is
ngModel, which modifies an element by changing the display value.

Directive Description
ngModel This directive watches a variable for changes
and then updates display values
based on those changes. Consider these
examples:
<input [(ngModel)]="text"><br>
<h1>{{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(formName)"> </form

ngStyle This directive updates the styles of an HTML

element.
ngClass This directive defines the specific CSS Class

The ng-app Directive

The ng-app directive defines the root element of an AngularJS application.
The ng-app directive will auto-bootstrap (automatically initialize) the application when a
web page is loaded.

The ng-init Directive

The ng-init directive defines initial values for an AngularJS application.

pg. 3
Normally, you will not use ng-init. You will use a controller or module instead.

The ng-model Directive

The ng-model directive binds the value of HTML controls (input, select,
textarea) to application data.

The ng-model directive can also:

 Provide type validation for application data (number, email, required).

 Provide status for application data (invalid, dirty, touched, error).
 Provide CSS classes for HTML elements.
 Bind HTML elements to HTML forms.

Example:
<html>
<head>
<title>AngularJS First Application</title>
</head>

<body>
<h1>Sample Application</h1>

<div ng-app = "">

<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
</div>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

</script>

</body>
</html>

pg. 4