CODEWITHSUNDEEP
angulartypescriptconstructor
developer
developer

Reputation: 229

Angular4 calling a function in constructor

I'm trying to call a modal function in the constructor in Angular 4 but the function get highlighted that is not properly called and when the page is loaded not error is read in the log and the modal is not popping up as its suppose to. The screen gets dark alright but the text in the modal doesn't show up.

constructor(public formBuilder: FormBuilder,
            public router: Router,
            public toastr: ToastrService,
            public http: HttpClient,
            public modalService: BsModalService,) {
  if (this.getWardData) {
    this.displayHint();
  }
}

displayHint(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template, {class: 'modal-sm'});
}

HTML

<ng-template #template>
  <div class="modal-body text-center">
    <p>Do you want to Continue where you left?</p>
    <button type="button" class="btn btn-default" (click)="confirm()" >Yes</button>
    <button type="button" class="btn btn-primary" (click)="decline()" >No</button>
  </div>
</ng-template>

Upvotes: 3

Views: 1818

Answers (2)

Krzysztof Raciniewski
Krzysztof Raciniewski

Reputation: 4924

I think you have problem with modal template. You can run your modal but you need to pass to displayHint method template parameter(TemplateRef). In you view I see you have this template but you don't have reference to this template in component implementation. Add this part of code to your component(reference to your modal template - you need this to show modal):

@ViewChild('template') private modalTemplate: TemplateRef<any>;

Remove this.displayHint() from your constructor(I explained in below), add ngAfterViewInit on ngOnInit implementation and there add displayHint method call:

export class YourComponentName implements AfterViewInit {
    @ViewChild('template') private modalTemplate: TemplateRef<any>;

    getWardData = true; // for example purposes - always true

    constructor(public formBuilder: FormBuilder,
                public router: Router,
                public toastr: ToastrService,
                public http: HttpClient,
                public modalService: BsModalService
    ) {}

    ngAfterViewInit() {
        if (this.getWardData) {
            this.displayHint(this.modalTemplate);
        }
    }

    displayHint(template: TemplateRef<any>) {
      this.modalRef = this.modalService.show(template, {class: 'modal-sm'});
    }
}

There’s a huge difference between constructor and ngOnInit/ngAfterViewInit of the component. Angular bootstrap process consists of the two major stages:

  • constructing components tree
  • running change detection

Your controller method is running in "Constructing components tree" stage

(reference to modal template is undefined here)

Your ngOnInit method is running in "Running change detection" stage.

(reference to modal template is defined here)

The @Input communication mechanism is processed as part of following change detection phase so input bindings are not available in constructor.

So you can't run your modal from constructor

More about lifecycle hooks you can find here

Live working example you can find here

Upvotes: 0

Shohel
Shohel

Reputation: 3934

Try to use the following code

constructor(public formBuilder: FormBuilder,
    public router: Router,
    public toastr: ToastrService,
    public http: HttpClient,
    public modalService: BsModalService, ) {
    // if (this.getWardData) {
    //   this.displayHint();
    // }
  }

  ngOnInit() {
    if (this.getWardData) {
      this.displayHint();
    }
  }

  displayHint(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, { class: 'modal-sm' });
  }

Upvotes: 1

Related Questions