ng-if in container component and checking property references

[baio]

When I use container component with ng-ifwhich hide children elements (inserted via ng-content) it should not try to access properties bindings till ng-if is true

//Must use *ng-if=!!post to have not exception here
const template = `
    <modal [is-shown]="!!post">
        <modal-header><h2>{{post.title}}</h2></modal-header>
    </modal>

@Component({
    selector: 'post-modal',    
    template: template,
    directives: [Modal, NgIf]    
})
export class PostModal { 

    private post: any;              
}

const template = `
    <div class="modal" *ng-if="isShown">
        <div (click)="hide()">
            <ng-content select="modal-header"></ng-content>
        </div>
    </div>
`
@Component({
    selector: 'modal',    
    template: template,
   directives: [NgIf]    
})
export class Modal { 

    @Input() isShown: boolean

    constructor() {
        console.log("modal");
    }

}

EXCEPTION: TypeError: Cannot read property 'title' of undefined in [null]

[danturu]

Why not just use an elvis operator? #791

[baio]

If there is a lot of bindings you have to use ? for each. Anyway thinking this is not quite logically correct.

[danturu]

On the one hand the result of the discussion I have mentioned above forced it to mark all the optional parts in the expressions: this makes things more obvious, but more laborious as well.

On the other hand this is a trivial situation when the property isn't predefined since a data usually comes asynchronously and we have to use the elvis operator in each case regardless of how many bindings there are.

So what's the difference with ng-if?

[baio]

If ng-if is false child element shouldn't be rendered, hence binding shouldn't be activated. In this case (when child element is inserted via ng-content) this is not working correctly, binding still activating, when it shouldn't .

[danturu]

Gotcha. Surely you are right. Here is a plunk that reproduces your issue - http://plnkr.co/edit/4xZOY0ujPE3tgl35aFwt?p=preview. The issue occurs because it renders the entire view before wrapping it in ng-if using ng-content.

[todoubaba]

@baio ng-if could be set on modal element.

    <modal *ng-if="model">
      <modal-header>
        {{model.title}}
      </modal-header>
      <modal-content>
        {{model.content}}
      </modal-content>
    </modal>

see: http://plnkr.co/edit/C4HJMqrQfUeVwbEEHk31?p=preview

[vicb]

Please re-open if still an issue on the latest RC

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}