07. Angular Directives

Custom Directives in Angular A custom directive is a user-defined directive that allows developers to extend the functionality of HTML elements. The attribute and structural built-in directives (covered in previous two chapters) offers very basic and pre-defined functionalities. However, with custom directives, you can add specific behaviors to HTML elements based on project requirements, user interactions, or […]

What are Structural Directives? Structural directives change the structure of DOM by adding or removing elements at runtime. This type of Angular Directive is used to show or hide elements based on user authentication, render dynamic lists from APIs, or create interfaces like tabs and accordions that change based on user actions. The structural directives are applied to elements by […]

What are Attribute Directives? Attribute directives change the appearance or behavior of DOM elements or components. It is used just like a normal HTML attribute. However, the directive should be enclosed within square brackets [ ] to bind it to the element. Built-in Attribute Directives The most commonly used attribute directives are as follows − NOTE: To use ngStyle […]

Angular directives are classes that enhance the feature of a HTML element or component and add additional behavior to the web application. They can transform a static HTML page into dynamic by manipulating DOM. They begin with ng, which stands for Angular. The @directive decorator is used to mark a TypeScript class as an Angular Directive. This decorator contains some configuration metadata […]