What are Angular directives and how do I use them?

What are Angular directives and how do I use them?

Angular directives are special markers in your HTML that tell Angular to attach a specified behavior to that DOM element or even transform the DOM element and its children. They are used to create reusable components and enhance the functionality of your application.

Can you give me an example of a custom directive?

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

app.directive('colorChange', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.css('color', attrs.colorChange);
        }
    };
});

You can use it in your HTML like this: <div color-change="red">This text will be red!</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 create a new component; 2) Structural directives, which change the DOM layout by adding or removing elements (like *ngIf and *ngFor); and 3) Attribute directives, which change the appearance or behavior of an existing element.

How do I test directives in Angular?

You can test directives in Angular using Jasmine and Karma. You typically create a test suite that initializes the directive and checks its behavior. For example, you can use TestBed to create a testing module and then check if the directive behaves as expected.