Scribd
Upload
45 views2 pages

Building and Using A Dropdown Directive

This document discusses how to build and use a dropdown directive in Angular. 1. A dropdown directive is generated using the Angular CLI. 2. The directive adds a class binding and click listener to toggle the "open" class on and off, showing and hiding the dropdown. 3. The directive is imported into the AppModule to make it available application-wide.

Uploaded by

Jay R Fuenzalida Valeroso
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
45 views2 pages

Building and Using A Dropdown Directive

This document discusses how to build and use a dropdown directive in Angular. 1. A dropdown directive is generated using the Angular CLI. 2. The directive adds a class binding and click listener to toggle the "open" class on and off, showing and hiding the dropdown. 3. The directive is imported into the AppModule to make it available application-wide.

Uploaded by

Jay R Fuenzalida Valeroso
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Building and Using a Dropdown Directive

1. In shared folder create a dropdown directive


It could be any name.
Our goal is to open or manipulate our dropdown button using angular not bootsrap

ng g directive dropdown

2. We need to add a certain css class specifically Open class.


we want to make it clickable to toggle off our dropdown button.
-We added @HostListener
-and pass in our click event
-then we added a method called toggleOpen(){} but it could be any name.

-we set isOpen property and set to false;

-in toggleOpen(){} we access our isOpen property and assign it to below value

-we need to attached the css class called open dynamically with @HostBinding on
our property'
must be imported as well.

-our css class open will only be attached dynamically on our element if ti will
become true.
and it will become true once we have click our our dropdown button.
when switches to false it will be removed.

********

import { HostBinding } from '@angular/core';


import { Directive, HostListener } from '@angular/core';

@Directive({
selector: '[appDropdown]'
})
export class DropdownDirective {

@HostBinding('class.open') isOpen = false;

constructor() { }

@HostListener("click") toggleOpen() {
this.isOpen = !this.isOpen;
}

3. in appp.module.ts we need to add our Dropdown Directive


since we did it by cli it automatically being added.

4. Now we'lll go got recipe-detail.component.html where we will put our appDropdown


directiveclass on our Dropdown button.

<div class="btn-group" appDropdown>


5. in header.component.html

<li class="dropdown" appDropdown>

You might also like