{"id":7445,"date":"2018-06-13T14:32:58","date_gmt":"2018-06-13T14:32:58","guid":{"rendered":"https:\/\/www.cmarix.com\/blog\/?p=7445"},"modified":"2026-04-13T09:32:25","modified_gmt":"2026-04-13T09:32:25","slug":"9-most-popular-directives-used-in-angular-development","status":"publish","type":"post","link":"https:\/\/www.cmarix.com\/blog\/9-most-popular-directives-used-in-angular-development\/","title":{"rendered":"9 Most Popular Directives Used In Angular Development"},"content":{"rendered":"<p>There is no doubt that Angular is the most popular TypeScript framework. While developing one of the applications, you came across a situation where you had to add a reusable and independent functionality on a DOM element that could easily be done using JQuery<strong>. <\/strong>However, since the <a href=\"https:\/\/www.cmarix.com\/angular-development.html\">Angular web application<\/a> was being developed, the best practice was to stick to that only, which was made easy with the Angular &#8220;Directive&#8221; tool.<\/p>\n<p><a href=\"https:\/\/angular.io\/api\/core\/Directive\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Directives<\/a> are an essential part of Angular. They are the fundamental building blocks of Angular web applications. A directive is an attribute that changes the behavior or the appearance of an element. They are similar to other HTML attributes. Directive modifies the DOM to improve appearance, behavior or layout of DOM elements. When templates are rendered by angular, their DOM is transformed by following instructions which are provided by directives. Directive classes use the @Directive decorator. Angular built-in directives cover a wide range of functionality that will result in more effective solutions.<\/p>\n<p>In Angular, there are three types of directives those are component directive, attribute directive and structural directive.<\/p>\n<ul>\n<li>\n<h4>Component directive<\/h4>\n<\/li>\n<\/ul>\n<p>A component directive is a simple class which is decorated with the @component decorator. In Angular, once typescript class has been decorated with a @component decorator, it will become a Component class. It is mainly used to specify the HTML templates.<\/p>\n<ul>\n<li>\n<h4>Attribute directive<\/h4>\n<\/li>\n<\/ul>\n<p>Attribute directives are a way of changing the appearance or behavior of a component or a native DOM element. It is used to change the attributes of the existing HTML element. In Angular, there are many built-in attribute directives. Some of the useful ones are NgClass, NgStyle<\/p>\n<ul>\n<li>\n<h4>Structural Directive<\/h4>\n<\/li>\n<\/ul>\n<p>Structural Directives is a way of handling by using <em>a template<\/em> tag to know how a component or element renders. This allows us to run some code that decides what the final given output will be. Structural directives are easy to recognize by using an asterisk (*). Angular has a few built-in structural directives such as NgIf, NgFor, and NgSwitch.<\/p>\n<h3><strong>Below are the some of the popular Directives which are most commonly used while Angular Development.<\/strong><\/h3>\n<p><a href=\"https:\/\/www.cmarix.com\/inquiry.html\"><img decoding=\"async\" class=\"alignnone wp-image-20106 size-full\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/CTA-1.jpg\" alt=\"hire Angular developers\" width=\"951\" height=\"271\" srcset=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/CTA-1.jpg 951w, https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/CTA-1-400x114.jpg 400w, https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/CTA-1-768x219.jpg 768w\" sizes=\"(max-width: 951px) 100vw, 951px\" \/><\/a><\/p>\n<ul>\n<li>\n<h4>NgIf<\/h4>\n<\/li>\n<\/ul>\n<p>It conditionally includes a template based on the value of an expression. It evaluates the expression and then renders the then or else template in its place when an expression is true or false respectively. The primary usage of the NgIf directive is to show the inline template conditionally. to conditionally show the inline template. By using <em>@angular\/common <\/em>npm package, you can declare module for NgIf directives as per given below.<\/p>\n<p><em>import { NgIf } from &#8216;@angular\/common&#8217;;<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7451 size-full\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/NgIf.png\" alt=\"NgIf\" width=\"646\" height=\"132\" \/><\/p>\n<ul>\n<li>\n<h4>NgForOf<\/h4>\n<\/li>\n<\/ul>\n<p>It instantiates a template once per item from an iterable. The context for each represented template inherits from the outer context with the given loop variable set to the current element from the iterable. By using <em>@angular\/common <\/em>npm package you can declare module for NgForOf directives as per given below.<\/p>\n<p><em>import { NgForOf } from &#8216;@angular\/common&#8217;;<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7450 size-full\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/NgForOf.png\" alt=\"NgForOf\" width=\"694\" height=\"103\" \/><\/p>\n<ul>\n<li>\n<h4>NgForm<\/h4>\n<\/li>\n<\/ul>\n<p>It helps to create a top-level <em>FormGroup<\/em> instance and binds it to a form to track aggregate form value and validation status.<\/p>\n<p>By using <em>@angular\/common <\/em>npm package you can declare module for NgForm directives as per given below.<\/p>\n<p><em>import { NgForm } from &#8216;@angular\/common&#8217;;<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7448 size-full\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/NgForm_1.png\" alt=\"NgForm\" width=\"535\" height=\"127\" \/><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7449 size-full\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/NgForm_2.png\" alt=\"import { NgForm } from '@angular\/common\" width=\"519\" height=\"272\" \/><\/p>\n<ul>\n<li>\n<h4>NgModel<\/h4>\n<\/li>\n<\/ul>\n<p>By using NgModel you can binds an input, select, textarea or custom form control to a property on the scope using NgModelController, this directive creates that. It creates a FormControl instance from a domain model and binds it to a form control element. FormControl example will track the user interaction, and validation status of the control and keep the view synced with the model.<\/p>\n<p>By using <em>@angular\/common <\/em>npm package you can declare module for NgModel directives as per given below.<\/p>\n<p><em>import { NgModel } from &#8216;@angular\/common&#8217;;<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-7452 size-full\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/NgModel.png\" alt=\"NgModel\" width=\"457\" height=\"60\" \/><\/p>\n<ul>\n<li>\n<h4>NgClass<\/h4>\n<\/li>\n<\/ul>\n<p>It allows you to set the CSS class dynamically for a DOM element. You can use this directive by passing an object literal to the directive or set a class on an element by binding to the input property binding called class. It can be used to set the look and feel of your application conditionally.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7447\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/NgClass.png\" alt=\"NgClass\" width=\"727\" height=\"76\" \/><\/p>\n<ul>\n<li>\n<h4>NgModelGroup<\/h4>\n<\/li>\n<\/ul>\n<p>It creates and binds a FormGroup instance to a DOM element that can only be used as a child of NgForm. If you want to validate a sub-group of your form &#8211; Separately from the rest of your form make more sense to consume together in a nested object.<\/p>\n<p>By using <em>@angular\/common <\/em>npm package you can declare module for NgModelGroup directives as per given below.<\/p>\n<p><em>import { NgModelGroup } from &#8216;@angular\/common&#8217;;<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7453\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/NgModelGroup.png\" alt=\"NgModelGroup\" width=\"516\" height=\"247\" \/><\/p>\n<ul>\n<li>\n<h4>NgStyle<\/h4>\n<\/li>\n<\/ul>\n<p>With the help of NgStyle directives, you can set a given DOM elements style properties.The styles are updated according to the value of the expression evaluation such as keys are style names with an optional .&lt;unit&gt; suffix (ie &#8216;top.px&#8217;, &#8216;font-style.em&#8217;),values are the values assigned to those properties.<\/p>\n<p>By using CommonModule, you can declare module for NgStyle directives as per given below.<\/p>\n<p><em>import { NgStyle } from &#8216;@angular\/common&#8217;<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7454\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/NgStyle.png\" alt=\"NgStyle\" width=\"586\" height=\"113\" \/><\/p>\n<ul>\n<li>\n<h4>NgSwitchCase<\/h4>\n<\/li>\n<\/ul>\n<p>It helps to create a view which will be added\/removed from the parent NgSwitch when the given expression evaluates to respectively the same\/different value as the switch expression.<\/p>\n<p>By using <em>@angular\/common <\/em>npm package you can declare module for NgSwitchCase directives as per given below.<\/p>\n<p><em>import { NgSwitchCase } from &#8216;@angular\/common&#8217;;<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7455\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/NgSwitchCase.png\" alt=\"NgSwitchCase\" width=\"542\" height=\"87\" \/><\/p>\n<ul>\n<li>\n<h4>NgTemplateOutlet<\/h4>\n<\/li>\n<\/ul>\n<p>You can use NgTemplateOutlet to embed a view from a prepared TemplateRef and ngOutletContext to proceed a context to the embedded view.<\/p>\n<p>By using <em>@angular\/common <\/em>npm package you can declare module for NgTemplateOutlet directives as per given below.<\/p>\n<p><em>import { NgTemplateOutlet } from &#8216;@angular\/common&#8217;;<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7456\" src=\"https:\/\/www.cmarix.com\/blog\/wp-content\/uploads\/2018\/06\/NgTemplateOutlet.png\" alt=\"NgTemplateOutlet\" width=\"659\" height=\"205\" \/><\/p>\n<p>Directives are a significant tool to create reusable web components that are not defined as new HTML tags but also as attributes, CSS classes or even HTML comments. Angular comes with many built-in directives that offer numerous functionalities to your web applications right away. By focusing on making the framework easier for a process, Angular allows for a much more productive development ecosystem which brings many exciting improvements over Angular JS and will enable us to create a more scalable feature-rich business web application.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There is no doubt that Angular is the most popular TypeScript framework. [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[41],"tags":[],"class_list":["post-7445","post","type-post","status-publish","format-standard","hentry","category-angular"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts\/7445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/comments?post=7445"}],"version-history":[{"count":5,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts\/7445\/revisions"}],"predecessor-version":[{"id":38224,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts\/7445\/revisions\/38224"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/media?parent=7445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/categories?post=7445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/tags?post=7445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}