Weird spacing

When I use the following code to display a header, the title gets a weird left/right styling. If I change the line {{connectStatus == false ? "Connect" : "Disconnect" }} to {{connectStatus}} then the styling disappears.

Anybody knows what's wrong with it? Thanks!

<ion-header-bar>
    <h1 class="title">BLE Demo</h1>
    <button class="button button-positive">
        {{connectStatus == false ? "Connect" : "Disconnect" }}
    </button>
</ion-header-bar>