105. Building and Using a Dropdown Directive

0:02

S… Speaker 2 (105. Building and Using a Dropdown Directive)

Welcome back to the recipe book.

0:03

S… Speaker 1 (105. Building and Using a Dropdown Directive)

We already use ngif and ng4 in this section,

0:06

S… Speaker 1 (105. Building and Using a Dropdown Directive)

so we're already using directives.

0:08

S… Speaker 1 (105. Building and Using a Dropdown Directive)

But now I want to enhance this project by adding

0:12

S… Speaker 1 (105. Building and Using a Dropdown Directive)

our own directive,

0:13

S… Speaker 1 (105. Building and Using a Dropdown Directive)

which allows us to open the dropdowns,

0:17

S… Speaker 1 (105. Building and Using a Dropdown Directive)

which don't work as of now if you click them.

0:19

S… Speaker 1 (105. Building and Using a Dropdown Directive)

They don't work because we didn't import Bootstrap's JavaScript code,

0:23

S… Speaker 1 (105. Building and Using a Dropdown Directive)

and I don't want to import this because Angular should be the only thing interacting

0:28

S… Speaker 1 (105. Building and Using a Dropdown Directive)

with my DOM.

0:29

S… Speaker 1 (105. Building and Using a Dropdown Directive)

But now with the directive knowledge,

0:31

S… Speaker 1 (105. Building and Using a Dropdown Directive)

we can create our own directive,

0:33

S… Speaker 1 (105. Building and Using a Dropdown Directive)

which will manipulate these buttons.

0:36

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I'll add the directive in the shared folder

0:40

S… Speaker 1 (105. Building and Using a Dropdown Directive)

and I will name it dropdown.

0:45

S… Speaker 1 (105. Building and Using a Dropdown Directive)

directive so the file is named drop down directive dot ts

0:49

S… Speaker 1 (105. Building and Using a Dropdown Directive)

of course you could use the cli to create it and

0:53

S… Speaker 1 (105. Building and Using a Dropdown Directive)

you could even point to the shared folder in the command to automatically generate

0:58

S… Speaker 1 (105. Building and Using a Dropdown Directive)

it in this shared folder i'll do it manually though always

1:02

S… Speaker 1 (105. Building and Using a Dropdown Directive)

a good practice and here the name should be drop down directive

1:07

S… Speaker 1 (105. Building and Using a Dropdown Directive)

like this and of course we need to add a

1:11

S… Speaker 1 (105. Building and Using a Dropdown Directive)

decorator to turn this into a directive

1:14

S… Speaker 1 (105. Building and Using a Dropdown Directive)

So it's the add directive decorator,

1:17

S… Speaker 1 (105. Building and Using a Dropdown Directive)

which needs to be imported from add angular core.

1:20

S… Speaker 1 (105. Building and Using a Dropdown Directive)

And here there is one thing I need to set up.

1:23

S… Speaker 1 (105. Building and Using a Dropdown Directive)

On the selector,

1:25

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I want to define how I can add my directive.

1:28

S… Speaker 1 (105. Building and Using a Dropdown Directive)

And I will use an attribute selector.

1:30

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Therefore, I'll enclose the name in square brackets.

1:33

S… Speaker 1 (105. Building and Using a Dropdown Directive)

The name now will be app...

1:36

S… Speaker 1 (105. Building and Using a Dropdown Directive)

drop down to have a unique name which doesn't accidentally interfere

1:41

S… Speaker 1 (105. Building and Using a Dropdown Directive)

with an officially existing attribute name or anything like that.

1:45

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Now what should this directive do?

1:48

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I want to add some functionality to it which allows us

1:52

S… Speaker 1 (105. Building and Using a Dropdown Directive)

to add a certain CSS class to the element it sits

1:56

S… Speaker 1 (105. Building and Using a Dropdown Directive)

on once it is clicked.

1:58

S… Speaker 1 (105. Building and Using a Dropdown Directive)

So once this element the directive sits on is clicked and remove

2:02

S… Speaker 1 (105. Building and Using a Dropdown Directive)

the class once we click again let's say.

2:05

S… Speaker 2 (105. Building and Using a Dropdown Directive)

So this is your challenge.

2:07

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Try implementing such a method which basically listens to

2:11

S… Speaker 1 (105. Building and Using a Dropdown Directive)

clicks and then toggles some property which determines whether some class is attached

2:15

