A directive is an add-on or an extension to Angular features, used for optimizing your reusable code. There are three types of directives in Angular (component, attribute, and structural). Component Directives A component is a directive with a template. Basically, whatever we do in Angular is a component. It is a reusable part of the whole application. Here is an example of a simple animation component that rotates the div by 180 degrees when clicked. Template: CLICK ME TS file: import…