In this lecture, we are going to start learning about directives.
You can think of them as custom attributes for transforming content.
Browsers have various attributes for affecting the behavior of an element.
For example, the target attribute on an anchor element can change how a link is opened in the browser.
Browsers defined dozens of attributes to alter and elements behavior.
In some cases, we may want to create custom attributes instead of creating an entire components.
Angular gives us this power through a feature called Direct Use.
We can apply directives to native HTML elements or custom components.
They're more flexible than regular attributes.
In the resource section of this lecture, I provide a link to an official list of directives defined
by angular.
If you cannot see the list of directives, you can filter the list by selecting the directives option.
We are going to put our focus on the directives defined under the common package.
The other directives will be explored in other sections of the course.
As we discussed before, the common package is imported through the browser module.
We don't have to take additional steps to start using these directives.
There are two types of directives, there are attribute directives and structural directives.
Both types of directives have different syntax rules and behaviors.
Attribute directives focus on changing the appearance or behavior of an element.
For example, if we want to dynamically add styles to an element, this type of directive would be considered
an attribute directive.
Structural directives can add or remove elements in the document.
They're focused on changing the layout of the DOM.
If this seems confusing, that's perfectly all right.
Let's dive into some examples.