In Angular, there are three types of directives. Let’s have a look at them:
Components: A component is nothing more than a directive with a template attached to it. It’s used to create a single user interface element with TypeScript code, CSS styling, and an HTML template. We utilize the component decorated with the @ symbol and pass in an object with a selector property when we define a component. The selector property tells the Angular compiler the HTML element the component is connected with, so it knows to replace it with the component template whenever it sees it in HTML.
Structural: A view’s structure can be changed using structural directives. For example, we may use the ngIf directive to display or conceal data based on a property, or we can use the *ngFor directive to add a list of data to the markup, and so on. These directives are known as structural directives because they alter the template’s structure.
Attribute: Attribute directives modify the look or behavior of a component, element, or another directive. They are utilized as elements’ characteristics. Attribute directives include things like ngClass and ngStyle.