title: How to add some html elements using Angular2's attribute directive
body: <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>