CODEWITHSUNDEEP
angularangular6
arj
arj

Reputation: 983

Angular6 Custom PopUp

I Am trying to make a popup window having input fields and buttons. following is the code

Parent Component.html

<div class="form-group">
 <button type="submit" class="btn btn-success" (click)="onClickEa()">Add </button>           
</div>

Parent component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ConfigPopupComponent } from '../config-popup/config-popup.component';
@Component({
    selector: 'app-providerservice',
    templateUrl: './providerservice.component.html',
    styleUrls: ['./providerservice.component.css']
})
export class ProviderserviceComponent implements OnInit, AfterViewInit {
     constructor(private modalService: NgbModal) { }
    ngAfterViewInit(): void {
        this.open();
    }
    open() {
        const modalRef = this.modalService.open(ConfigPopupComponent);

  }
}

popup component.html

<div>
   popup worked
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ConfigPopupComponent } from './config-popup/config-popup.component';

const appRoutes: Routes = [
  { path: 'xeservice', component: XeserviceComponent },
  {path: 'providerservice', component: ProviderserviceComponent}
];
@NgModule({
  declarations: [
    AppComponent,
    MainComponent,
    XeserviceComponent,
    EaConfigPopupComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    FormsModule,

  ],
  exports: [RouterModule],
  entryComponents: [ ConfigPopupComponent ],
  providers: [],
  bootstrap: [AppComponent]

})
export class AppModule { }

When I click on the add button from the parent view child component should be show as a popup. previously i had some error at that time I added popup component as an entry component.but still have the error. enter image description here anybody, please help

Upvotes: 1

Views: 1286

Answers (1)

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

You misspelt your component name.

You imported it as: 

import { ConfigPopupComponent } from '../config-popup/config-popup.component';

and used it as:

const modalRef = this.modalService.open(EaConfigPopupComponent); // see this component is not imported

See the component name is different. You have not imported this component.

So, change it to:

const modalRef = this.modalService.open(ConfigPopupComponent);

Upvotes: 1

Related Questions