CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3
Sampath
Sampath

Reputation: 65860

Checkbox with textbox inside

I have ionic 3 / Angular checkbox list as shown below.It is working fine.But now I have a requirement where if i.display is Other then that checkbox should be converted as textbox as like below video.Do you have any idea how to create such a component or any existing such component?

Video about Checkbox with textbox inside

.html

  <ion-list>
        <ion-item *ngFor="let i of inputs">
          <ion-label>{{i.display}}</ion-label>
          <ion-checkbox name="{{i.label}}" [(ngModel)]="i.checked"></ion-checkbox>
        </ion-item>
  </ion-list>

Upvotes: 0

Views: 627

Answers (1)

Pengyy
Pengyy

Reputation: 38161

you can build a custom component which controls to show checkbox or input by ng-if-else statement and ng-template.

I just make an example using normal HTML elements, see here.

Sorry for I don't know much about ionic, you may have to convert those elements to ionic-elements.

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <div *ngIf="showCheckbox; else elseBlock">
        <label for="checkbox" (click)="toggle(false)">
          <input id="checkbox" type="checkbox">test
        </label>
      </div>
      <ng-template #elseBlock>
        <input type="text" (keypress.enter)="toggle(true)" (blur)="toggle(true)">
      </ng-template>
    </div>
  `,
})
export class App {
  name:string;
  showCheckbox = true;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  toggle(value) {
    this.showCheckbox = value;
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Upvotes: 1

Related Questions