How can i call a certain method from the class decorator when some `*ngIf` condition is met?

Question

How can i call a certain method from the class decorator when some *ngIf condition is met. I have a scenario exactly like this AngularJS question in which ng-init() is used but ng-init is not part of Angular2

<div *ngIf="obj.someProperty" callSomeMethod() >
 <!--render inner parts-->
</div>

Answer 1

It depends on what callSomeMethod() is doing, but one possibility is to add a directive to the *ngIf element, and execute that logic in the OnInit hook of that directive.

<div *ngIf="obj.someProperty" some-method-directive>
   <!--render inner parts-->
</div>

And elsewhere:

@Directive({
   selector='[some-method-directive]',
})
class SomeMethodDirective implements OnInit { // OnInit imported from angular2/core

   ngOnInit(){
      // insert your someMethod lofic
   }
}

If you need access to the parent component in this method, you can get ahold of it via constructor injection in the directive:

constructor(@Host(ParentComponent) private parent: ParentComponent){ }

and you'll then have access to it via this.parent.

This is the most analogous approach I can think of to the ng1 approach, but like I said - depending on what someMethod() needs to accomplish, it might not be a feasible solution. If not, please comment/edit your question to explain why, and that'll give me a better idea of what we're doing here.

Answer 2

It is possible using customized ngIf directive and template syntax:

<template [ngCondition]="obj.someProperty" (show)="callSomeMethod()">
 <h3 >if callback!</h3>
</template>

you should be able to add callbacks for true/false (show/hide) conditions.

Directive source:

@Directive({
    selector: '[ngCondition]'
})
export class NgCondition
{
    @Output('show')
    private show:EventEmitter<any> = new EventEmitter<any>();

    @Output('hide')
    private hide:EventEmitter<any> = new EventEmitter<any>();

    private _viewContainer:ViewContainerRef;
    private _templateRef:TemplateRef;
    private _prevCondition:any;

    constructor(_viewContainer:ViewContainerRef, _templateRef:TemplateRef)
    {
        this._viewContainer = _viewContainer;   
        this._templateRef = _templateRef;
        this._prevCondition = null;
    }

    @Input()
    public set ngCondition(newCondition:boolean)
    {
        if (newCondition && (isBlank(this._prevCondition) || !this._prevCondition))
        {
            this._prevCondition = true;
            this._viewContainer.createEmbeddedView(this._templateRef);
            this.show.emit({});
        }
        else if (!newCondition && (isBlank(this._prevCondition) || this._prevCondition))
        {
            this._prevCondition = false;
            this._viewContainer.clear();
            this.hide.emit({});
        }
    }
}