Using -->> this library <<-- :
Example of my modal :
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Crear</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
<span aria-hidden="true">×</span>
</button>
</div>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="form-group">
<label>Nombre</label>
<input type="text" formControlName="nombre" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.nombre.errors }" />
<div *ngIf="submitted && f.nombre.errors" class="invalid-feedback">
<div *ngIf="f.nombre.errors.required">Nombre Requerido</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" (click)="modal.dismiss()">
<span class="fa fa-remove"></span>
<span class="hidden-xs"> Cerrar</span>
</button>
<button [disabled]="loading" class="btn btn-primary">
<span class="fa fa-save"></span>
<span class="hidden-xs"> Guardar</span>
</button>
</div>
</form>
</ng-template>Example of my component :
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CategoriaService } from '../../services/categoria.service';
import { Categoria } from '../../models/categoria';
@Component({
selector: 'app-categoria-crear',
templateUrl: '../../views/categoria/crear.html',
styleUrls: ['../../styles/categoria.component.css'],
providers: [CategoriaService]
})
export class CategoriaCrearComponent implements OnInit {
registerForm: FormGroup;
submitted = false;
closeResult: string;
public categoria: Categoria;
constructor(
private modalService: NgbModal,
private formBuilder: FormBuilder
){
this.categoria = new Categoria(null, '', true);
}
open(content) {
this.modalService.open(content, { centered: true, backdropClass: 'light-blue-backdrop' });
}
ngOnInit(): void {
this.registerForm = this.formBuilder.group({
nombre: ['', Validators.required],
});
}
get f() { return this.registerForm.controls; }
onSubmit() {
this.submitted = true;
if (this.registerForm.invalid) {
return;
}
alert('SUCCESS!! :-)');
}
}I can't get to fire the method to close the modal from Angular.
