Mam boostrap model jako oddzielny komponent żeby można było z różnych komponentów go włączać. Myślę że problem jest z <app-modal>. Po naciśnięciu guzika model się włącza ale jest sam pasek i nie pokazuje formularza . Brak errorow w konsoli. Kod jest tu :
Kod HTML modalu:
<ng-template #addJokeModal>
<div class="modal-content my-custom-modal">
<div class="modal-header">
<h4 class="modal-title pull-left">Dodawanie żartu</h4>
<button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
<span aria-hidden="true" class="visually-hidden">×</span>
</button>
</div>
<div class="modal-body">
<div class="adding-joke" *ngIf="!isloading">
<form method="POST" [formGroup]="addJokeForm" (ngSubmit)="addJoke()">
<div class="joke-category">
<select name="group" class="custom-select" formControlName="category">
<option value="" disabled selected hidden>Wybierz kategorię</option>
<option *ngFor="let category of categories">{{ category.name }}</option>
</select>
</div>
<div class="joke-content">
<input placeholder="Wprowadź treść" type="text" class="form-control" formControlName="content">
</div>
<div class="cancel-joke">
<button class="cancel-button" (click)="cancelJoke()">Anuluj</button>
</div>
<div class="add-joke">
<button class="add-button" id="add_joke_button">
Dodaj
</button>
</div>
</form>
</div>
</div>
</div>
</ng-template>
i typescript:
import { Component, OnInit, TemplateRef, VERSION } from '@angular/core';
import { PagesService } from '../pages.service';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-add-joke-modal',
templateUrl: './add-joke-modal.component.html',
styleUrls: ['./add-joke-modal.component.css']
})
export class AddJokeModalComponent {
public jokes: any = [];
isLoading = true
modalRef?: BsModalRef;
public categories: any = [];
public isloading = true;
addJokeForm!: FormGroup;
get addJokeF() { return this.addJokeForm.controls; }
constructor(
private PagesService: PagesService,
private modalService: BsModalService,
private formBuilder: FormBuilder,
private router: Router,
) { }
ngOnInit(): void {
this.addJokeForm = this.formBuilder.group({
category: ['', Validators.required],
content: ['', Validators.required],
});
this.isloading = false;
this.loadCategories();
}
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
addJoke() {
if (this.addJokeForm.invalid) {
return;
} else {
const json_data = {
category: this.addJokeF['category'].value,
content: this.addJokeF['content'].value,
}
this.PagesService.AddJoke(json_data).subscribe(response => {
{
this.router.navigate(['../home']);
}
})
}
}
loadCategories() {
this.PagesService.LoadCategories().subscribe(response => {
this.categories = response
console.log(response)
})
}
cancelJoke() {
this.modalRef?.hide();
}
}
A tu jest drugi komponent w którym ten moduł powinien być wyświetlany:
<button class="add" (click)="openModal(addJokeModal)">Dodaj</button>
<ng-template #addJokeModal>
<app-add-joke-modal></app-add-joke-modal>
</ng-template>
<div class="jokes">
<div class="col-lg-6 col-sm-12 joke" *ngFor="let joke of jokes">
<div class="category">
{{joke.category}}
</div>
<div class="conent">
{{joke.content}}
</div>
<button class="delete" (click)="deleteJoke(joke.id)">Usuń</button>
</div>
</div>
i typescript:
import { Component } from '@angular/core';
import { PagesService } from '../pages.service';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { AddJokeModalComponent } from '../add-joke-modal/add-joke-modal.component';
import { Router } from '@angular/router';
@Component({
selector: 'app-all-jokes',
templateUrl: './all-jokes.component.html',
styleUrls: ['./all-jokes.component.css']
})
export class AllJokesComponent {
public jokes: any = [];
modalRef?: BsModalRef;
constructor(
private PagesService: PagesService,
private modalService: BsModalService,
private router: Router,
) { }
ngOnInit(): void {
this.loadData();
}
loadData() {
this.PagesService.LoadJokes().subscribe(response => {
console.log(response)
this.jokes = response;
});
}
deleteJoke(jokeId: number) {
this.PagesService.DeleteJoke(jokeId).subscribe(response => {
// Po usunięciu żartu z bazy danych wykonaj odpowiednie działania (np. odświeżenie listy żartów)
this.loadData();
});
}
openModal(template: any) {
this.modalRef = this.modalService.show(template);
}
}
w module.ts mam w deklaracjach ten komponent.
Może ktoś mógłby pomóc.