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?

score 13 · Accepted Answer · edited Mar 27 '17 at 16:58

13

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>

edited Mar 27 '17 at 16:58

AJ_

3,787
10
47
82

answered Jun 10 '16 at 17:12

Günter Zöchbauer

623,577
216
2,003
1,567

This is the way that works to call ngInit function using directive. But in my case it works differently. Thanks!! – Afroza Yasmin Jun 10 '16 at 19:22
What do you mean by "ln my case it works differently", how? – Günter Zöchbauer Jun 10 '16 at 19:24
I used directive that's okay but based on condition it working that's it. – Afroza Yasmin Jun 10 '16 at 19:27
When the first `*ngIf` becomes true, `play()` is called, otherwise `pause()`. I don't get what the problem is. – Günter Zöchbauer Jun 10 '16 at 19:29
1

Yes!! some of study about angular 2 directive then I write these steps. Just reading - https://angular.io/docs/ts/latest/guide/structural-directives.html .Thanks!! your direction is correct. – Afroza Yasmin Jun 10 '16 at 19:37
@GünterZöchbauer Can this be used to just assign value to a local variable and not calling a function? – Shyamal Parikh Jan 24 '17 at 10:24
You can use an output `@Output() init = new EventEmitter()` that emits an event in `ngOnInit() { this.init.emit(null); }` and use it like `
` where `xxx` is a field on the current component. You can't initialize template variables though. You could add `exportAs: 'ngInit'` to `@Directive(...)` though and then use it like `
– Günter Zöchbauer Jan 24 '17 at 10:28
how to send parameters for play function ex: play(i) – Srinivas Jan 09 '18 at 12:37
You can add additional `@Input()`s or assign a closure to a field like `play = () => { this._play(this.a, this.b); };` – Günter Zöchbauer Jan 09 '18 at 12:43
This is running for every change detection inside an ngFor, not just on init. Any help with that? I even have trackby in my ngFor, so i thought it shouldnt re render for every change. – user1220169 Aug 28 '18 at 13:27
It's a hack because there is no such thing as `ng-init` in Angular 2+. You can add an `if(...)` to the code above to do nothing after the first initialization. – Günter Zöchbauer Aug 28 '18 at 13:30

score 6 · Answer 2 · answered Jun 10 '16 at 19:40

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>

score 1 · Answer 3 · answered Jun 10 '16 at 17:18

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.

Converting Angular 1 to Angular 2 ngInit function

3 Answers3

Linked