locked
Angular 6 RouterLink to open modal popup from the ngOnInit function RRS feed

  • Question

  • User956626884 posted

    HI,

    I created an angular 6 component to display a modal popup. I followed an example which open the modal popup with a button, but the Open function needs a parameter to find the HTML modal popup content. What I need to do is create a routerLink and it will call the Modal Popup component from the ngOnInit() function, which is always called when the component is selected from the routerLink.

    Here is what is working with the button. Here is the HTML

    <ng-template #content let-c="close" let-d="dismiss" id="Login">
        <div class="modal-header">
          <h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
          <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Hello, World!</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
        </div>
      </ng-template>
    
    
     
      
      <button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
    
    
    
    
    
    
    

    Here is the component.ts typescript code

    import { Component, OnInit, Input } from '@angular/core';
    import { NgbModalConfig, NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
    
    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.scss'],
      providers: [NgbModalConfig, NgbModal]
    })
    export class LoginComponent implements OnInit {
    
      constructor(config: NgbModalConfig, private modalService: NgbModal) {
        // customize default values of modals used by this component tree
        config.backdrop = 'static';
        config.keyboard = false;
      }
    
      ngOnInit() {
          open(this.content);
      }
    
      open(content) {
        this.modalService.open(content);
      }
    }
    

    In the ngOnInit, I am trying to add the open call inside the function but an error states that Prioperty 'content' does not exist. Basically it does not see it from the HTML code. Originally, the HMTL button passed the content which is the ng-template ID to the open function so it knows what modal popup to display.

    How do I get this working inside the ngOnIt. I need to get rid of the button and get the open to find the content from the html code. 

    I think there is a javascript way to pass in the content parameter to open but I am not familiar.

    I also tried using @ViewChild ('content') content:any; 

    this gets rid of the error message but when I click on the component, a blank page comes up with no modal popup.

    Any help is appreciated.

    Thanks

    Thursday, November 1, 2018 12:32 PM

All replies

  • User61956409 posted

    Hi comicrage,

    If you'd like to implement auto-open modal in Angular, you can refer to this sample:

    http://plnkr.co/edit/DeDNcY6GYinSrDqg6RRQ?p=preview  

    I do a test on my side, which work as expected.

    login-cmp.component.ts

    import { Component, AfterViewInit } from '@angular/core';
    import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
    
    @Component({
      selector: 'app-modal-content-component',
      template: `
        <div class="modal-header">
          <h4 class="modal-title">Hi there!</h4>
          <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Hello, World!</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
        </div>
      `
    })
    
    export class AppModalContentComponent {
      constructor(public activeModal: NgbActiveModal) {}
    }
    
    @Component({
      selector: 'app-login-cmp',
      templateUrl: './login-cmp.component.html',
      styleUrls: ['./login-cmp.component.css']
    })
    export class LoginComponent implements AfterViewInit {
    
      constructor(private modalService: NgbModal) { }
    
      ngAfterViewInit() {
    
        setTimeout(() => {
          this.open();
        });
      }
    
      open() {
        const modalRef = this.modalService.open(AppModalContentComponent);
      }
    
    }

    Test Result:

    With Regards,

    Fei Han

    Friday, November 2, 2018 9:19 AM