In the main template for our Angular 4 application, which is sort of the 'root' template. It contains the container elements for the content area of the page and a sidebar off to the side.
Everything is working great except for older browsers (our customers are very large companies that only have older IE's, so we have to support IE10 and IE11) where the app is really unresponsive (in terms of UI updating and css transitions framerate).
One thing I noticed is that even if I rely on change detection that's purely inside the scope of the main app component, it triggers and executes all of the template code for all of the child components (4 times, in fact).
Here's the main part of my template:
<div class="page-content sidenav-open" id="page-content" #pageContent (window:resize)="adjustMainContent()">
<div [class]="'sidenav ' + (isAnimating ? 'isanimating' : '')" [style.width.px]="sidebar.width" [style.marginLeft.px]="sidebar.isVisible ? 0 : -sidebar.width">
<div class="vertical-resize-bar" (mousedown)="dragStart($event)"> </div>
<div class="sidenav-widget search-widget">
<div [class]="'main-content ' + (isAnimating ? 'isanimating' : '')" (transitionend)="isAnimating = false" [style.width.px]="mainContentWidth">
Again, functionally, it works great (in Chrome and Firefox, etc...), but not older browsers/computers. I just want those variables in my template snippet there to not trigger change detection on the app-navigation component and its children and whatever component gets loaded into router-outlet.
Am I doing anything (or multiple things) obviously wrong here? I should mention that this is our first Angular app.