1
00:00:00,180 --> 00:00:03,960
In this lecture, we are going to start learning about directives.

2
00:00:04,200 --> 00:00:08,280
You can think of them as custom attributes for transforming content.

3
00:00:08,700 --> 00:00:13,230
Browsers have various attributes for affecting the behavior of an element.

4
00:00:13,710 --> 00:00:20,550
For example, the target attribute on an anchor element can change how a link is opened in the browser.

5
00:00:20,940 --> 00:00:25,350
Browsers defined dozens of attributes to alter and elements behavior.

6
00:00:25,890 --> 00:00:32,310
In some cases, we may want to create custom attributes instead of creating an entire components.

7
00:00:32,729 --> 00:00:36,990
Angular gives us this power through a feature called Direct Use.

8
00:00:37,380 --> 00:00:42,240
We can apply directives to native HTML elements or custom components.

9
00:00:42,600 --> 00:00:45,300
They're more flexible than regular attributes.

10
00:00:45,810 --> 00:00:52,110
In the resource section of this lecture, I provide a link to an official list of directives defined

11
00:00:52,110 --> 00:00:52,920
by angular.

12
00:00:53,250 --> 00:00:59,430
If you cannot see the list of directives, you can filter the list by selecting the directives option.

13
00:00:59,970 --> 00:01:04,560
We are going to put our focus on the directives defined under the common package.

14
00:01:04,830 --> 00:01:08,640
The other directives will be explored in other sections of the course.

15
00:01:08,970 --> 00:01:14,370
As we discussed before, the common package is imported through the browser module.

16
00:01:14,670 --> 00:01:18,750
We don't have to take additional steps to start using these directives.

17
00:01:20,160 --> 00:01:26,340
There are two types of directives, there are attribute directives and structural directives.

18
00:01:26,670 --> 00:01:31,080
Both types of directives have different syntax rules and behaviors.

19
00:01:31,740 --> 00:01:36,630
Attribute directives focus on changing the appearance or behavior of an element.

20
00:01:36,990 --> 00:01:44,100
For example, if we want to dynamically add styles to an element, this type of directive would be considered

21
00:01:44,100 --> 00:01:45,630
an attribute directive.

22
00:01:46,170 --> 00:01:50,280
Structural directives can add or remove elements in the document.

23
00:01:50,610 --> 00:01:53,490
They're focused on changing the layout of the DOM.

24
00:01:53,820 --> 00:01:56,790
If this seems confusing, that's perfectly all right.

25
00:01:57,120 --> 00:01:58,980
Let's dive into some examples.