Delay with disable button in Angular2

Question

I am trying that if you insert a new product My app should have a delay (2seg), then My Button was disabled until that my server accept or refuse the insert.

I have 2 problems :

1º TypeError: this.http.post(...).delay is not a function . 2º I can't change status my form for disabled my button .

insert(formModifyConfig: NgForm) {

        const url = 'http://localhost:8080/insert';


        this.service.insert(url , this.product).subscribe(param => {

            let params = JSON.parse(param);
            this.myMessage.success = params.success;
            this.myMessage.message =  params.message;

            if ( this.myMessage.success) {
                this.openModalUpdate = false;
                this.confirmedServer = true;
            } else {
                this.errorServer = true;
            }

        },  error => {
            formModifyConfig.status = false; --> Second error.
           // formModifyConfig.form.invalid = true;  --> Second error.
            this.errorServer = true;
            this.myMessage.message = "Error Server";
        });
   }

//Service Angular

  insert(url , product) {
    return this.http.post(url, product , { responseType: 'text'}).delay(2000); --> First error.
  }

I search that While my server try insert (true o false) My Button the Angular should be disabled until that my server answer

html:

<form #insertConfig="ngForm" (ngSubmit)="insert(insertConfig)" class="compact" novalidate>
    <clr-modal [(clrModalOpen)]="openModalUpdate" [clrModalStaticBackdrop]="true">

        <h3 class="modal-title">Insert{{ staticParamName }}</h3>

        <div class="modal-body">

                <clr-alert [clrAlertType]="'alert-danger'" *ngIf="errorServer">
                        <clr-alert-item>
                            <span class="alert-text">
                               {{ this.myMessage.message }}
                            </span>
                        </clr-alert-item>
                     </clr-alert>
            <div class="form-group row">
                <div class="col-xs-4">
                    <label for="nameParameter">Name: </label>
                </div>
                <div class="col-xs-8">
                    <input type="text" id="nameParameter" name="nameParameter" class="form-control" [(ngModel)]="insert.parameter" required>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-xs-4">
                    <label for="description">Description: </label>
                </div>
                <div class="col-xs-8">
                    <input type="text" id="description" name="description" class="form-control" [(ngModel)]="insert.description">
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary" [disabled]="insertConfig.form.invalid">Insert</button>
            <button type="button" class="btn btn-outline" (click)="openModalUpdate = false">Cancel</button>
        </div>
    </clr-modal>
</form>

Answer 1

This is just a example of how would i have done it considering above usecase,

1. create a Boolean variable on your component, let's say serviceCalled = false;

2. change your submit html as

   Insert

3. In component method

   insert( formModifyConfig: NgForm ){

           serviceCalled=true;
   
           const url = 'http://localhost:8080/insert';
   
           this.service.insert(url , this.product).subscribe(param => {
           serviceCalled=false;
           ....
           },(error)=>{
           serviceCalled=false;
           }
           )