# Research Angular Directives ### **What Are Directives in Angular**[**?**](https://www.simplilearn.com/why-learn-angular-career-benefits-of-angular-certification-article) [Angul](https://www.simplilearn.com/why-learn-angular-career-benefits-of-angular-certification-article)[ar](https://www.simplilearn.com/why-learn-angular-career-benefits-of-angular-certification-article) is the fourth (22.29%) [most us](https://www.simplilearn.com/why-learn-angular-career-benefits-of-angular-certification-article)ed web framework for front-end development using [HT](https://www.simplilearn.com/tutorials/html-tutorial/what-is-html)[ML an](https://www.simplilearn.com/tutorials/html-tutorial/what-is-html)d [typescri](https://www.simplilearn.com/tutorials/programming-tutorial/advanced-typescript)[pt programm](https://www.simplilearn.com/tutorials/programming-tutorial/advanced-typescript)ing lang[uage](https://www.simplilearn.com/tutorials/html-tutorial/what-is-html). Built by [Google in](https://www.simplilearn.com/tutorials/programming-tutorial/advanced-typescript) 2009, Angular is used for single-page applications (SPAs) that are lighter and faster, HTML templates, and components–driven dynamic applications. Popular websites written in Angular are Forbes, Microsoft Office Home, IBM, and Google Marketing Platform. Directives in Angular are a fun[damenta](https://www.simplilearn.com/why-learn-angular-career-benefits-of-angular-certification-article)l development concept. So, let’s take a detailed look at them. In Angular, Directive[s ar](https://www.simplilearn.com/tutorials/html-tutorial/what-is-html)e defi[ned as](https://www.simplilearn.com/why-learn-angular-career-benefits-of-angular-certification-article) [classes](https://www.simplilearn.com/tutorials/programming-tutorial/advanced-typescript) that can add new behavior to the elements in the template or modify existing [beha](https://www.simplilearn.com/tutorials/html-tutorial/what-is-html)vior. The [purpose of](https://www.simplilearn.com/tutorials/programming-tutorial/advanced-typescript) Directives in An[gular i](https://www.simplilearn.com/why-learn-angular-career-benefits-of-angular-certification-article)s to maneuver the DOM, be it by adding new elements to DOM or removing elements and e[ven](https://www.simplilearn.com/tutorials/html-tutorial/what-is-html) changing th[e appearan](https://www.simplilearn.com/tutorials/programming-tutorial/advanced-typescript)ce of the DOM elements. ### **What Is Meant By Directives in Angular?** Directives are meant to be a function that executes when found in the DOM by the Angular compiler to extend the power of the HTML with new syntax. Directives have a name and can be predefined or custom-defined so that they can be called anything. Depending on the predefined directive, its use is determined – attribute, comment, element, or class. ### **Types of Directives in Angular** Directive in angular can be categorized into the following types: Component Directive, Structural Directive, and Attribute directive. **Component Directive** Special directives in Angular are called Components since this type of directive has a template or template URLs. In effect, it is a component directive that shows something in DOM. **Structural Directive** This type of directive is used to make changes in the layout of the DOM. Elements can be added or removed, hence changing the structure of the DOM. An example would be *ngIf(adding or removing element from DOM) or* ngFor(lists elements of every iteration). **Attribute directive** This type of angular directive is used to make behavior or element changes in the appearance and behavior of an element. For example, ngStyle( applying styles) or ngClass(applying [CSS](https://www.simplilearn.com/tutorials/css-tutorial) classes). *ref:* [https://www.simplilearn.com/what-are-directives-in-angular-article#:~:text=In%20Angular%2C%20Directives%20are%20defined,appearance%20of%20the%20DOM%20elements](https://www.simplilearn.com/what-are-directives-in-angular-article#:~:text=In%20Angular%2C%20Directives%20are%20defined,appearance%20of%20the%20DOM%20elements). ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726564752639/fdbe62f0-7146-4783-a1d0-c3ce41f967e5.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726564799133/153ade31-5406-4c6f-9731-e33331f07e21.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726564824547/725ff573-73e6-4e38-89c6-7491ff6eeddc.png align="center") *ref:* [https://dev.to/chintanonweb/the-power-of-angular-directives-a-comprehensive-guide-3m0b#:~:text=Component%20directives%20are%20a%20cornerstone,into%20a%20single%20reusable%20unit](https://dev.to/chintanonweb/the-power-of-angular-directives-a-comprehensive-guide-3m0b#:~:text=Component%20directives%20are%20a%20cornerstone,into%20a%20single%20reusable%20unit). Angular Framework provides various concepts to leverage conditional rendering in applications of any size. In this post, I will give 5 short paragraphs about conditional rendering in the Angular framework. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726565759023/82db662d-1caa-4104-9722-4c29939d0844.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726565805648/fb0710d1-16db-4d5f-a5a4-2d667d4f6961.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726565858586/a1bc3f51-beed-4172-8c45-b1ef1fa93bc2.png align="center") ### **viewContainerRef.createComponent, viewContainerRef.createEmbeddedView** This approach allows you to load components in runtime dynamically. If you are creating a scalable application with heavy features it’s a MUST to apply. You can split your components into different strategy classes and define how to dynamically load your component in each separate class. The following is one of examples of dynamic loading: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726565943109/bdb8cf2f-0a37-402d-85fc-cd63dbd2b9ab.png align="center") With this approach, you can move all your rendering logic to the component class and make your HTML equal to a single line, only for projection. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726566011514/2089d860-2ffe-421c-8330-8d4f0a5a0768.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726566030747/90fdf1a5-aa18-488e-969b-cd992f17bab6.png align="center") *ref:* [https://akhromieiev.medium.com/5-strategies-for-conditional-rendering-in-angular-apps-1d7743ae8f2f](https://akhromieiev.medium.com/5-strategies-for-conditional-rendering-in-angular-apps-1d7743ae8f2f) ### **Component Directive** * **Definition**: A component is a directive with its own template (HTML view). It controls a section of the UI. * **Usage**: You use a component directive by adding its selector in HTML (e.g., ``). * **Example**: The `@Component` decorator marks a class as a component, which includes its HTML, styles, and logic ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726566356807/be2cb81b-69e5-4ae6-8f73-cece12412569.png align="center") ### **Attribute Directive** * **Definition**: An attribute directive changes the appearance or behavior of an element, component, or another directive. It does not create or remove DOM elements, but it alters the element it’s applied to. * **Usage**: Applied as an attribute to an existing element (e.g., `[ngClass]`, `ngStyle`). * **Example**: `ngClass` adds or removes CSS classes dynamically based on conditions. * ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726566449094/1572852a-e22e-47f3-8e8f-e72b845e88d7.png align="center") ### **Structural Directive** * **Definition**: A structural directive alters the DOM layout by adding or removing elements. It changes the structure of the DOM. * **Usage**: Applied with an asterisk (`*`) in front of the directive name, such as `*ngIf` and `*ngFor`. * **Example**: `*ngIf` conditionally includes or excludes a part of the DOM. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726566496008/5af90087-b730-4515-9857-0354af0ff308.png align="center")