3

I am trying to create an angular directive that does two things. 

 1. change border of the host element
 2. append a button at the end of the host element

As of now i am on the first step where i have to set the border of host element.

HTML

  <div *myDirective
        <h1> some value </h1>
  </div>

Directive

export class MyDirective{

  constructor(private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) {
      this.templateRef.elementRef.nativeElement.style['border'] = '1px solid red';
      this.viewContainer.createEmbeddedView(this.templateRef);
    }      
}

Now when i add this directive to a div element,I get the following error, 

Cannot set property 'border' of undefined

How could i change the style and append another element to the host using structural directive?

[Edit] As most of the answers are suggesting me to create an attribute directive, i just want to post the statement from angular document regarding structural directives.

They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

In that case creating attribute directive to append a button to the host element is not proper. Isn't it?

kboul
  • 13,836
  • 5
  • 42
  • 53
JPS
  • 2,730
  • 5
  • 32
  • 54

3 Answers3

1

Try like this:

DEMO

mydirective.ts:

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

@Directive({
  selector: '[appMydirective]'
})
export class MydirectiveDirective {

  constructor(private el: ElementRef) {
    console.log(this.el.nativeElement)
    el.nativeElement.style.border = '2px solid red';
    let bt = document.createElement("button");
    var btContent = document.createTextNode("my Button");
    bt.appendChild(btContent);
    bt.style.cssFloat = 'right'
    this.el.nativeElement.append(bt)
  }
}

HTML:

<div appMydirective>
        <h1> some value </h1>
  </div>
Akj
  • 7,038
  • 3
  • 28
  • 40
0

For the border you need to do the following:

Create the directive:

import { Directive, ElementRef, Renderer } from '@angular/core';

// Directive decorator
@Directive({ selector: '[myDirective]' })
// Directive class
export class MyDirective {
    constructor(el: ElementRef, renderer: Renderer) {
    // Use renderer to render the element with styles
    renderer.setElementStyle(el.nativeElement, 'border', '1px solid red');
    }
}

Following you need to declare and export this directive via SharedModule so that the app module can load and import it globally.

Shared.module

import { NgModule } from '@angular/core';

import { MyDirective } from './my-directive.directive';

@NgModule({
    declarations: [
        MyDirective
    ],
    exports: [
        MyDirective
    ]
})
export class SharedModule{}

Then import the shared module in the app.module

then use it as follows:

<div myDirective>
    <h1> some value </h1>
</div>

Demo

kboul
  • 13,836
  • 5
  • 42
  • 53
  • as per angular documentation to add, remove manipulate DOM we need to use structural directive. But what you have created is an attribute directive. Isn't that an anti-pattern? – JPS Aug 29 '18 at 10:19
  • According to the [documentation](https://angular.io/guide/attribute-directives) an "Attribute directive changes the appearance or behavior of a DOM element". If you want to apply css using a directive it is the way to go and for applying border it is what you are doing. In angular docs they apply a highlight effect which is again a css change so I don't see an anti-pattern. – kboul Aug 29 '18 at 10:42
  • as i have the one more requirement where i have to add button at the end of host element, i cannot use attribute directive. – JPS Aug 29 '18 at 11:11
0

Indeed I would use a structural directive for this.

But the templateRef.elementRef.nativeElement is just a html comment, and there is no style property.

To append the button you can follow this very good example of a structural directive: Adding a Component to a TemplateRef using a structural Directive

westor
  • 1,426
  • 1
  • 18
  • 35