Alright, so the initial issue here is that you're utilizing key as a directive (like [key]). This signifies that within it, you have to mention a property declared in the component. Instead, you can directly use a string, so modify your HTML like this:
<p-confirmDialog key="mainDialog" class="styleDialog" [baseZIndex]="10000">
Content
</p-confirmDialog>
Next, in your app.module.ts, make sure to include the ConfirmationService as a provider:
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
...
ConfirmDialogModule
],
providers: [ConfirmationService],
bootstrap: [AppComponent]
})
Moreover, I observed an error in your FooService. It seems to be a result of a copy/paste from StackOverflow, but nonetheless, here's how you should correct it:
import {Injectable} from '@angular/core';
import {ConfirmationService} from 'primeng/api';
@Injectable({
providedIn: 'root'
})
export class FooService {
constructor(private confirmationService: ConfirmationService) {
}
confirm(): void {
this.confirmationService.confirm({
key: 'mainDialog',
message: 'some message',
header: 'Warning',
icon: 'pi pi-exclamation-triangle',
acceptLabel: 'ok',
rejectVisible: false,
accept: () => {
console.log('accept');
},
});
}
}
Remember to declare and invoke your FooService.confirm method whenever you require it. For example, if you need it in the app.component.ts, your implementation would look something like this:
import {Component, OnInit} from '@angular/core';
import {FooService} from './foo.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private fooService: FooService) {
}
ngOnInit(): void {
this.fooService.confirm();
}
}