Angular 7/8/9 | Add ( Star *) Asterisk Sign to Required Fields using Custom Directive for Bootstrap Form

Adding Asterisk to required fields on a form helps the user to quickly identify the required fields. Adding a star(*) is now an industrial standard that is required in almost every data-centric application consuming any kind of data.

For lengthy form it becomes a cumbersome job to add star sign to every form of control. Here we will discuss how to create a custom Angular 2+ directive to automatically add an asterisk(*) sign to required field controls like Input, Textarea, Radio, Checkboxes, and Select boxes.

Bootstrap with Angular is widely used these days and becoming one of the top choices for application building. Our form for demonstration will use Bootstrap classes to build a form with the basic control type we discussed and most of them will be having required HTML attributes.

Our addAsterisk Directive will add an asterisk(*) on Form Field controls with the required attribute.

Let’s start creating our Directive, we will also get to know, how to create a directive which can be injected anywhere in the multi-module based application with its own module.

Create Directive

Directives in Angular are simple classes with a @Directive decorator in them which differentiates them from a normal class component.

Using NG CLI tool you can easily create a new directive by running following command in terminal:

Above command will create a new directive MarkAsteriskDirective as shown below in the ~directives/mark-asterisk.directive.ts file:


In @Directive decorator, we define some meta-information about the selector on which this directive will work.

To keep implementation easy we will use [required] selector property in meta information so that there will not much work left to do in template across the application.

Change it as shown below:

Make Changes in Directive

Now to add an asterisk (*) on form control label we will use Renderer2 and ElementRef classes in our directive with OnInit component life cycle hook.

Import them and add in the constructor as shown below:

In the template we will have Bootstrap form element as shown below:

In the above HTML code, we need to append <span class="required-asterisk">*</span> in


Basically in our directive, we need to look up to the parent tag of our selector which is [required], after finding the immediate parent we will find the LABEL element then append <span> with * sign.

Final Directive

Our final directive will look like this:

Add the following CSS style as well in styles.css file:



Make sure to add above directive in the app.module.ts file at declarations array:

That’s it! Look for bonus tip below:

Sometime you may have multiple modules with their own components, in that case, to easily inject a directive, we can create it own module.

So, after creating the Directive’s own module we DON’T need to add a directive in the declaration, instead, we will add the directive module in import array.

For this modular practice add @NgModule in the directive as shown below:

In the app.module.ts file or any other module, you can add this directive’s module in the imports array to use in any component of this module.

So in the above tutorial we learned how to create a Modular directive to add an asterisk(*) sign for required fields on form controls.



Leave a Reply

Notify of