How do I use directives in Angular?

How do I use directives in Angular?

In Angular, directives are special markers on a DOM element that tell Angular's HTML compiler to attach a specified behavior to that DOM element. You can create custom directives or use built-in ones like ngModel or ngFor.

Can you give me an example of a custom directive?

Sure! Here's a simple example of a custom directive that changes the background color of an element:

angular.module('myApp', [])
.directive('bgColor', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.css('background-color', attrs.bgColor);
        }
    };
});

You can use it in your HTML like this: <div bg-color="red">This div has a red background!</div>.

What are the different types of directives in Angular?

There are three main types of directives in Angular: 1) Component directives, which are the most common and define a new component; 2) Structural directives, which change the DOM layout by adding or removing elements (like ngIf, ngFor); and 3) Attribute directives, which change the appearance or behavior of an existing element (like ngClass, ngStyle).