Repository: angular
Issue: Content Projection using ngIf causes animations to not work
Labels: type: bug/fix,area: animations,freq3: high,core: content projection,P3

## I'm submitting a...
<pre><code>
[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre>

## Current behavior
Nested components in a content projection container with ngIf causes animations not to animate correctly.

## Minimal reproduction of the problem with instructions
Take the following use case: I have a tabs component that uses ng-content to slot the content. The content is only rendered when the active tab is focused, done through an ngIf.

**TabComponent**
```javascript
@Component({
  selector: 'tab',
  template: `
      <ng-content *ngIf="active"></ng-content>
  `
})
export class TabComponent {
   @Input() active: boolean = false;
}
```

**TabsComponent**
```javascript
@Component({
  selector: 'tabs',
  template: `
    <section>
      <ul>
        <li *ngFor="let tab of tabs" class="tab">
            {{tab.title}}
        </li>
      </ul>
      <div class="tab-content">
        <ng-content></ng-content>
      </div>
    </section>
  `
})
export class TabsComponent {
   @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
}
```

then I compose my markup like:

```html
<tabs>
   <tab>Something<tab>
   <tab><component-with-animation></component-with-animation></tab>
</tabs>
```

when I click the second tab the animation is not run. I've tried running `changeDetectionRef.markForCheck()` in the component doing the animation but it does not seem to work. If I change the `ngIf` to `hidden` it does correctly work. 

Upon investigation, I found that the component with the animation is still getting initialized despite it not being rendered ( ref: https://github.com/angular/angular/issues/13921 ). I tried to work around this by creating the body of the content using `createEmbeddedView` and reading out the content from the tab like:

```javascript
@Component({
  selector: 'tab',
  template: `
      <ng-template><ng-content></ng-content></ng-template>
  `
})
export class TabComponent {
   @ViewChild(TemplateRef) templateRef;
}
```

and in the my parent component when the tab was activated I would create that view like:

```javascript
@Component({
  selector: 'tabs',
  template: `
    <section>
      <ul>
        <li *ngFor="let tab of tabs" class="tab">
            {{tab.title}}
        </li>
      </ul>
      <div class="tab-content" #tabContent></div>
    </section>
  `
})
export class TabsComponent {
   @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
   @ViewChild('tabContent', { read: ViewContainerRef }) tabContent:

   activate(tab) {
     this.tabContent.clear();
     this.tabContent.createEmbeddedView(tab.templateRef);
   }
}
```

but that resulted in the same result.

You can see the result of a more complex demonstration in this plunker http://plnkr.co/edit/2o4hyPhfMiFHLINIpT57?p=preview.

## Environment
Angular version: 4.3.0

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.x
- Platform:  Mac