title: Angular 2 a href target
body: <p>I have an array of the following class:</p>
  
  <pre><code>export class Ref {
      constructor(
          private id: number,
          private image: string,
          private title: string,
          private descript: string,
          private url: string,
          private urlType: string,
      ) { }
  }
  </code></pre>
  
  <p>and in my <code>html</code> I call it like this:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-3" *ngFor="let r of ref"&gt;
          &lt;a [href]="r.url" [target]="r.urlType" class="reforms-1"&gt;
              &lt;img class="refimg" [src]="r.image" alt=""&gt;
              &lt;span class="reftitle"&gt;&lt;h4&gt;{{r.title}}&lt;/h4&gt;&lt;/span&gt;
              &lt;span class="refline"&gt;&amp;nbsp;&lt;/span&gt;
              &lt;p&gt;
                  {{r.description}}
              &lt;/p&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Everything works well except <code>&lt;a&gt;</code>. I have an <code>url</code> type which sometimes is <code>_blank</code> sometimes <code>_self</code> etc. So, sometimes it will be router link and sometimes external link (that's why I'm not using <code>routerLink</code>).</p>
  
  <p>When I click on the link it's doing full post back in new page when it's <code>_blank</code> and that's ok but when it's <code>_self</code> browser is doing post back in the same page. </p>
  
  <p>How can I rectify this mistake?</p>