CODEWITHSUNDEEP
typescriptangular
Emerceen
Emerceen

Reputation: 2885

Angular2 Init variables in template.

When I run the application , the console shows all the logs that I have ngOnInit , but the application generates only a skeleton view , without displaying variables of the component and texts from l18n . ngOnInit or not working as it should , because I have to be called in the constructor .

These problems disappear when the second time I click on a link to a component, then everything is loaded as it should. This happens in all components in the application and all applications that builds on angular2 starter gulp .

Why only second click loads the variables to view and calls ngOnInit ( when it is called in the constructor ) ?

export class SettingsDevicesComponent implements OnInit {

**variables**

@Component({
  selector: 'as-settings-devices',
  templateUrl: 'app/settings-devices/settings-devices.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['app/settings-devices/settings-devices.component.css'],
  providers: [Communication],
  pipes: [TranslatePipe],
  directives: [REACTIVE_FORM_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES,ROUTER_DIRECTIVES]
})

constructor(private _cm: Communication,
            private _cdRef: ChangeDetectorRef,
            private _router: Router,
            private _sanitizer: DomSanitizationService,
            @Inject(ElementRef) elementRef: ElementRef
            ) {
                this.elementRef = elementRef;
                this.ngOnInit();
                this.fileUpload = new FormGroup({
                    color: this.color
                });
                this.fileName = new FormGroup({
                    fileNameInput: this.fileNameInput
                });
                this.settingsName = new FormGroup({
                    settingsNameInput: this.settingsNameInput
                });
            }

ngOnInit() {
    this.getDeviceData();
    this.getZoneData();
}
}

Upvotes: 0

Views: 967

Answers (1)

Emerceen
Emerceen

Reputation: 2885

The problem was changeDetection: ChangeDetectionStrategy.OnPush in main component 'app.component.ts'

This caused a problem:

@Component({
  selector: 'as-main-app',
  templateUrl: 'app/app.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  directives: [ROUTER_DIRECTIVES]
})

After removing everything is ok:

@Component({
  selector: 'as-main-app',
  templateUrl: 'app/app.html',
  directives: [ROUTER_DIRECTIVES]
})

Upvotes: 1

Related Questions