No provider for ModalDialogParams

[minhson95th]

I want to show component with 2 ways

 <ng-container *ngIf="viewDetail">
        <app-form-control row="4"  
        [isActive]="true"
        [isModeView]="true"
        [dataSource]="tab"
        [bindData]="currentItem">
        </app-form-control>
    </ng-container>

and

const options: ModalDialogOptions = {
     viewContainerRef: this.viewContainerRef,
     fullscreen: false,
     context: {tab: tab, mode: "add", windowId: this.windowId },
     cancelable: false
   };
   const modal = this.modalService.showModal(FormControlComponent, options);

FormControlComponent

export class FormControlComponent implements OnInit, OnChanges {

    @Input() isActive = true; // Mặc định hiển thị
    @Input() mode = '';
    @Input() dataSource = null;
    @Input() bindData = null;
    @Input() isModeView = false; // mặc định không phải chế độ xem

    // khởi tạo các biến cho form
    public isLoadFormSuccess = false;
    public formGroup: FormGroup = new FormGroup({});
    public tableColumnDefination = [];
    public nzGutter = 16;
    public fieldGroup = {};
    public fieldNoGroup = [];
    public hasFieldGroup = false;
    public checktabStruct = true;
    public typeOfFormControl = 'default';
    public okTitle = '';

    public dataEmit: EventEmitter<any> = new EventEmitter();

    /** Dữ liệu của các combo box */
    public lookupCondition = null;
    /** Hiển thị button thêm hay clear, mặc định giá trị là false: Ẩn button */
    public isShowButton = false;

    private isFirstTime = true; // Lần đầu khởi tạo?
    private list = []; // mảng các field

    constructor(
        private appService: AppService,
        private rqService: RequestService,
        private getdulieuservice: GetDuLieuService,
        private params: ModalDialogParams,

    ) {
        this.bindData = params.context.data;
        this.dataSource = params.context.tab;
        this.mode = params.context.mode;
        // this.windowId = params.context.windowId
     }

    ngOnInit(): void {
        if (this.dataSource !== undefined && this.dataSource !== null) {
            if (this.dataSource.FIELD_LIST.length > 0) {
                // lấy thông số về Primary key của tab cha => chưa xong
                // Tạo lookup
                this.lookupCondition = this.appService.getLookup();
                if (this.dataSource.LAYOUT_CONFIG !== null && this.dataSource.LAYOUT_CONFIG.rows.length > 0) {
                    this.typeOfFormControl = 'layout';
                    this.initFormControlByLayout();
                } else {
                    this.typeOfFormControl = 'default';
                    this.initFormControlByDefault();
                }
            }
        }
        if (this.bindData) {
            if (this.bindData !== null && this.bindData !== undefined) {
                this.bindDataToForm(this.bindData);
            } else {
                // clear form
                this.formGroup.reset();
            }
        }
    }

but in way 1, when i active viewDetail = true, it's have error

ERROR NullInjectorError: StaticInjectorError(AppModule)[FormControlComponent -> ModalDialogParams]: 

JS:   StaticInjectorError(Platform: core)[FormControlComponent -> ModalDialogParams]: 

JS:     NullInjectorError: No provider for ModalDialogParams!

JS: ERROR CONTEXT {

JS:   "view": {

JS:     "def": {

JS:       "nodeFlags": 34193409,

JS:       "rootNodeFlags": 1,

JS:       "nodeMatchedQueries": 0,

JS:       "flags": 0,

JS:       "nodes": [

JS:         {

JS:           "nodeIndex": 0,

JS:           "parent": null,

JS:           "renderParent": null,

JS:           "bindingIndex": 0,

JS:           "outputIndex": 0,

JS:           "checkIndex": 0,

JS:           "flags": 1,

JS:           "childFlags": 34193409,

JS:           "directChildFlags": 33554433,

JS:           "childMatchedQueries": 0,

JS:           "matchedQueries": {},

JS:           "matchedQueryIds": 0,

JS:           "references": {},

JS:           "ngContentIndex": null,

JS:           "childCount": 2,

JS:           "bindings": [],

JS:           "bindingFlags": 0,

JS:           "outputs": [],

JS:           "element": {

JS:             "ns": null,

JS:             "name": null,

JS:             "attrs": [],

JS:             "template": null,

JS:             "componentProvider": null,

JS:             "componentView": null,

JS:             "componentRendererType": null,

JS:             "publicProviders": {},

JS:             "allProviders": "[Circular]...

Can i show component FormControlComponent with both ways? use ngIf and use showModal? Thanks

[jessorlisa]

You should wrap the ModalDialogParams access:

    if (params) {
        this.bindData = params.context.data;
        this.dataSource = params.context.tab;
        this.mode = params.context.mode;
        // this.windowId = params.context.windowId
    }

[minhson95th]

You should wrap the ModalDialogParams access:

    if (params) {
        this.bindData = params.context.data;
        this.dataSource = params.context.tab;
        this.mode = params.context.mode;
        // this.windowId = params.context.windowId
    }

i tried it, still error

ERROR NullInjectorError: StaticInjectorError(AppModule)[FormControlComponent -> ModalDialogParams]: 

JS:   StaticInjectorError(Platform: core)[FormControlComponent -> ModalDialogParams]: 

JS:     NullInjectorError: No provider for ModalDialogParams!

if i remove ModalDialogParams, it's can run normally

constructor(
        private appService: AppService,
        private rqService: RequestService,
        private getdulieuservice: GetDuLieuService,
        // private params: ModalDialogParams,

    ) {
        // this.bindData = params.context.data;
        // this.dataSource = params.context.tab;
        // this.mode = params.context.mode;
        // this.windowId = params.context.windowId
     }

but i can't show modal by showModal

[edusperoni]

Hey!

Please refer to the angular docs on dependency injection:

https://angular.io/guide/hierarchical-dependency-injection#optional

In this case, since your params are optional, just use the @Optional decorator on it.