angular / angular/angular

ng-if on root elements of projected content fails to render on initialisation

Open
#16,685 4 comments 3 reactions 0 assignees View on GitHub
area: upgrade effort1: hours freq1: low P4 state: confirmed type: bug/fix
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.