Angular - 2.21-understand the instructions

We are almost finished learning the basics of Angular. We have acquired a lot of knowledge about the components, which are the basis of any Angular application. We learned how they launch the application and how we can communicate with our models in our components to retrieve data or react to events.

Now, there is another key element that we probably use in all Angular applications that we build: Directives. But what is a directive? Directives are instructions in the DOM, and we already use them without knowing it. Indeed, the components themselves are directives with a template.

Once we have placed our component selector somewhere in our templates, we order Angular to add the content of our component model as well as business logic into our code types where we used the selector. So we created an instruction for Angular: "Add our component here". In short, the components are directives, but directives with a template.

There are also directives without templates, such as the custom "appTurnGreen" directive that we could build to simply color the text green. We usually add directives with an attribute selector, but technically, the selector of a directive can be configured just like the selector of a component. So we can also use CSS classes or element style, although using attribute style is common practice.

To define our directive, we would use the Directive Decorator to inform Angular that this class contains a directive. Then we could include the logic to go green. We will learn how to write our own guidelines in the guidelines section of this course, but there are also some very useful integrated guidelines that we will see in future courses.