CODEWITHSUNDEEP
angularmodal-dialogcomponentsmean-stackng-bootstrap
Angelo Crincoli
Angelo Crincoli

Reputation: 31

Ng-bootstrap modal with content from another component

I am currently developing a web app using the mean stack and been having some troubles using the modal feature of ng-bootstrap. What I want is to show a register modal when the user clicks in the register option of the navbar. I have a navbar component and also a register component, and this is the code I have so far

register.component.ts

 import { Component, OnInit } from '@angular/core';
 ...
 import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

 @Component({
   selector: 'app-register',
   templateUrl: './register.component.html',
   styleUrls: ['./register.component.css']
 })
 export class RegisterComponent implements OnInit {
    ...

   constructor(
     ...,
     public registerModal: NgbActiveModal
   ) { }

navbar.component.ts

import { Component, OnInit } from '@angular/core';
...
import {NgbCollapseModule} from '@ng-bootstrap/ng-bootstrap';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {RegisterComponent} from '../register/register.component';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  public navCollapsed = true;

  constructor(      
...
    private regCom: RegisterComponent
    private ngbModal: NgbModal
    ) { }

  ngOnInit() {
  }

  collapseOption(){
    this.navCollapsed = !this.navCollapsed;
    return true;
  }

   openRegister(){
    const modalReg = this.ngbModal.open(this.regComp);
   }

 }

I have tried to import the register component in the navbar component but i throws me a bunch of errors that I dont understand since I am a noob in this of programming using the MEAN stack, so if you can help me on how to solve this problem, I would be really grateful.

The error that appears is this: 

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:0 caused by: No provider for RegisterComponent!

Thanks in advance for your help!

Upvotes: 0

Views: 4156

Answers (3)

Phil Huhn
Phil Huhn

Reputation: 4121

In addition, you will need to add to the app.module the following:

@NgModule({
  ...,
  entryComponents: [ RegisterComponent ],
  ...
})

Upvotes: 1

Adnan A.
Adnan A.

Reputation: 1982

You're trying to inject the component into your app through constructor, even though it's not injectable(that's why "there is no provider").There is no need for that. 

constructor(      
...
    private regCom: RegisterComponent // <-- you don't need this
    private ngbModal: NgbModal
    ) { }

You don't need to pass the instance of the component class, just the class itself, to the open method of the NgbModal class.

openRegister(){
    const modalReg = this.ngbModal.open(RegisterComponent);
   }

Upvotes: 2

Mathers
Mathers

Reputation: 184

I think you need take the input from your parent component

import { Input } from '@angular/core';
....
@Input('sample') childValue: string;
....
getValue() {
    console.log(childValue)
}

In your parent html, you may do the following:

<your-tag (click)="lgModal.show()"></your-tag>
<your-modal #lgModal [sample]="your_data"></your-modal>

Upvotes: -1

Related Questions