> For the complete documentation index, see [llms.txt](https://fancyloves.gitbook.io/frontendtech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fancyloves.gitbook.io/frontendtech/angularjs/fundamentals/directives/customized-structural-directives.md).

# Customized Structural Directives

## Intro

A directive **class**

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

A directive's **attribute name**

* spelled in **lowerCamelCase** (`ngIf`). 
* 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**.