CODEWITHSUNDEEP
angularionic-frameworkangular-ngmodel
zeropsi
zeropsi

Reputation: 694

Two-way binding ngModel from @Input decorator and component parameter?

I am passing some props through Ionic's modal controller to a custom component:

async editItem(item:any, index:number) {
        const modal = await this.modalCtrl.create({
            component: EditItemComponent,
            componentProps: {
                data: this.data,
                item: item,
            }
        });
        await modal.present();
}

Within my custom component, I am using a Input() decorator to receive the componentProps from the modal.

I have been unable to bind the data in my component to a [(ngModel)]. I am using an <ion-input> to display some of the data inside my data object and nothing will appear in the layout.

export class EditItemComponent implements OnInit {

    @Input() data: any;

    constructor(
        private modalCtrl: ModalController,
    ) { }

    ngOnInit() {
        console.log(this.data.name);
    }

    dismiss(data?: any) {
        this.modalCtrl.dismiss(data);
    }

}

<ion-toolbar class="ion-no-border">
        <ion-list lines="full" class="ion-no-padding ion-no-border">
            <ion-item>
                <ion-label position="stacked">Name</ion-label>
                <ion-input [(ngModel)]="data.name"></ion-input>
            </ion-item>
        </ion-list>
    </ion-toolbar>

Is there a different approach I need to take in order to display the prop data in my model?

Upvotes: 0

Views: 524

Answers (1)

dvbngln
dvbngln

Reputation: 411

Is there an error being logged? If there is one please provide.

Another possible solution for this one is to add ? operator to your ngModel. I guess it is not rendered at first since your data Input might be null.

<ion-input [(ngModel)]="data?.name"></ion-input>

Upvotes: 0

Related Questions