ошибка при использовании компонента, имеющего поле ввода

Question

У меня есть компонент, определенный со следующими Input полями

class DialogComponent {
... 

    @Input() dialogMessage:string;
      @Input() dialogID:string;
      @Input() dialogContext:DialogContext;
....
}

Я использую его следующим образом в app.component.html

<app-dialog-box *ngIf="isSignupProcess()" #dialogBox dialogMessage="{{dialogMessage}}" [dialogID]="'appDialog'" [dialogContext]="{{dialogContext}}" ></app-dialog-box>

app.component.ts имеет соответствующие поля, определенные следующим образом:

  dialogMessage:string;
  dialogId:string;
  dialogContext:DialogContext;

Я хочу, чтобы в зависимости от условия показывался компонент app-dialog-box, и я соответственно устанавливаю значения компонента.

  setDialog(message:string,context:DialogContext) {
    this.dialogMessage=message;
    this.dialogContext = context;
    //this.dialogComponent.dialogShow(context); 
  }


  isSignupProcess(){
    if(this.signup!==""){
      if(this.signup === "success") {
        this.setDialog("Signup was successful",new DialogContext("",""))
      }else if(this.signup === "error") {
        this.setDialog("Error: Signup wasn't successful",new DialogContext("",""))
      } else {
        this.setDialog("Unrecognised message: "+this.signup,new DialogContext("",""))
      }
      this.signup = "";
      return true;
    } else {
      return false;
    }

  }

мой код не компилируется, и я получаю ошибку Parser Error: Missing expected : at column 16 in [{{dialogContext}}] in ng:///AppModule/AppComponent.html@14:114 ("box *ngIf="isSignupProcess()" #dialogBox dialogMessage="{{dialogMessage}}" [dialogID]="'appDialog'" [ERROR ->][dialogContext]="{{dialogContext}}" ></app-dialog-box>

Ошибка в строке <app-dialog-box *ngIf="isSignupProcess()" #dialogBox dialogMessage="{{dialogMessage}}" [dialogID]="'appDialog'" [dialogContext]="{{dialogContext}}" ></app-dialog-box>