How do I make two way binding work in ionic?-CodePudding

I am trying to get two way binding to work with Angular/ionic and I have the following for my component html:

 <ion-card>
  <ion-card-header>
    <ion-button><</ion-button>
    <ion-card-title>Create course</ion-card-title>
    <ion-button (click)=createYogaClass()>Create</ion-button>
  </ion-card-header>
  <ion-card-content>
    <ion-list>
      <ion-item>
        <ion-label>Name course</ion-label>
        <ion-input [(ngModel)]='randomString'>{{randomString}}</ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Location</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Date</ion-label>
        <ion-input type="date"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Start time</ion-label>
        <ion-input type="time"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>End time</ion-label>
        <ion-input type="time"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Course description</ion-label>
        <ion-textarea type="text"></ion-textarea>
      </ion-item>
      <ion-item>
        <ion-label>Teacher</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Teacher's description</ion-label>
        <ion-textarea type="text"></ion-textarea>
      </ion-item>
      <ion-item>
        <ion-label>Available seats</ion-label>
        <ion-input type="number"></ion-input>
      </ion-item>
    </ion-list>
  </ion-card-content>
</ion-card>

And this for my component .ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.scss'],
})
export class CreateComponent implements OnInit {

  randomString: string = 'randomString';

  constructor() { }

  createYogaClass(){
    console.log("Creating yogaclass!");
    console.log(this.randomString);
  }

  ngOnInit() {}

}

However whenever I try to change the value through the input changed the 'randomString' remains undefined... Can you help me figure out what the issue is. Just for clarification my app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { FormsModule } from '@angular/forms';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { RegisterComponent } from './register/register.component';

@NgModule({
  declarations: [AppComponent, RegisterComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, FormsModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy, }],
  bootstrap: [AppComponent],
})
export class AppModule {}

the current result after pressing create button: https://imgur.com/a/j7tLLVg

CodePudding user response：

I figured it out I forget to add my CreateComponent to the declarations like so:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { RegisterComponent } from './register/register.component';
import { CreateComponent } from './create/create.component';

@NgModule({
  declarations: [AppComponent, RegisterComponent, CreateComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, FormsModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy, }],
  bootstrap: [AppComponent],
})
export class AppModule {}