I developed it like this. But I could not decide a good solution. It would be better to create it in the click event, as in the example

 


export class TestModalComponent implements OnInit,AfterViewInit {

@ViewChild('formModal') public formModal:ModalDirective;

@ViewChild('formModal1') public formModal1:ModalDirective;

questions:any[];

constructor(privatemdbModal:MDBModalService, privaterouter:Router,

privateseoService:SeoService,

privatequestionService:QuestionService,

privatelocation:Location) {

this.questions=questionService.getQuestions();

}

ngOnInit() {

this.seoService.setMetaTitle('test','','','');

}

public hideModal():void {

console.log('hide');

this.formModal.hide();

this.router.navigate(['./']);

//this.location.back();

}

public hideModal1():void {

this.formModal.hide();

this.formModal1.hide();

this.router.navigate(['./']);

}

public showModal1():void {

this.formModal1.show();

}

ngAfterViewInit(){

this.formModal.show();

}

}

<app-weekly-trend-services></app-weekly-trend-services>

<div mdbModal #formModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true" [config]="{backdrop: true, ignoreBackdropClick: true}">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">

<span aria-hidden="true">×</span>

</button>

<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>

</div>

<div class="modal-body">

<app-dynamic-form [questions]="questions"></app-dynamic-form>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="hideModal()" mdbRippleRadius>Close</button>

<button type="button" class="btn btn-primary relative waves-light" (click)="showModal1()" mdbRippleRadius>Save changes</button>

</div>

</div>

</div>

</div>