Angular 4 - Loading spinner not dissapearing after content is loaded in IE9 & IE10

Question

So I am showing a spinner while loading some images and in Chrome, Firefox, Edge... it disappears after the content is loaded. The spinner is replaced by a picture. However in Internet Explorer version 9 & 10 it stays in place and the picture appears underneath.

From component template:

<app-spinner [hidden]="!loadingContent"></app-spinner>
<app-content [hidden]="loadingContent"></app-content>

From component:

private getContent() {
    this.loadingContent = true;

    this.flightsService.getContent().map(data => {
        this.flights = data;
    }).subscribe(() => {
        this.loadingContent = true;
    }, () => {
        this.loadingContent = false;
    }, () => {
        this.loadingContent = false;
    });
}

spinner.css

.spinner {
    width: 100%;
    height: 50px;
    margin: 100px auto;
    animation-name: spin;
    animation-duration: 400ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 400ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 400ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 400ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-ms-keyframes spin {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

Answer 1

You could replace the [hidden] input by something like

<app-spinner [ngStyle]="{display:!loadingContent ?'none': 'inline'}"></app-spinner>
<app-content [ngStyle]="{display:loadingContent ?'none': 'inline'}"></app-content>

Works fine in IE as well