DEV Community: Angular Kenya

How To Create A Custom Directive in Angular

Angular Kenya — Fri, 17 Jun 2022 12:01:31 +0000

Structural directives allow us to change the DOM In different ways: By adding, changing, or removing all the elements on the page. They are added as an attribute in the HTML element. The directive should always be prefixed with an * to make them easy to distinguish. Angular provides some built-in directives such as ngIf, ngFor, etc.

💡 The asterisk (*) is syntactic sugar that wraps under the hood of our HTML, where we attach this directive to the ng-template.

Let’s Create Our First Directive

We will create a directive that shows some content after a period of time.

First, you need to run this command on the Angular CLI to create a directive class:

/* ng generate directive name-of-directive */
ng generate directive showContentAfterDelay

Add the following code on the directive class generated:

import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ozarksShowContent]'
})
export class ShowContentDirective implements OnInit {

  @Input('ozarksShowContent') delay = 0

  constructor(private viewContainerRef: ViewContainerRef,
              private  template: TemplateRef<any>) 
              { }

  ngOnInit(): void {
      this.viewContainerRef.createEmbeddedView(this.template);
      setTimeout(() => {
        // cleans up the view cointainer ref
        this.viewContainerRef.clear();
      }, this.delay)  
  }
}

The Directive provides the functionality of the @Directive decorator in which we give its property selector to ozarksShowContent so that we can use this selector anywhere in the application.

We pass data to the directive using the @Input() decorator - it's a property that the parent component (Parent) passes to the child component.

We inject the ViewCointainerRef and TemplateRef in the constructor. The ViewContainerRef represents a container where one or more views can be attached, while the TemplateRef is a way to reference the ng-template in the component/directive.

On the template, we add our custom directive like this:

<h1>Welcome to the Lazy-O Motel</h1>
<section *ozarksShowContent="5000">
  <h1>Let Me See You!</h1></section>

If you try to bind the input value to the template like this it won’t work because Angular tries to resolve the input as a property of the section which does not exist.

<!--This will not work-->

<h1>Welcome to the Lazy-O Motel</h1>
<section *ozarksShowContent [delay]="5000">
  <h1>Let Me See You!</h1> 
</section>

In case you would like to render content after the 5 seconds, this is how you implement it:

On the .ts file

import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ozarksShowContent]'
})
export class ShowContentDirective implements OnInit {

  @Input('ozarksShowContent') delay = 0

  // showing content after some time
  @Input("ozarksShowContentThen") placeholder: TemplateRef<any> = null;

  constructor(private viewContainerRef: ViewContainerRef,
              private  template: TemplateRef<any>) 
              { }

  ngOnInit(): void {
      this.viewContainerRef.createEmbeddedView(this.template);
      setTimeout(() => {
        // cleans up the view cointainer ref
        this.viewContainerRef.clear();
        if(this.placeholder){
          // if the value is true,show the template
          this.viewContainerRef.createEmbeddedView(this.placeholder )
        }
      }, this.delay)

  }
}

On the .html file

<section *ozarksShowContent="5000; then placeholder">
  <h1>Let Me See You!</h1> 
</section>

<ng-template #placeholder>
  <mat-toolbar color="primary">
    <mat-icon>hotel</mat-icon> &nbsp; &nbsp;
    <span>Welcome to the Lazy-O Motel </span>
  </mat-toolbar>
</ng-template>

Conclusion

Custom directives can be helpful when custom logic is involved in the DOM element. For example, in user role management or you may want to show some aspects to different customers, say you have premium customers, free-plan customers, etc., on a web application. When inbuilt directives don't give the required output, we can always write a custom directive.

Happy Learning!

Introduction to Angular Forms

Angular Kenya — Mon, 06 Jun 2022 14:33:13 +0000

Forms are necessary for any Angular application. They are used to collect users' input data from the view of the application. This article introduces you to the power of Angular forms. We will dive into different forms and do a simple implementation of a Reactive form.

Basics of Angular Forms

There are two different forms for a user to input data: Reactive and Template-driven forms.

According to the Angular Documentation:

💡 Reactive forms: Provide direct, explicit access to the underlying forms object model. Compared to template-driven forms, they are more robust: they're more scalable, reusable, and testable.

💡 Template-driven: Rely on directives in the template to create and manipulate the underlying object model.

Template-driven forms use the ng-Model directive, which helps bind your form to a value, hence its synchronous nature. Reactive forms follow the separation of concerns principle, where the core functionality is in the component, and the presentation layer is stored in the template. Reactive forms are also asynchronous: meaning an event occurs in a form and is then delivered instantly using a callback.

Let’s Create our first reactive form!

Step 1: Import necessary modules

We will create a simple login reactive form that will have a few validation rules before the user is able to submit a form.

First, you need to add the ReactiveFormsModule from the Angular forms module in the module.ts file, for example, app.module.ts

💡 The FormsModule gives the ability to work with template-driven and reactive forms

Step 2: Create the Reactive Form

The ‘loginForm’ is initialized with the type FormGroup. FormGroup is one of the building blocks of Angular forms. It is a collection of form controls that tracks the value and validity state of a group of Form control instances.

We have two form fields in our login form:

Email field - the field is required and its value to be of a minimum character length of 64
Password field - the field is required and its value to be of a minimum character length of 64

💡 A validator is a function that processes a FormControl or collection of controls and returns an error map or null. A null map means that validation has passed.

Step 3: Show the Field and Validate User Input

The presentation layer will look like this:

<form [formGroup]='loginForm'>
    <div class="form-group">
        <label for="username">Email</label>
        <input formControlName='email' id="email" type="text" class="form-control">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input formControlName='password' id="password" type="text" class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

The formGroup directive on the form tag passes the form group instantiated on the component class while the formControlName directive passes a string with the name of your controls used in the component class.

We can go a step further to show validation error messages to indicate to a user if a field is required, or if the user has not met the validation rules set for a minimum character length or exceeded a maximum character length.

<form [formGroup]="loginForm">
    <div class="form-group">
        <label for="email">Email</label>
        <input formControlName='email' id="email" type="text" class="form-control">
        <ng-container *ngIf="loginForm.get('email').invalid && loginForm.get('email').errors &&  (loginForm.get('email').dirty || loginForm.get('email').touched)">
            <small class="text-danger" *ngIf="loginForm.get('email').hasError('required')">
                This field is required.
            </small>
            <small class="text-danger" *ngIf="loginForm.get('email').hasError('maxlength')">
                The maximum length for this field is {{loginForm.get('email').errors.maxlength.requiredLength}} characters.
            </small>
        </ng-container>
    </div>
</form>

Instead of duplicating the code for each field and for all forms, a better approach might be to abstract this into a separate component that can be reused across the codebase.

Step 4: Disable the submit button

Finally, we can disable the submit button if the form is invalid:

<button class="btn btn-primary"  [disabled]="loginForm.invalid" type="submit">Sign Up</button>

Happy Learning!