All-in-One Angular 9 Directives Cheatsheet

Easy navigation to:

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

Below is the list:

Name	Brief
`[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.

Below is the list:

Name	Brief
`*ngIf`	Takes an expression, when it is truthy, it includes a template and vice versa.
`*ngFor`	Loops & renders a template for each item in an array. The host element will becomes the parent of the cloned templates.
`*ngSwitchCase`	Works 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.
`*ngSwitchDefault`	In 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.