How to make the div transparent/disabled when the spinner component is shown in Angular 2

I have a form with few fields and a submit button. The submit button is enabled only when the form is valid and when the user clicks on the submit button it calls the api and during this time I am able to shown the spinner component. The following is my code:

HTML:

<div class="col-md-10 col-lg-5" id="mainDiv">
<form [formGroup]="userRegisForm">
<fieldset>
<div class="m-l-1">
<div class="form-group required">
<label for="name" class="col-md-3 control-label">Name:</label>
<div class="col-md-6 col-lg-7">
<input type="text" class="form-control" id="name" name="Name" formControlName="name"
aria-required="true" required>
</div>
</div>
</div>
<div class="m-l-1">
<div class="form-group required">
<label for="email" class="col-md-3 control-label">email:</label>
<div class="col-md-6 col-lg-7">
<input type="text" class="form-control" id="email" name="email" formControlName="email"
aria-required="true" required>
</div>
</div>
</div>
<div class="m-l-2">
<div class="form-group">
<div class="">
<button type="submit" (click)="submit()" [disabled]="!userRegisForm.valid">Submit</button>
</div>
</div>
</div>
<my-spinner [isRunning]="isRequesting"></my-spinner>
</fieldset>
</form>
</div>


Component:

'use strict';

import {Component} from 'angular2/core';

import {SpinnerComponent} from '../spinner/spinner';
import {ApiService} from '../../services/apiService';

@Component({
selector: 'my-sample-view',
directives: [SpinnerComponent],
template: '<my-spinner [isRunning]="isRequesting"></my-spinner>',
})
export class SampleViewComponent {
public isRequesting: boolean;
public items: Array<any>;

constructor(private apiService: ApiService) {
this.submit();
}

public submit(): void {
this.isRequesting = true;
this.apiService.sampleHttpGetRequest()
.subscribe(
result => this.items = result,
() => this.stopRefreshing(),
() => this.stopRefreshing());
}

private stopRefreshing() {
this.isRequesting = false;
}
}


I followed the following url to implement this functionality:

https://manuel-rauber.com/2016/01/05/angular-2-spinner-component/

The spinner is shown when the request is in progress but the background is not disbaled. I want to disable all the fields in the form including the submit button when this happens.

Continue reading...