How does Angular 2/4 determine which styles to place inline prior/post an animation?

Question

I have the following trigger in an Angular 4 component animation array:

trigger('collection', [
  state('0', style({
    'background-color': 'black',
    '-webkit-box-flex': '0',
    '-ms-flex': '0 0 0px',
    flex: '0 0 0',
    overflow: 'hidden',
    'min-width': '0px',
  })),
  state('1', style({
    'background-color': 'blue',        
    '-webkit-box-flex': '1',
    '-ms-flex': '1 1 0px',
    flex: '1 1 0',
    'min-width': '450px',
  })),
  transition('0 => 1', animate('300ms ease-in')),
  transition('1 => 0', animate('300ms ease-out'))
]),

The styles that are added inline to the element per browser are as follows:

State 0

IE 11 => overflow: hidden; min-width: 0px; background-color: black;

Chrome => background-color: black; -webkit-box-flex: 0; flex: 0 0 0px; overflow: hidden; min-width: 0px;

Edge => flex:0 0 0px; overflow: hidden; min-width: 0px; background-color: black;

State 1

IE 11 => min-width: 450px; background-color: blue;

Chrome => background-color: blue; -webkit-box-flex: 1; flex: 1 1 0px; min-width: 450px;

Edge => flex:1 1 0px; min-width: 450px; background-color: blue;

I ask this because, as you can probably tell, I am missing critical styles in IE, thus breaking the layout.

Edit 1) Just as an update, I never figured out exactly how the algorithm chooses which styles to place inline, but by finagling the css in the trigger state, I was able to solve my specific problem. Blatant luck helps sometimes I guess.

Answer 1

I don't know what are you trying to achieve from the code, But your question:

How does Angular 2/4 determine which styles to place inline prior/post an animation?

Please read about encapsulation properties, i.e. ViewEncapsulation, by default angular adds Shadow-Dom property to elements in components which makes two same elements in different components differentiate with each other, If you want to determine why your styles are not working in IE/edge, You should probably add this to your component configuration,

encapsulation: ViewEncapsulation.None

This will tell Angular that Please do not add your logic to keep the styles isolated inside the component Or you can also add Native property to let angular check that if the browser supports shadow-dom property then use ViewEncapsulation otherwise not,

encapsulation: ViewEncapsulation.Native

By default it is set to Emulated, This is the reason angular does not allow the styles defined for a component to reflect outside the scope of the component. Even if you give a generic styles to elements like

p {color: blue }

Angular will not allow it to modify elements present outside the component.

encapsulation: ViewEncapsulation.Emulated

That is the reason the styles are not shown in IE/Edge, as they might not support shadow-dom property. You can set this property to Native to see the effect.

Hope this helps ! Thank You.