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 templates that tell Angular to attach a specified behavior to a DOM element or even transform the DOM element and its children. They are a key feature of Angular that allows you to create reusable components.

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:

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

You can use it in your HTML like this: <div highlight="yellow">This text will have a yellow 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 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 an Angular directive?

To test an Angular directive, you can use Angular's testing utilities along with Jasmine. You typically create a test suite that initializes the directive in a test component and then checks if it behaves as expected. Here's a simple example:

describe('Highlight Directive', function() {
    let $compile, $rootScope;

    beforeEach(module('app')); // replace 'app' with your module name
    beforeEach(inject(function(_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
    }));

    it('should change background color', function() {
        const element = $compile('<div highlight="blue"></div>')($rootScope);
        $rootScope.$digest();
        expect(element.css('background-color')).toBe('blue');
    });
});