Covid 19 Precautionary Measures
  • Stay at home ๐Ÿก
  • Wash your hands frequently ๐Ÿงผ
  • Maintain social distancing ๐ŸคโŒ
  • Avoid touching eyes, nose and mouth โ˜น

All-in-One Angular 9 Directives Cheatsheet

All-in-One Angular 9 Directives Cheatsheet

This article gives you the list of built-in directives in Angular with a small brief about each directive in dev-language with an example.

Angular Directives are used to manipute DOM (either structure or behaviour) based on the conditions provided.

First, let’s list out the types of Angular Directives:

  • Attribute Directives
  • Structural Directives

Attribute Directives

Below is the list:

NameBrief
[ngStyle]Attaches inline CSS styles (one or many) for the host HTML element.
[ngClass]Adds / removes CSS classes on an HTML element with or without an expression.
[ngComponentOutlet]Used for dynamic component declaration. Instantiates a single Component type and inserts its Host View into current View.
[ngTemplateOutlet]Inserts an embedded view from a prepared TemplateRef.
[ngPlural]Adds / removes DOM sub-trees based on a numeric value.
[ngPluralCase]Creates a view that will be added/removed from the parent ngPlural when the given expression matches the plural expression according to CLDR rules.
[ngSwitch]Works same as a switch statement in JavaScript. The expressions to match are provided by ngSwitchCase directives on views within the container, more description is provided below.

Structural Directives

Below is the list:

NameBrief
*ngIfTakes an expression, when it is truthy, it includes a template and vice versa.
*ngForLoops & renders a template for each item in an array. The host element will becomes the parent of the cloned templates.
*ngSwitchCaseWorks same as a case statement in JavaScript. This case should be enclosed within the ngSwitch container. When the expressions match, the given ngSwitchCase template will be rendered.
*ngSwitchDefaultIn case, if no ngSwitchCase expressions matches the ngSwitch expression, then given template in here will be rendered. This statement should always be the last statement in a ngSwitch.

That’s it!

Please let me know in the comment box, if you do not see any directives listed in this article or if you have any queries.

Masoom Ul Haq S
About author
Masoom Ul Haq S

Masoom is a Front-end Developer, a UX Engineer and Freelancer based in Bangalore, India. Like to develop differential and effective User Experiences for digital products using an amalgamation of latest technology and best practises.

comments powered by Disqus
You may also like:
Be the first to know about my upcoming writings.