Angular get value from control in html

Question

I have a button which switches between map view and list view

<ion-content>
  <ion-segment #viewController (ionChange)="changeViewState($event)">
      <ion-segment-button value="map">
        <ion-label>Map</ion-label>
      </ion-segment-button>
      <ion-segment-button value="list">
        <ion-label>List</ion-label>
      </ion-segment-button>
    </ion-segment>
  <app-list-base *ngIf="viewValue == 'list'" [config]="config" [template]="itemTemplate"></app-list-base>
  <app-map *ngIf="viewValue == 'map'" [config]="config"></app-map>
</ion-content>

Currently I'm using the ionChange event to set the viewValue. However seeing as I just need the raw value from the control I'm wondering if there is a simpler way to do this in the html only

e.g

<app-list-base *ngIf="#viewController.val == 'list'" [config]="config" [template]="itemTemplate"></app-list-base>

How can I obtain the viewController value though html?

Maybe *ngIf="viewController.value === 'list'".

Martin Parenteau
– Martin Parenteau

2019-10-09 19:00:21 +00:00
Commented Oct 9, 2019 at 19:00 — Martin Parenteau
– Martin Parenteau, Commented Oct 9, 2019 at 19:00

Eliseo · Accepted Answer · 2019-10-09 19:09:16Z

2

is *ngIf="viewController.value" without # but the Angular way is use [(ngModel)] -or even ReactiveForms-

<ion-segmen [(ngModel)]="myvariable">
...
<ion-segmen>
<app-list-base *ngIf="myvariable">

where "myvariable" is a variable in your .ts

NOTE:Currently, Ionic Framework has official integration with Angular, so, you can use all you know about Angular. Well Ionic has certains characteristics, but the idea model-view is fulfilled

NOTE2: Really I think all the examples in the docs, need a revisited

edited Oct 9, 2019 at 19:09

answered Oct 9, 2019 at 19:01

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular get value from control in html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related