I created the AddJokeModalComponent to streamline the process of opening a form without duplicating code in every component. Below is the modal structure:
<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>
Here's the corresponding TypeScript code:
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();
}
}
Another component using the modal:
<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>
When clicking on the "add" button, only a small strip appears instead of the entire modal with the form. The 'AddJokeModal' component has been added to app.module.ts in the declarations section. No errors are shown in the console. Any assistance would be appreciated.