Angular: Determine the value of href in an <a> HTML element using a ternary operator-CodePudding

Given this code:

<a 

href= "mailto:{{this.employee}}?subject={{this.getMailService().template1(text).subject}}&body={{this.getMailService().template1(text).body}}"
target="_top">
    <div>
        <mat-icon  aria-hidden="false" fontIcon="user"></mat-icon>
    </div>
    <div>
        {{this.employee}}
    </div>
 </a>

I want to avoid duplicate code.

The value of href should change depending on the value of the variable i.

If i <= 1, the function template1 is called, otherwise the function template2 should be called.

I have already tried the following:

href= "i<=1 ? 'mailto:{{this.employee}}?subject={{this.getMailService().template1(text).subject}}&body={{this.getMailService().template1(text).body}}':'mailto:{{this.employee}}?subject={{this.getMailService().template2(text).subject}}&body={{this.getMailService().template2(text).body}}'

When I click on the mailTo link I get the following error:

Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL segment: 'i'
Error: NG04002: Cannot match any routes. URL segment: 'i'

How can I implement this in Angular?

CodePudding user response：

One candidate solution for a problem like this is to leverage ng-template, as this allows HTML to be duplicated and configured via variables in an intuitive way. It may be overkill for a 2-option scenario, but if you intend to grow your number of mailService templates further (or support multiple variables and/or from multiple sources) this method would really shine:

<ng-template
  #LinkTemplate
  let-mailServiceTemplate="mailServiceTemplate">
  <a 
    
    href="mailto:{{employee}}?subject={{mailServiceTemplate.subject}}&body={{mailServiceTemplate.body}}"
    target="_top">
    <div>
      <mat-icon  aria-hidden="false" fontIcon="user"></mat-icon>
    </div>
    <div>
      {{employee}}
    </div>
  </a>
</ng-template>

<!-- Template 1 -->
<ng-container
  [ngTemplateOutlet]="LinkTemplate"
  [ngTemplateOutletContext]="{ mailServiceTemplate: getMailService().template1(text) }">
</ng-container>

<!-- Template 2 -->
<ng-container
  [ngTemplateOutlet]="LinkTemplate"
  [ngTemplateOutletContext]="{ mailServiceTemplate: getMailService().template2(text) }">
</ng-container>

<!-- Template 3 -->
<ng-container
  [ngTemplateOutlet]="LinkTemplate"
  [ngTemplateOutletContext]="{ mailServiceTemplate: getMailService().template3(text) }">
</ng-container>

Edit - To address your specific question with reference to the i <= 1 condition, potential example usage options would be as follows:

Varying the mailServiceTemplate variable contents

<ng-container
  [ngTemplateOutlet]="LinkTemplate"
  [ngTemplateOutletContext]="{
    mailServiceTemplate: i <= 1 ? getMailService().template1(text) : getMailService().template2(text)
  }">
</ng-container>

Varying the whole template reference

<ng-container
  *ngIf="i <= 1"
  [ngTemplateOutlet]="LinkTemplate"
  [ngTemplateOutletContext]="{ mailServiceTemplate: getMailService().template1(text) }">
</ng-container>

<ng-container
  *ngIf="i > 1"
  [ngTemplateOutlet]="LinkTemplate"
  [ngTemplateOutletContext]="{ mailServiceTemplate: getMailService().template2(text) }">
</ng-container>

CodePudding user response：

You can do that using attribute binding of angular. In attribute binding we needs to provide a third bracket to that attribute and inside the bracket we need to bind by mentioning [attr.attribute_name]="" these way. For your problem you can do the following. In attribute binding You need not to use interpolation. Also you can direct use the variable name inspite of adding this keyword in the prefix position. For the non variable part you need to use string quotation which will be single quoted because the double quote will be used on overall value. Then for the variable part just concatenate those with the string. Follow the reference for know in details.

reference: Angular Attribute Binding

[attr.href]=" i<=1 ? 'mailto:'   employee   '?subject='   getMailService().template1(text).subject   '&body='   getMailService().template1(text).body:'mailto:employee?subject='   getMailService().template2(text).subject   '&body='   getMailService().template2(text).body"