Directives in angular are custom tags and custom attributes of html which is controlled by class and decorators. Using directives we can change the behaviour, style and logic of a specific area. Example: helloworld.component.ts Xyz.compenent.html <hello-world></hello-world> Output:Hello world component/directive Types of Directives in Angular: 1. Component : Angular page is…