Converting Angular 1 to Angular 2 ngInit function

Question

In angular1, we call the function ng-init based on ng-if condition. The following code represents If first div match with date && time then it will check the second condition, checked or not checked. If checked then it's automatically call play() function and if it's not check then call the pause function.

<div ng-if="ramadan.date === date && ramadan.time === clock">
  <div ng-if="ramadan.checked" ng-init="play()"></div>
  <div ng-if="!ramadan.checked" ng-init="pause()"></div>
</div>

I want to convert this code by angular2 typescript. Is there any way to automatically call the function based on condition in angular 2?

Solution 1

There is no ng-init in Angular2. You can easily create such a directive yourself though.

import { Directive, Input } from '@angular/core';

@Directive({
    selector: '[ngInit]'
})
export class NgInit {
    @Input() ngInit;
    ngOnInit() {
        if (this.ngInit) {
            this.ngInit();
        }
    }
}

and then use it like

<div *ngIf="ramadan.date === date && ramadan.time === clock">
  <div *ngIf="ramadan.checked" [ngInit]="play"></div>
  <div *ngIf="!ramadan.checked" [ngInit]="pause"></div>
</div>

Solution 2

Working code,

Custom directive:

import { Directive, Input } from '@angular/core';

@Directive({ selector: '[myCondition]' })

export class ngInitDirective {
  constructor() { }


  @Input() set myCondition(condition: boolean) {
    if (!condition) {
      console.log("hello")
    } else {
      console.log("hi")
    }
  }
}

In template:

<ion-label *ngIf="setting1.date === current_date && setting1.time === current_time">
          <div *myCondition="setting1.checked === condition" >Play</div>
          <div *myCondition="!setting1.checked === !condition">pause</div>
      </ion-label>

Solution 3

You can use ngOnInit method in your component class but remember to implements the OnInit interface.

Here's an example:

@Component({
  selector: 'ramadan',
  template: `<div>Ramadan</div>`
})
class Ramadan implements OnInit {
  ngOnInit() {
    this.play();
  }
}

You can fin more about ngOnInit here.