How to add some html elements using Angular2's attribute directive

Question

If a certain attribute directive is present on an HMTL element, I would like to show some additional html content. I have searched but can't find what am looking for. For example if P tag has a directive called can-delete, then I would like delete button to show.

<p can-delete>Hello World!</p>

This is what I got so far:

// >>> home.ts
import { Component } from "@angular/core";
import {canDelete } from "./can-delete.directive.ts";
@Component({
  templateUrl:"home.html",
  directives: [canDelete]
})
export class HomePage {

  constructor() {   }

}

// >>> home.html
<ion-header>
  <ion-navbar primary>
    <ion-title>
      Ionic 2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  Content...
  <p can-delete>Hello World!</p>
</ion-content>

// >>> can-delete.directive.ts
import { Directive, ElementRef } from "@angular/core";

@Directive({
  selector: "[can-delete]"
})
export class canDelete {
  constructor(el: ElementRef) {
   //show delete button
   //<button>Delete</button>
  }
}

Answer 1

Your code is not valid, so here is an update:

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

@Directive({
  selector: '[appLoading]'
})
export class LoadingDirective {

  constructor(private elementRef:ElementRef){
    this.elementRef.nativeElement.innerHTML ='<h1>Hello World2</h1>';
  }
}

Answer 2

you directive implementation looks incomplete. you have to bind your directive to any event like click, focus etc in order to consume that directive.

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

@Directive({
  selector: "[can-delete]"
})

export class canDelete {
  constructor(private _el: ElementRef, private _renderer : Renderer) {

  }
@HostListener('mouseenter') onMouseEnter() {
     this._renderer.createElement(this._el.nativeElement.parentNode, 'button');
  }
}

we are using createElement method to create button when user hover over element containing our directive. hope it helps!

EDIT : have a look at renderer createElement example here for more info.

Answer 3

Why don't you use *ngIf. It can be used to show conditional HTML.

Html file

<p>Hello World! <button type="button" *ngIf="showButton">Delete</button></p>

<button type="button" (click)="toggleButton()">Toggle</button>

app.component.ts

export class AppComponent implements OnInit{

    showButton:boolean;

constructor(){}

ngOnInit(){
    this.showButton = true;
}

toggleButton(){
   this.showButton = !this.showButton;
}

}

Answer 4

You should create a directive:

import { Directive,ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Directive({
    selector: '[add-html]'
})

export class TestDirectives{
    constructor(el:ElementRef,private sanitizer:DomSanitizer,private elementRef:ElementRef){
            this.elementRef.nativeElement.innerHTML ='<h1>Hello World</h1>';
    }
}

and now your directive has been created and you will have add this directive into your app.module.ts like below:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestDirectives } from '../directives/test.directive';


@NgModule({
  declarations: [
    AppComponent,
    TestDirectives
  ],
  imports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You will have to use your directive in your html, where you want to add this html, like in below code:

<div add-html></div>

Now see the output.