# Customized Structural Directives

## Intro

A directive **class**

* spelled in **UpperCamelCase** (`NgIf`).&#x20;
* The guide refers to the directive class when talking about its properties and what the directive does.&#x20;

A directive's **attribute name**

* spelled in **lowerCamelCase** (`ngIf`).&#x20;
* The guide refers to the attribute name when describing how you apply the directive to an element in the HTML template.

## Rules

* The directive attribute name should be spelled in **lowerCamelCase** and begin with a **prefix**. Don't use `ng`. That prefix belongs to Angular.
* The directive class name ends in `Directive` per the style guide. Angular's own directives do not.

```javascript
src/app/unless.directive.ts

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

/**
 * Add the template content to the DOM unless the condition is true.
 */
@Directive({ selector: '[appUnless]'})
export class UnlessDirective {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }

  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}
```

A simple structural directive like this one creates an [_embedded view_](https://angular.io/api/core/EmbeddedViewRef) from the Angular-generated`<ng-template>`and inserts that view in a [_view container_](https://angular.io/api/core/ViewContainerRef) adjacent to the directive's original`<p>`host element.

You'll acquire the`<ng-template>`contents with a[`TemplateRef`](https://angular.io/api/core/TemplateRef)and access the view container through a[`ViewContainerRef`](https://angular.io/api/core/ViewContainerRef).

You inject both in the directive constructor as private variables of the class.

Angular sets the `appUnless` property whenever the value of the condition changes. Because the `appUnless` property does work, it needs a **setter**.