S… Speaker 1 (105. Building and Using a Dropdown Directive)

or not.

2:16

S… Speaker 1 (105. Building and Using a Dropdown Directive)

And also try implementing some code which dynamically attaches

2:20

S… Speaker 1 (105. Building and Using a Dropdown Directive)

a CSS class or not.

2:21

S… Speaker 2 (105. Building and Using a Dropdown Directive)

Before you actually start though,

2:23

S… Speaker 1 (105. Building and Using a Dropdown Directive)

let's find out which class we need to attach.

2:26

S… Speaker 1 (105. Building and Using a Dropdown Directive)

If you go to the recipe detail component here,

2:29

S… Speaker 1 (105. Building and Using a Dropdown Directive)

if you attach the open CSS class to the

2:33

S… Speaker 1 (105. Building and Using a Dropdown Directive)

div, which holds button group,

2:35

S… Speaker 1 (105. Building and Using a Dropdown Directive)

and you go to your application and select the recipe,

2:38

S… Speaker 1 (105. Building and Using a Dropdown Directive)

you see now it looks like the dropdown was opened.

2:41

S… Speaker 1 (105. Building and Using a Dropdown Directive)

So it's this open CSS class,

2:44

S… Speaker 1 (105. Building and Using a Dropdown Directive)

the same for the usage in the header we need to attach.

2:47

S… Speaker 2 (105. Building and Using a Dropdown Directive)

So that's your challenge.

2:49

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Build a dropdown directive,

2:50

S… Speaker 1 (105. Building and Using a Dropdown Directive)

which attaches this class whenever we click on it or removes it once

2:54

S… Speaker 1 (105. Building and Using a Dropdown Directive)

we click a second time.

2:58

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Let's build this directive together now.

3:00

S… Speaker 1 (105. Building and Using a Dropdown Directive)

So as explained,

3:02

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I want to toggle it upon clicking this.

3:05

S… Speaker 1 (105. Building and Using a Dropdown Directive)

So to listen to a click,

3:07

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I should add host listener,

3:10

S… Speaker 1 (105. Building and Using a Dropdown Directive)

which is to be imported from Angular core.

3:13

S… Speaker 1 (105. Building and Using a Dropdown Directive)

And I want to listen to a click event.

3:16

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Then I want to execute toggle open,

3:20

S… Speaker 1 (105. Building and Using a Dropdown Directive)

which looks like or sounds like a fitting name because that is what I want to do.

3:24

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I want to toggle whether this should be opened or not.

3:28

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Well, then I will add is open directive,

3:33

S… Speaker 1 (105. Building and Using a Dropdown Directive)

which I'll set to false initially.

3:35

S… Speaker 1 (105. Building and Using a Dropdown Directive)

And in my host listener,

3:37

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I'll simply set open or is open to,

3:40

S… Speaker 2 (105. Building and Using a Dropdown Directive)

well,

3:40

S… Speaker 1 (105. Building and Using a Dropdown Directive)

what it is currently not.

3:42

S… Speaker 1 (105. Building and Using a Dropdown Directive)

So if is open was true,

3:44

S… Speaker 1 (105. Building and Using a Dropdown Directive)

it will now be set to false and the other way around.

3:47

S… Speaker 2 (105. Building and Using a Dropdown Directive)

So with that,

3:49

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I'm toggling that property.

3:52

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Now to dynamically attach or detach a

3:57

S… Speaker 1 (105. Building and Using a Dropdown Directive)

CSS class depending on this,

3:58

S… Speaker 1 (105. Building and Using a Dropdown Directive)

all I have to do is I'll add host binding,

4:02

S… Speaker 1 (105. Building and Using a Dropdown Directive)

which needs to be imported from Angular core and allows us to

4:07

S… Speaker 1 (105. Building and Using a Dropdown Directive)

bind to properties of the element the directive is placed

4:11

S… Speaker 1 (105. Building and Using a Dropdown Directive)

on.

4:11

S… Speaker 1 (105. Building and Using a Dropdown Directive)

And here I want to bind to the class

4:16

S… Speaker 1 (105. Building and Using a Dropdown Directive)

property of that component,

4:18

S… Speaker 1 (105. Building and Using a Dropdown Directive)

of that element.

4:19

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Class simply is an array of all the classes.

4:23

S… Speaker 1 (105. Building and Using a Dropdown Directive)

And here it's all about this open class.

4:26

S… Speaker 2 (105. Building and Using a Dropdown Directive)

