Angular Model Inject Array of simple objects

Topic: Angular Model Inject Array of simple objects

lalithkx asked 6 years ago

Expected behavior Launching a modal from a page succesfully. Injecting json data from an array of simple two field objects. Actual behavior Since the programmatically derived json doesn't have a tag for the array, I am not able to read it into an array in the modal dialog. Resources (screenshots, code snippets etc.) In the Base component. The json looks fine.

export class Option {
    public value: number;
    public label: string;
    constructor(id: number, name: string) {
        this.value = id;
        this.label = name;
    }
}
var typesOptions = [] as Array<Option>;
var typesOptionsJson = JSON.stringify(typesOptions);
        this.modalRef = this.modalService.show(ModalNewPhaseComponent, {
            id: 'frameModalCentre', 
            backdrop: true,
            keyboard: true,
            focus: true,
            show: false,
            ignoreBackdropClick: false,
            tabindex: "-1",
            class: 'modal-dialog modal-frame model-fluid',
            containerClass: 'right',
            role: 'dialog',
            animated: true,
            data: typesOptionsJson,
        });

In the Modal dialog component:

ModalNewPhaseComponent implements OnInit {

contactFormModalName = new FormControl('', Validators.required);
phaseFormModalType = new FormControl('', Validators.required);
phaseFormModalCode = new FormControl('', Validators.required);
contactFormModalDesc = new FormControl('', Validators.required);
phaseFormModalModifier = new FormControl('', Validators.required);
phaseFormModalQuantity = new FormControl('', Validators.required);
phaseFormModalComments = new FormControl('', Validators.required);

typeOptions: Array<any>;

constructor(public modalRef: MDBModalRef) { }

}

<mdb-select class="font-weight-normal" id="treatmenttype" label="" [options]="typeOptions" placeholder="Type"
                                    [formControl]="phaseFormModalType"></mdb-select>

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

1 0 Best answer

The 'data' property should be an object containing the given array.

lalithkx commented 6 years ago

Thanks for the response. I tried every possible combination. Even the sample code under "Inject data to the modal" in your Basic modal documentation did not work. I even tried a simple string. DO you think I need to upgrade to latest version of MDB Pro? The modal dialog shows fine though. The data variable shows uninitialized. The return data example is working though.

Can you please give me an example of array of objects passed to the modal and accessing them in the modal?

Arkadiusz Idzikowski staff commented 6 years ago

I'm sorry, I didn't notice that you use 7.1.1 version. This feature was added in 7.3.0. Please upgrade or take a look at our legacy documentation, where you can find information on how to use this functionality in older versions.

https://mdbootstrap.com/legacy/angular/7.1.0/?page=modals/basic/#inject-data

I recommend upgrading to the newest version, because there were some problems with old implementation.

lalithkx commented 6 years ago

Thanks Guys! I upgraded to 7.4.4 and everything worked beautifully. By the way for the people looking for answers, I was passing two arrays to the data parameter of the model component. data: {options: tests, codes: codes} where tests and codes are arrays of objects.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

User: Free
Premium support: No
Technology: MDB Angular
MDB Version: 7.1.1
Device: desktop
Browser: chrome
OS: Windows 10
Provided sample code: No
Provided link: No

About author

lalithkx

42Support score
6Questions 1Answers

0Snippets likes 0Snippets