根据条件用TemplateRef替换ElementRef

Question

I want to replace the button passed as ElementRef with the template loadingButtonTemplate if loading evaluates to true . How can I accomplish this? If loading is back to false , it should replace vice versa.

app-form.component.ts:

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html'
})
export class FormComponent {

  @Input()
  submitButton: ElementRef;

  @Input()
  loading: boolean;

  @ViewChild('loadingButtonTemplate')
  private loadingButtonTemplate: TemplateRef<any>;

  constructor() {
  }

}

app-form.component.html:

<form [formGroup]="formGroup" (ngSubmit)="submit()" autocomplete="off" novalidate>
  <ng-content></ng-content>
</form>

<ng-template #loadingButtonTemplate>
  <button loadingButton></button> <!-- third party directive -->
</ng-template>

desired usage:

<app-form [submitButton]="submitButton" [loading]="loading">

  ... some form inputs ...

  <button type="button">Delete</button>
  <button #submitButton type="submit">Add</button>

</app-form>

Could another, better approach be to "inject" the directive and the needed classes to the button instead of replacing it?

Answer 1

You can achieve this using *ngIf and else.

<app-form [submitButton]="submitButton" [loading]="loading">

  ... some form inputs ...

  <button type="button">Delete</button>
  <button #submitButton *ngIf="!loading;else loadingButtonTemplate" type="submit">Add</button>

</app-form>

<ng-template #loadingButtonTemplate>
  <button loadingButton></button> <!-- third party directive -->
</ng-template>