Angular4 calling a function in constructor

Question

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>

Answered a question here that may help stackoverflow.com/questions/53556897/… if not comment will try and help. It should help just make sure to call this.displayHint(); from within the Oninit and you should be good. — dev-dan
– dev-dan, Commented Feb 19, 2019 at 16:28

Shohel · Accepted Answer · 2019-02-20 11:29:01Z

1

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' });
  }

answered Feb 20, 2019 at 11:29

Shohel

3,9645 gold badges41 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krzysztof Raciniewski · Accepted Answer · 2019-02-20 15:23:00Z

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

Collectives™ on Stack Overflow

Angular4 calling a function in constructor

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related