Angular Directives

1. Angular Basics

2. Angular Directive
In Angular, a directive is a special kind of component that extends the HTML by adding custom
behavior and syntax. Directives allow you to manipulate the Document Object Model (DOM), add
event listeners, and add or remove elements from the DOM.
There are three types of directives in Angular:
 Component Directives: Components are the most common type of directive in Angular and are
used to create reusable UI elements. They have a template, a class, and metadata that describe
how they should be used.
 Structural Directives: Structural directives are used to change the layout of the DOM. Examples
include ngIf, ngFor, and ngSwitch.
 Attribute Directives: Attribute directives are used to change the appearance or behavior of an
element. Examples include ngClass, ngStyle, and ngModel.
Directives are an integral part of Angular and are used to add functionality to your application and
make it more interactive. They allow you to abstract away complex logic and create reusable
components that can be easily shared across your application.

3. Component Directive
In Angular, a component directive is a reusable UI
element that is defined as a combination of a class, a
template, and metadata that describes how the
component should be used. Components define the
look and behavior of a UI element and can be easily
reused throughout your application.
Here is an example of a component directive in
Angular:

4. Component Directive
In this example, the component directive is defined using
the @Component decorator, which provides the
metadata for the component. The selector property of
the metadata is used to define a CSS selector that can be
used to include the component in the HTML template of
another component.
The template property defines the HTML template for
the component, and the styles property defines any
styles that should be applied to the component. The
component also has a class, MyComponent, which
defines the data and behavior for the component.
To use the component in your application, you would
include it in the template of another component:

5. Attribute Directive
In Angular, an attribute directive is a directive that changes the appearance or behavior of an
element. Attribute directives are used to add dynamic behavior to an element, such as changing its
style or handling an event.
Examples include ngClass, ngStyle, and ngModel.
 ngStyle :
In Angular, the ngStyle directive is used to dynamically set styles on an HTML element. It allows you
to bind a JavaScript object to an HTML element's style attribute, so that the styles are automatically
updated whenever the object changes.
Here is an example of using the ngStyle directive in Angular:

6. Attribute Directive
In this example, the ngStyle directive is used to bind an object with two properties, backgroundColor
and fontSize, to the style attribute of a div element. The values of the backgroundColor and fontSize
properties are used to set the background-color and font-size styles of the element, respectively.
To use this example in your application, you would define the backgroundColor and fontSize
properties in your component and bind them to the ngStyle directive:
To use this example in your application, you would define the backgroundColor and fontSize
properties in your component and bind them to the ngStyle directive:

7. Attribute Directive
This would render a yellow div element with a font size of 20 pixels. If you later change the values of
the backgroundColor or fontSize properties in your component, the styles of the div element would
be automatically updated to reflect the changes.

8. Attribute Directive

9. Attribute Directive

10. Attribute Directive
In Angular, the ngClass directive is used to dynamically set CSS classes on an HTML element. It allows
you to bind a JavaScript object or an expression to the class attribute of an element, so that the
classes are automatically updated whenever the object or expression changes.
Here is an example of using the ngClass directive with an object in Angular:

11. Attribute Directive

12. Attribute Directive

13. Structural Directive
 NgFor
The ngFor directive is used in Angular to render a list of items in a template. The directive is used with
a * (asterisk) symbol before the keyword ngFor, and it takes an expression that specifies the data
source and the local variable that will be used to reference each item in the list.
Here's an example of how you could use ngFor to display a list of names:

14. Structural Directive
 ngIf
The ngIf directive in Angular is used to conditionally render elements in the HTML template based on
a boolean expression. It allows you to display or hide an element based on the truthiness of an
expression.

15. Structural Directive
 ngSwitch
The ngSwitch directive in Angular is used to conditionally render elements in the HTML template
based on a switch expression. It allows you to choose one of several templates to display based on
the value of an expression.
Here is a simple example of how to use the ngSwitch directive:

16. Custom Directive
 custom Directive
Creating a custom directive in Angular is a simple process. You can use the @Directive decorator to
define a directive, and then you can use it in your HTML template.
Here is an example of a simple custom directive in Angular:

17. Custom Directive
This directive adds mouse event listeners to the
host element, which is the element the
directive is attached to, and sets the
background color to yellow when the mouse
enters and to null when the mouse leaves. The
directive can be used in your HTML template
like this:

18. Custom Directive
Parameterized Directive
In Angular, a parameterized directive is a
directive that accepts inputs or parameters
from the user to modify its behavior. This allows
for greater customization and reusability of the
directive.

19. Questions ?

20. Thank You