Currently working on my initial Angular project, I am attempting to incorporate a dialog that prompts for confirmation before deleting an item. Utilizing ng-bootstrap, I referred to the examples in the documentation as my starting reference.
The issue I am encountering involves the modal not displaying as a dialog window as intended. Instead, it opens up as a conventional div below the remaining content.
To address this problem, I have developed a "ConfirmComponent" component that I am striving to integrate within another component.
confirm.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-confirm',
templateUrl: './confirm.component.html',
styleUrls: ['./confirm.component.scss']
})
export class ConfirmComponent implements OnInit {
@Input() name;
constructor(public activeModal: NgbActiveModal) { }
ngOnInit(): void {
}
}
confirm.component.html
<div class="modal-header">
<h4 class="modal-title">Hello there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Greetings, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
Shown below is the html content from the component where the dialog is triggered.
game-list.component.html
<div class="container">
<h1>Games Available</h1>
<ul *ngIf="games">
<li *ngFor="let game of games">
<a href="#" routerLink="/games/{{ game.pk }}" class="btn btn-secondary">{{ game.pk }}</a>
<a class="btn btn-xs btn-outline-danger text-danger" (click)="open()"><mat-icon>delete_outlined</mat-icon></a>
</li>
</ul>
<div class="card">
<div class="card-body">
<button class="btn btn-primary" (click)="createGame()">New Game</button>
</div>
</div>
</div>
Along with the corresponding component,
game-list.component.ts
import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Game } from '../game';
import { GameServiceService } from '../game-service.service';
import { ConfirmComponent } from '../confirm/confirm.component';
@Component({
selector: 'app-game-list',
templateUrl: './game-list.component.html',
styleUrls: ['./game-list.component.scss']
})
export class GameListComponent implements OnInit {
games: Game[] = []
constructor(private gameService: GameServiceService, private modalService: NgbModal) { }
ngOnInit(): void {
this.getGames();
}
getGames(): void {
this.gameService.getGames().subscribe(games => this.games = games);
}
createGame(): void {
this.gameService.createGame().subscribe(game => this.games.push(game));
}
open() {
const modalRef = this.modalService.open(ConfirmComponent);
modalRef.componentInstance.name = 'World';
}
}
Regarding the imports in my app.module.ts file:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GameListComponent } from './game/game-list/game-list.component';
import { HttpClientModule } from '@angular/common/http';
import { GameDetailComponent } from './game/game-detail/game-detail.component';
import { LoginComponent } from './auth/login/login.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { PlayerComponent } from './game/player/player.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MatIconModule } from '@angular/material/icon';
import { ConfirmComponent } from './game/confirm/confirm.component';
@NgModule({
declarations: [
AppComponent,
GameListComponent,
GameDetailComponent,
LoginComponent,
NavBarComponent,
PlayerComponent,
ConfirmComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
DragDropModule,
NgbModule,
MatIconModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
My hunch (could be inaccurate) is that there might be a missing essential style document. In my Firefox Browser console, I am receiving a warning
Style document could not be loaded: http://myurl/node_modules/bootstrap/scss/_type.scss