title: Double click Angular directive
body: <p>I have the following template in Angular 7:</p>
  
  <pre><code>&lt;ul class="posts"&gt;
    &lt;li *ngFor="let post of posts"&gt;
      &lt;h2&gt;{{post.title}}&lt;/h2&gt;
      &lt;a (click)="delete(post)"&gt;Delete Post&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I would like to create a confirm directive to be used as:</p>
  
  <pre><code>&lt;a (click)="delete(post)" confirm="Confirm delete" class="delete"&gt;Delete Post&lt;/a&gt;
  </code></pre>
  
  <p>The moment is clicked (one is enough) it changes to:</p>
  
  <pre><code>&lt;a (click)="delete(post)" confirm="Confirm delete" class="delete confirm"&gt;Confirm delete&lt;/a&gt;
  </code></pre>
  
  <p>So what happens is:<br>
  - Anchor's text changes from "Delete Post" to the one inside confirm, e.g. "Confirm Delete";<br>
  - Class "confirm" is added to anchor CSS classes;<br>
  - Delete(post) method is only called after anchor being clicked on "confirm mode";<br>
  - After being clicked on "confirm mode" OR 5 seconds go by without being clicked it goes to its original state:      </p>
  
  <pre><code>&lt;a (click)="delete(post)" confirm="Confirm delete" class="delete"&gt;Delete Post&lt;/a&gt;
  </code></pre>
  
  <p>Can this be done with a directive? </p>
  
  <pre><code>import { Directive } from '@angular/core';
  
  @Directive({
    selector: '[confirm]'
  })
  
  export class ConfirmDirective {
  
    constructor(el: ElementRef) {
       el.nativeElement ...
    }
  
  }
  </code></pre>
  
  <p>I started to create the directive but I am really not sure how to do this.</p>