Convert some JS code (Ionic v1) to TS (Ionic 2+) to make a similar radio button

Ionic Framework ionic-v3
1

Hello guys,
I would like to use this code to make a kind of radio button field but I’m not an angularJS developer and I can’t understand the JS code, can someone explain me how to make something similar?

In my html page, I put this code

  <div class="button-bar padding">
      <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
     <a grouped-radio="'male'" ng-model="data.gender">Male</a>
    <a grouped-radio="'female'" ng-model="data.gender">Female</a>
  </div>

In my SCSS page :

      .button-bar > .button{
        border: 1px solid #cfcfcf;
      }
      
      .button-bar > .button:last-child {
        border-radius: 0px 20px 20px 0px !important;
      }
      .button-bar > .button:first-child {
          border-radius: 20px 0px 0px 20px !important;
      }

In my TS page

public data = {
		gender: 'female',
		fruit:'grapes',
		veggie: true
	  };

But the 2 texts “Male” and “Female” are inline and they are side by side.
Thanks by advance

2

I think you forgot to imprt this

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">

3

if I add this link, the layout is upside down and no field can react, not even buttons

4

ah ok, the https in the link is missing, but even if I correct the link, the 2 texts are like before, with no real presentation

5

That code is for ionic 1, not ionic >= 2.
Are you aware of that?

7

I was starting to work on Ionic 3 since last August only, so, I don’t know Ionic 2, but I’m aware that AngularJS is for Ionic 1 , that’s why I asked if it was possible to make something similar in my initial post.
I guess it’s possible as Typescript is a superset of javascript

8

If I can make something like on this example, that will be all good for me

9

I’ve built something which allows you to bind a form control item and a list (id/name) and it’ll keep it updated.

JUST FOR YOU :wink:

Capture
Capture.PNG395×669 7.29 KB

1 Like
10

man, you are saving my life, it’s exactly what I needed, thank you so much :heart_eyes:

1 Like