As you learned,

4:28

S… Speaker 1 (105. Building and Using a Dropdown Directive)

that's the CSS class we need to attach dynamically or detach.

4:31

S… Speaker 1 (105. Building and Using a Dropdown Directive)

And now the rest will be handled by Angular.

4:34

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Since I bind to isOpen,

4:36

S… Speaker 1 (105. Building and Using a Dropdown Directive)

this will not be attached initially.

4:39

S… Speaker 1 (105. Building and Using a Dropdown Directive)

whenever is open switches to true it will be attached and whenever

4:43

S… Speaker 1 (105. Building and Using a Dropdown Directive)

it switches to false it will be removed and that's our entire directive

4:47

S… Speaker 1 (105. Building and Using a Dropdown Directive)

now to be able to use it i need to go to app module

4:52

S… Speaker 1 (105. Building and Using a Dropdown Directive)

and add it here add the drop down directive and

4:56

S… Speaker 1 (105. Building and Using a Dropdown Directive)

add the import pointing to the shared folder and with

5:01

S… Speaker 1 (105. Building and Using a Dropdown Directive)

that imported now

5:03

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I can use it.

5:04

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I can use it in the detail component.

5:07

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Here,

5:07

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I have to use it on the div or on the element where open should

5:12

S… Speaker 1 (105. Building and Using a Dropdown Directive)

be attached to in the end.

5:13

S… Speaker 1 (105. Building and Using a Dropdown Directive)

So in this case,

5:14

S… Speaker 1 (105. Building and Using a Dropdown Directive)

the div with the button group class.

5:15

S… Speaker 2 (105. Building and Using a Dropdown Directive)

And here,

5:16

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I'll add my own app dropdown directive without squared brackets,

5:20

S… Speaker 1 (105. Building and Using a Dropdown Directive)

without assigning any value because,

5:22

S… Speaker 2 (105. Building and Using a Dropdown Directive)

well,

5:23

S… Speaker 1 (105. Building and Using a Dropdown Directive)

I don't need to configure anything on this directive.

5:25

S… Speaker 1 (105. Building and Using a Dropdown Directive)

And now in the header,

5:28

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Here the place where I need to add it is this list item with the class

5:32

S… Speaker 2 (105. Building and Using a Dropdown Directive)

of dropdown.

5:32

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Here this is what will actually need the open class to show something.

5:37

S… Speaker 1 (105. Building and Using a Dropdown Directive)

With that in place and ng -surf still running,

5:40

S… Speaker 1 (105. Building and Using a Dropdown Directive)

let's save this and view this in our application and see if this works

5:44

S… Speaker 1 (105. Building and Using a Dropdown Directive)

the way it should.

5:45

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Let's test it in the header.

5:47

S… Speaker 2 (105. Building and Using a Dropdown Directive)

Looks pretty good.

5:49

S… Speaker 1 (105. Building and Using a Dropdown Directive)

We close it by clicking again.

5:51

S… Speaker 1 (105. Building and Using a Dropdown Directive)

And here on our recipe,

5:54

S… Speaker 1 (105. Building and Using a Dropdown Directive)

That looks awesome too.

5:55

S… Speaker 1 (105. Building and Using a Dropdown Directive)

So that's working exactly the way I want it to work.

5:59

S… Speaker 1 (105. Building and Using a Dropdown Directive)

And with that in place,

6:01

S… Speaker 1 (105. Building and Using a Dropdown Directive)

that already is everything I wanted to build.

6:03

S… Speaker 1 (105. Building and Using a Dropdown Directive)

So a relatively short recipe book section here.

6:06

S… Speaker 1 (105. Building and Using a Dropdown Directive)

Now we can move on to services,

6:09

S… Speaker 1 (105. Building and Using a Dropdown Directive)

a very powerful tool.

6:10

S… Speaker 1 (105. Building and Using a Dropdown Directive)

And then we will add services in this app here to greatly

6:15

S… Speaker 1 (105. Building and Using a Dropdown Directive)

enhance it and fix some things which we had to do kind

6:19

S… Speaker 1 (105. Building and Using a Dropdown Directive)

of complicated thus far.

6:21

S… Speaker 1 (105. Building and Using a Dropdown Directive)

We'll also add some new features.

105. Building and Using a Dropdown Directive

Zesummenfassung

D'Lëscht vun de lëtzebuergesche Transkriptiounen