CODEWITHSUNDEEP
angulartypescriptangular2-directivesangular-directive
Systemallica
Systemallica

Reputation: 116

Angular directives: should I use structural or attribute in this case?

I am writing an Angular 5 directive, whose objective is adding some host views(created from a component) into the viewContainer.

My dilemma is that I don't know if I should use an attribute directive or a structural directive for this purpose. I've tried both, and they both work, so I need an explanation on which one I should use.

Attribute directive:

HTML: 

<div [myAttrDirective]="param"></div>

Directive:

import {
        Directive,
        Input,
        ViewContainerRef,
        ComponentRef,
        ComponentFactoryResolver,
} from "@angular/core";
import { MyComponent } from "./my-component";

@Directive({ selector: "[myAttrDirective]" })
export class AttrDirective {
   @Input()
   public set AttrDirective(attrDirective: any) {
      const factory = this.componentFactoryResolver.resolveComponentFactory(
          MyComponent,
      );

      attrDirective.forEach((element, index) => {
         const componentRef: ComponentRef<
            MyComponent
         > = this.viewContainer.createComponent(factory);

         const myComponent: MyComponent = componentRef.instance;
         myComponent.setInformation({ element });
      });
   }

   constructor(
      private viewContainer: ViewContainerRef,
      private componentFactoryResolver: ComponentFactoryResolver,
   ) {}
}

Structural directive:

HTML: 

<div *myStrDirective="params"></div>

Directive:

import {
        Directive,
        Input,
        ViewContainerRef,
        ComponentRef,
        ComponentFactoryResolver,
} from "@angular/core";
import { MyComponent } from "./my-component";

@Directive({ selector: "[myStrDirective]" })
export class StrDirective {
   @Input()
   public set StrDirective(strDirective: any) {
      const factory = this.componentFactoryResolver.resolveComponentFactory(
          MyComponent,
      );

      strDirective.forEach((element, index) => {
         const componentRef: ComponentRef<
            MyComponent
         > = this.viewContainer.createComponent(factory);

         const myComponent: MyComponent = componentRef.instance;
         myComponent.setInformation({ element });
      });
   }

   constructor(
      private viewContainer: ViewContainerRef,
      private componentFactoryResolver: ComponentFactoryResolver,
   ) {}
}

Upvotes: 4

Views: 2305

Answers (2)

Pranay Rana
Pranay Rana

Reputation: 176896

which one to use attribute directive or a structural directive ?

Answer is :

attribute directive - this directive used to change appearance or behavior of element with which it attached. Example : I want to add tooltip dynamically to my textbox control or color textbox and its parent based on condition. So it changing appearance or behavior of element in that case go for attribute directive as you want to interact with element with which directive is attached.

Structural directive - this directive used to change structure of html. For example *ngFor (which adds element in html), *ngIF (hide show element in html based on condition), in that case you can use structural directive.

In you case you are not changing div element but you are adding element in html structure , so you can create structure directive.

Upvotes: 3

sugarme
sugarme

Reputation: 761

I hardly see much difference between them. From the docs the structural directive with The asterisk (*) prefix will be interpreted by Angular into atribute eventually. So, I might prefer attribute.

Have a look here https://angular.io/guide/structural-directives#the-asterisk--prefix

Upvotes: 0

Related Questions