Angular Built-in Directives
There are three kinds of directives in Angular:
Components—directives with a template.
Structural directives—change the DOM layout by adding and removing DOM elements.
Attribute directives—change the appearance or behavior of an element, component, or another directive.
Components are the most common of the three directives. You saw a component for the first time in the QuickStart guide.
Structural Directives change the structure of the view. Two examples are NgFor and NgIf. Learn about them in the Structural Directives guide.
Attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template Syntax guide, for example, can change several element styles at the same time.
A directive in AngularJS is a meaningful name for a function that is attached with DOM elements. All AngularJS built in directives prefixed with the ng namespace. It is used to extend HTML elemets attribute. AngularJS directives have the ability to execute methods, define behavior, attach controllers and $scope objects, manipulate the DOM, and more.
Angular Built in Directives
Here is a list of AngularJS built in directives with description.
Directives Description
ng-app It is added to set the AngularJS section.
ng-init It sets default variable value.
ng-bind It is an alternative to {{ }} template.
ng-bind-template It binds multiple expressions to the view.
ng-non-bindable It used to not to bind data.
ng-bind-html It used to bind inner HTML property of an HTML element.
ng-change It evaluates specified expression when the user changes the input.
ng-checked It is used to set checkbox checked.
ng-class It is used to the css class dynamically.
ng-cloak It is usedv to prevent displaying the content until AngularJS has taken control.
ng-click It is used to execute a method or expression when element is clicked.
ng-controller It is used to attach a controller class to the view.
ng-disabled It is used to attach disabled attributes to the form element.
ng-form It is used to set form within a form.
ng-href It is used to dynamically bind AngularJS variables to the href attribute.
ng-include It is used to fetch, compile and include an external HTML fragment to your page.
ng-if It is used to remove or recreate an element in the DOM depending on an expression
ng-switch It is used to conditionally switch control based on matching expression.
ng-model It is used to bind an input,select, textarea etc elements with model property.
ng-readonly It is used to set readonly attribute to an element.
ng-repeat It is used to loop through each item in collection to create a new template.
ng-selected It is used to set selected option in <select> element.
ng-show/ng-hide It workes based on expression, if true then the element is shown or hidden respectively.
ng-src It is used to dynamically bind AngularJS variables to the src attribute.
ng-submit It is used to bind angular expressions to onsubmit events.
ng-value It is used to bind angular expressions to the value of <option>.
ng-required It is used to bind angular expressions to onsubmit events.
ng-style It is used to set CSS style on an HTML element conditionally.
ng-pattern It is used to add the pattern validator to ngModel.
ng-maxlength It is used to adds the maxlength validator to ngModel.
ng-minlength It is used to adds the minlength validator to ngModel.
ng-classeven It works in conjunction with ngRepeat and take effect only on odd (even) rows.
ng-classodd It works in conjunction with ngRepeat and take effect only on odd (even) rows.
ng-cut It is used to specify custom behavior on cut event.
ng-copy It is used to specify custom behavior on copy event.
ng-paste It is used to specify custom behavior on paste event.
ng-options It is used to dynamically generate a list of <option> elements for the <select> element.
ng-list It is used to convert string into list based on specified delimiter.
ng-open It is used to set the open attribute on the element, if the expression inside ngOpen is truthy.
Angular provides a suite of built-in directives. Some directives override built-in HTML elements, such the <form> and <a> tags. When we use tags in our HTML, it may not be immediately obvious that we are, in fact, using a directive.
For example, the <form> tag is augmented with a great deal of functionality under the hood, such as validation behavior that we normally don’t get with a standard HTML form.
Other built-in directives are clearly visible via their ng- namespace prefix. For example, ng-href, which we’ll cover below, prevents a link from becoming active until the expression provided to ng-href=”someExpression” has been evaluated and returns a value.
Lastly, some built-in directives do not have an HTML counterpart, such as the ng-controller directive, which can be used as an attribute on any tag, but is most often found on an element that has many children that should share the same scope.
Note that all directives prefixed with the ng namespace are part of the built-in library of directives that ship with Angular. For this reason, never prefix directives you make with this namespace.
IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course.
Back to Angular 4 Tutorial Main Page 
