ng-if on root elements of projected content fails to render on initialisation
- Dominant language
- TypeScript
- Stars
- 101k
- Forks
- 27.5k
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 288
Description
**I'm submitting a ...** (check one with "x")
```
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
```
**Current behavior**
When developing a hybrid app with ngUpgrade, If you have an AngularJS component that contains a downgraded Angular Component in the template and this one implements content projection and wraps the `ng-content` element in an element that contains the `*ngIf` directive. Any root element of the AngularJS content that has the `ng-if` directive attribute will not be rendered until you re-toggle the property or expression bound to the attribute.
**Expected behavior**
The content is correctly projected and all directives properly evaluated without having to add extra wrapping elements.
**Minimal reproduction of the problem with instructions**
[Plunker with examples](https://plnkr.co/edit/ogPxZ11S82FsTdFdRwuf?p=preview)
_Example 1_
When using an Angular component that contains content projection within an AngularJS component, any root elements of the projected content that contain `ng-if` will fail to render on initialisation but by toggling the `ng-if` value they will then render correctly as per the evaluated value of the `ng-if`.
_Example 2_
When using an Angular component that contains content projection within an AngularJS component, any root elements of the projected content that contain `ng-if` will fail to render on initialisation, but by adding an element at the root of the projected content without `ng-if`, they will then render correctly.
_Example 3_
When using an Angular component that contains content projection within an AngularJS component, any root elements of the projected content that contain `ng-if` will fail to render on initialisation, but by removing the `*ngIf` on any parent elements of the Angular component will make it then render correctly.
**What is the motivation / use case for changing the behavior?**
So that AngularJS content that contain `ng-if` on root elements of the content to be projected can be be correctly projected into Angular components that contain `*ngIf` on any parents of the `ng-content`.
**Please tell us about your environment:**
OS: Windows 10
* **Angular version:** 4.1.0
* **AngularJS version:** 1.6.1
* **Browser:** All
* **Language:** TypeScript 2.2.0
Contributor guide
Research direction
Start with the linked Plunker reproduction and compare the three examples involving ngUpgrade, content projection, ng-content, *ngIf, and ng-if. Trace why projected AngularJS root elements are not evaluated during initialisation when an Angular *ngIf parent is present. Done means the projected ng-if content renders correctly on initialisation without extra wrapping or toggling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, angularjs, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100