---
title: Bitovi Academy - Creating Directives
description: Learn how to create Directives in Angular that can change the appearance or behavior of DOM Elements.
---
- 
[AI implementation](https://www.bitovi.com/services/ai-consulting?hsLang=en-us)
- 
[Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting?hsLang=en-us)
- 
[Project management](https://www.bitovi.com/services/agile-project-management-consulting?hsLang=en-us)
- 
[Product design](https://www.bitovi.com/services/product-design-consulting?hsLang=en-us)
- 
[Frontend development](https://www.bitovi.com/services/frontend-development-consulting?hsLang=en-us)
- [View more
→
](https://www.bitovi.com/digital-consulting-services?hsLang=en-us)
We're Experts in...
- [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting?hsLang=en-us)
- [AI training](https://www.bitovi.com/ai-training-for-software-engineers?hsLang=en-us)
- [Angular](https://www.bitovi.com/services/frontend/angular-consulting?hsLang=en-us)
- [Design Systems](https://www.bitovi.com/services/axure-figma-migration?hsLang=en-us)
- [React](https://www.bitovi.com/services/frontend/react-consulting?hsLang=en-us)
- [Temporal](https://www.bitovi.com/services/backend/temporal-consulting?hsLang=en-us)
- [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native?hsLang=en-us)
- [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting-1?hsLang=en-us)
Showcase
[View case study](https://www.bitovi.com/en/bitovi-yum-case-study?hsLang=en-us)
More Projects
- [](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign?hsLang=en-us)
- [](https://design.bitovi.com/christies)
- [](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp?hsLang=en-us)
- [View more
→
](https://www.bitovi.com/our-software-consulting-work?hsLang=en-us)
Open Source Tools
We build powerful tools and open source them to support the community.
[See what we've built →](https://www.bitovi.com/open-source?hsLang=en-us)
- [
BlogWe post about perfecting software delivery
](https://bitovi.com/blog)
- [
PartnershipsLearn about Bitovi's technology partners
](https://www.bitovi.com/partnerships?hsLang=en-us)
- [
AcademyFree courses to build delivery skills
](https://www.bitovi.com/academy/?hsLang=en-us)
- [
Open source toolsUse our tools or contribute to our open source mission.
](https://www.bitovi.com/open-source?hsLang=en-us)
Let's Connect
- [
Discord
](https://discord.gg/J7ejFsZnJ4)
- [
LinkedIn
](https://www.linkedin.com/company/bitovi/)
- [
GitHub
](https://github.com/bitovi/)
Name *
Work Email *
Phone
What's your project?
Send
### Contact Us
(312) 620-0386contact@bitovi.com
- [ Advanced JavaScript ](https://www.bitovi.com/academy/learn-advanced-javascript.html?hsLang=en-us)
- [ DOM and jQuery ](https://www.bitovi.com/academy/learn-dom-jquery.html?hsLang=en-us)
- [ Debug JavaScript ](https://www.bitovi.com/academy/learn-to-debug-javascript.html?hsLang=en-us)
- [ Learn TypeScript ](https://www.bitovi.com/academy/learn-typescript.html?hsLang=en-us)
- [ Learn React Native ](https://www.bitovi.com/academy/learn-react-native.html?hsLang=en-us)
- [ Learn Web Components ](https://www.bitovi.com/academy/learn-web-components.html?hsLang=en-us)
- [ Agile Program Management With Jira ](https://www.bitovi.com/academy/learn-agile-program-management-with-jira.html?hsLang=en-us)
- [ Learn RxJS ](https://www.bitovi.com/academy/learn-rxjs.html?hsLang=en-us)
- [ Giving a Training ](https://www.bitovi.com/academy/training.html?hsLang=en-us)
- [ Learn Technology Consulting ](https://www.bitovi.com/academy/learn-technology-consulting.html?hsLang=en-us)
- [ Learn React ](https://www.bitovi.com/academy/learn-react.html?hsLang=en-us)
- [ Learn NgRx ](https://www.bitovi.com/academy/learn-ngrx.html?hsLang=en-us)
- [ Learn Graphql ](https://www.bitovi.com/academy/learn-graphql.html?hsLang=en-us)
- [ Learn Docker ](https://www.bitovi.com/academy/learn-docker.html?hsLang=en-us)
- [ Learn CanJS ](https://www.bitovi.com/academy/learn-canjs.html?hsLang=en-us)
- [ Learn Angular ](https://www.bitovi.com/academy/learn-angular.html?hsLang=en-us)
- [ Why Angular? ](https://www.bitovi.com/academy/learn-angular/why-angular.html?hsLang=en-us)
- [ Generate an App ](https://www.bitovi.com/academy/learn-angular/building-our-first-app.html?hsLang=en-us)
- [ Creating Components ](https://www.bitovi.com/academy/learn-angular/creating-components.html?hsLang=en-us)
- [ Creating Pipes ](https://www.bitovi.com/academy/learn-angular/creating-pipes.html?hsLang=en-us)
- [ Adding Routing ](https://www.bitovi.com/academy/learn-angular/adding-routing.html?hsLang=en-us)
- [ Creating Navigation ](https://www.bitovi.com/academy/learn-angular/creating-navigation.html?hsLang=en-us)
- [ Fetching Data with Services ](https://www.bitovi.com/academy/learn-angular/restaurant-service.html?hsLang=en-us)
- [ Rendering Data in Components ](https://www.bitovi.com/academy/learn-angular/pull-restaurant-data-into-view.html?hsLang=en-us)
- [ Reactive Forms Data Binding ](https://www.bitovi.com/academy/learn-angular/state-city-options.html?hsLang=en-us)
- [ Listening to Form Changes ](https://www.bitovi.com/academy/learn-angular/form-value-changes.html?hsLang=en-us)
- [ Multi-parameter Services ](https://www.bitovi.com/academy/learn-angular/updating-service-params.html?hsLang=en-us)
- [ Optional: Declarative State ](https://www.bitovi.com/academy/learn-angular/declarative-state.html?hsLang=en-us)
- [ Writing Unit Tests ](https://www.bitovi.com/academy/learn-angular/writing-unit-tests.html?hsLang=en-us)
- [ Creating Nested Routes ](https://www.bitovi.com/academy/learn-angular/nested-routes.html?hsLang=en-us)
- [ Binding Component Data ](https://www.bitovi.com/academy/learn-angular/building-order-form.html?hsLang=en-us)
- [ Creating Directives ](https://www.bitovi.com/academy/learn-angular/creating-directive.html?hsLang=en-us)
- [ Order Service ](https://www.bitovi.com/academy/learn-angular/order-service.html?hsLang=en-us)
- [ Order History Component ](https://www.bitovi.com/academy/learn-angular/order-history-component.html?hsLang=en-us)
- [ Item Total Pipe ](https://www.bitovi.com/academy/learn-angular/item-total-pipe.html?hsLang=en-us)
- [ Real Time Connections ](https://www.bitovi.com/academy/learn-angular/real-time-connection.html?hsLang=en-us)
- [ Deploy App ](https://www.bitovi.com/academy/learn-angular/deploy-app.html?hsLang=en-us)
- [ Advanced TypeScript ](https://www.bitovi.com/academy/advanced-typescript.html?hsLang=en-us)
[View More Courses](https://www.bitovi.com/academy/#courses) [ ]
# Creating Directives `page`
Learn how to create Directives in Angular that can change the appearance or behavior of DOM Elements.
## Problem
While filling out the `phone number` field, you might have noticed that users can type in both letters and numbers. This is a problem because we do not want users entering letters in the `phone number` field.
In order to fix this, we will create an Attribute Directive that will change the behavior of the Phone Input Field, and will ensure that only numbers can be entered in the field.
```
```
## What you need to know
- What are Directives?
- What is `ElementRef`?
- What are `HostListeners`?
- How to create a Directive
## What are Directives?
Directives are classes that tell Angular to change the appearance or behavior of DOM Elements. Angular comes with a set of [Built-in](https://angular.io/guide/built-in-directives) Directives, and they consist of three types:
- Components
- Structural Directives
- Attribute Directives
### Components
In this training, we previously talked about [Components](https://www.bitovi.com/academy/learn-angular/creating-components.html?hsLang=en-us). Components are a type of Directive. Components use the `@Component` decorator function along with a template, style, and other logic needed for the view. This was previously discussed in detail [here](https://www.bitovi.com/academy/learn-angular/creating-components.html#p2-what-you-need-to-know). The official [Angular documentation](https://angular.io/guide/built-in-directives#:~:text=Components%E2%80%94-,directives,-with%20a%20template) has more information on this as well.
```
import { Component } from '@angular/core';
@Component({
selector: 'app-button',
template: ``
})
export class AppButtonComponent {}
```
### Structural Directives
Structural Directives are types of Directives that are used to change HTML DOM layout by adding, removing or manipulating Elements. [Learn more about structural directives.](https://angular.io/guide/structural-directives)
```
import { Component } from '@angular/core';
@Component({
selector: 'app-message',
template: `
Conditional message!
`
})
export class AppMessageComponent {
showMessage: boolean = true;
// You can toggle this value to show or hide the message
toggleMessage(): void {
this.showMessage = !this.showMessage;
}
}
```
### Attribute Directives
Attribute Directives are a type of directive that are mainly used to listen or change the behavior or appearance of DOM Elements, Attributes and Components. [Learn more about attribute directives](https://angular.io/guide/attribute-directives).
Here’s a small example of building a directive (we will dig into this more in a section below):
```
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({
selector: '[appColor]'
})
export class AppColorDirective {
@Input('appColor') set color(color: string) {
this.el.nativeElement.style.color = color;
}
constructor(private el: ElementRef) {}
}
```
## ElementRef
ElementRef (Element Reference) is a wrapper around a native DOM Element inside of a View. The ElementRef class contains a property `nativeElement`, which references the underlying DOM object that we can use to manipulate the DOM. [Read more](https://angular.io/api/core/ElementRef).
When creating a Directive, we use ElementRef to gain reference to the native HTML Element, which the Directive will be used on, and perform any manipulation we need to.
```
import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective implements OnInit {
constructor(private el: ElementRef, private renderer: Renderer2) { }
ngOnInit() {
this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
}
}
```
Here’s how we would use this directive in a component:
```
import { Component } from '@angular/core';
selector: 'app-button',
template: `
This paragraph will be highlighted in yellow.
`
})
export class AppButtonComponent {}
```
## HostListener
HostListener is a function decorator that allows you to listen and handle DOM events from the host element. Some examples of events include `keyboard` and `mouse` events. [Read more](https://angular.io/api/core/HostListener).
When creating a Directive, we use the @HostListener decorator in the Directive Class to listen for host events. Based on the event, we can perform any action needed.
```
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[appClickTracker]'
})
export class ClickTrackerDirective {
@HostListener('click', ['$event'])
onClick(event: MouseEvent) {
console.info('Element clicked:', event);
}
@HostListener('mouseenter')
onMouseEnter() {
console.info('Mouse entered');
}
@HostListener('mouseleave')
onMouseLeave() {
console.info('Mouse left');
}
}
```
Here’s how we would use this directive in a component:
```
import { Component } from '@angular/core';
selector: 'app-button',
template: `
Click or hover over this div.
`
})
export class AppButtonComponent {}
```
## How to Generate a Directive via the CLI
```
ng generate directive onlyNumbers
```
This will generate the directive file: `only-numbers.directive.ts` and the spec file: `only-numbers.directive.spec.ts`
## How to Build a Directive
As we have discussed above, Directives are very useful tools in Angular that can help improve your web application. The example below shows an Attribute Directive that would allow a user to enter only `letters` in an input field.
```
```
## Technical requirements
1. Use an `onlyNumber` **Directive** in **src/app/order/order.component.html** in the phone number input field. Using the Directive should look like this:
```
```
1. Generate and implement the `onlyNumber` **Directive**.
The Directive will be used to listen for the event on the input field. This Directive will be used in our order form phone number field.
> Hint: Use regex `regExp: RegExp = new RegExp(/^[0-9]*$/g)` to test if the input value contains any letters.
## Setup
✏️ Update **src/app/order/order.component.html** file to use the Directive we will create:
```
Order here
```
✏️ Run the following to generate the **Directive** and the directive’s tests:
```
ng g directive onlyNumbers
```
## How to verify your solution is correct
✏️ Update the spec file **src/app/only-numbers.directive.spec.ts** to be:
```
import { Component, DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { OnlyNumbersDirective } from './only-numbers.directive';
const simulateTyping = (
debugElement: DebugElement,
fixture: ComponentFixture,
value: string
) => {
let buildString = '';
for (const singleValue of value) {
const keydownEvent = new KeyboardEvent('keydown', {
key: singleValue,
cancelable: true,
});
debugElement.nativeElement.dispatchEvent(keydownEvent);
if (!keydownEvent.defaultPrevented) {
buildString = `${buildString}${singleValue}`;
}
}
debugElement.nativeElement.value = buildString;
debugElement.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
};
@Component({
template: ``,
})
class TestInputComponent {}
describe('OnlyNumbersDirective', () => {
let debugElement: DebugElement;
let fixture: ComponentFixture;
beforeEach(() => {
fixture = TestBed.configureTestingModule({
declarations: [OnlyNumbersDirective, TestInputComponent],
imports: [FormsModule],
providers: [],
}).createComponent(TestInputComponent);
fixture.detectChanges();
debugElement = fixture.debugElement.query(By.css('input'));
});
it('should create an instance', () => {
const directive = new OnlyNumbersDirective(debugElement);
expect(directive).toBeTruthy();
});
it('should contain only text 329053', () => {
const inputString = '32T90V53CFACR';
simulateTyping(debugElement, fixture, inputString);
expect(debugElement.nativeElement.value).toEqual('329053');
});
it('should contain only text 200', () => {
const inputString = 'THisIsA200LETTERWORD';
simulateTyping(debugElement, fixture, inputString);
expect(debugElement.nativeElement.value).toEqual('200');
});
it('should be an empty string', () => {
const inputString = 'STRING OF LETTER NO NUMBER';
simulateTyping(debugElement, fixture, inputString);
expect(debugElement.nativeElement.value).toBe('');
});
});
```
If you’ve implemented the solution correctly, the tests will pass when you run `npm run test`!
## Solution
Click to see the solution ✏️ Update **src/app/only-numbers.directive.ts** to:
```
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[pmoOnlyNumbers]',
})
export class OnlyNumbersDirective {
private allowedKeys: string[] = ['Backspace', 'ArrowLeft', 'ArrowRight'];
private regExp: RegExp = new RegExp(/^[0-9]*$/g);
constructor(private elementRef: ElementRef) {}
@HostListener('keydown', ['$event'])
onKeyDown(keyboardEvent: KeyboardEvent) {
if (this.allowedKeys.indexOf(keyboardEvent.key) !== -1) {
return;
}
const inputNativeElementValue = this.elementRef.nativeElement.value;
const next = `${inputNativeElementValue}${keyboardEvent.key}`;
if (next && !next.match(this.regExp)) {
keyboardEvent.preventDefault();
}
}
}
```
###### On this page...
###### Get help
If you need [help](https://discord.gg/J7ejFsZnJ4) with an exercise, please reach out to us on [Discord](https://discord.gg/J7ejFsZnJ4)
If you find a bug, please [create an issue](https://github.com/bitovi/academy/issues/new) or email [contact@bitovi.com](mailto:contact@bitovi.com?Subject=Training%20Suggestion)
## Join the Bitovi Newsletter
Do you want to receive updates about new Bitovi Academy courses, Bitovi open source projects, and dev community news? If so, please provide your email. We won’t spam you or give it away for any reason!
*By providing your email you agree to receive communications from Bitovi*
```json
{
"@context": "http://schema.org",
"@type": "Organization",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://www.bitovi.com/academy/learn-angular/creating-directive.html",
"description": "Learn how to create Directives in Angular that can change the appearance or behavior of DOM Elements.
"
},
"url": "http://bitovi.com",
"logo": "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg",
"image": "https://www.bitovi.com/hubfs/bitovi-logo-x2.png",
"name": "Bitovi Web App Consulting",
"alternateName": "Bitovi",
"naics": "541511",
"description": "Bitovi is a UX, UI design and front-end JavaScript development consulting company",
"address": {
"@type": "PostalAddress",
"streetAddress": "1134 Pine Tree Lane ",
"addressLocality": "Libertyville",
"addressRegion": "IL",
"addressCountry": "United States",
"postalCode": "60048"
},
"areaServed": {
"@type": "GeoCircle",
"geoMidpoint": {
"@type": "GeoCoordinates",
"latitude": "41.8781",
"longitude": "87.6298"
},
"geoRadius": "5000 km"
},
"telephone": "312-620-0386",
"email": "contact@bitovi.com",
"sameAs": [
"https://www.facebook.com/BitoviLLC/",
"https://twitter.com/bitovi",
"https://www.linkedin.com/company/bitovi"
]
}
```