I am trying to use the Hidden property in Angular2 and when I include a style that alters the display of the DIV, the hidden property is ignored.

When the code below is run, both divs are displayed.
When I remove the class .displayInline the first DIV is hidden and the second is displayed (as expected).

Can I use Hidden and the display CSS together?

import {ComponentAnnotation as Component, ViewAnnotation as View, bootstrap, NgIf} from 'angular2/angular2';



@Component({

    selector: 'hello'

})

@View({

    template: `<style>.displayInline{ display:inline }</style><span *ng-if=name>Hello, {{name}}!</span>

    <div>

                <div [hidden]=hideDiv1() class=displayInline>should be hidden.</div>

                <div [hidden]=hideDiv2() class=displayInline>should be displayed.</div>

    </div>`,

    directives: [NgIf]

})

export class Hello {

    name: string = 'World';

    constructor() {

        setTimeout(() => {

          this.name = 'NEW World'

        }, 2000);

    }



    hideDiv1(){

        return true;

    }   



    hideDiv2(){

        return false;

    }

}



bootstrap(Hello);

Repository:https://github.com/albi000/ng2-play