How to add some html elements using Angular2's attribute directive
<p>If a certain <code>attribute directive</code> 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 <code>can-delete</code>, then I would like delete button to show.</p>

<p><code>&lt;p can-delete&gt;Hello World!&lt;/p&gt;</code></p>

<p>This is what I got so far:</p>

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

  constructor() {   }

}

// &gt;&gt;&gt; home.html
&lt;ion-header&gt;
  &lt;ion-navbar primary&gt;
    &lt;ion-title&gt;
      Ionic 2
    &lt;/ion-title&gt;
  &lt;/ion-navbar&gt;
&lt;/ion-header&gt;

&lt;ion-content&gt;
  Content...
  &lt;p can-delete&gt;Hello World!&lt;/p&gt;
&lt;/ion-content&gt;

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

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