How to get or set attributes of ionic-components from TS file?

Ionic Framework ionic-v3
1

I wanted to know how can We get or set a particular property or attribute of ionic component from TypeScript file.

Suppose I have a input component on my HTML page:

<ion-item>  
    <ion-input type="text" [(ngModel)]="testText"></ion-input>
</ion-item>

How can I get or set its particular attribute such as max,min,placeholder or make it readonly from TS file. Can we access properties from ngModel value? Let say I have Date component on my page:

<ion-item>
    <ion-label>Date</ion-label>
    <ion-datetime  pickerFormat="MMMM YYYY" [(ngModel)]="myDate"></ion-datetime>
</ion-item>

How can we set its attributes(such as Min date,Max date) from TS file?

1 Like
2

Hello,
angular use a specific syntax to communicate bettwenn html and ts side. Look for example here https://angular.io/guide/cheatsheet section template syntax.

in short
[property] = mybindproperty
(event) = mybindevent()
[[input)] = mytwowayinputbinding
{{stringinterpolation}}

Best regards, anna-liebt

3

Thank You very much for your answer. In my question suppose I have to set Min attribute to ion-Date time from TS file. Will I do it like this:

myDate:any
AnyMethod()
{
this.myDate.Min="DateValue";
}
4

Hello,

ahmm, no. I am not sure what…

If you look to the doc of ion-date, then you will find this.

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MMMM YYYY" min="2016" max="2020-10-31" [(ngModel)]="myDate">
  </ion-datetime>
</ion-item>

[(ngModel)]="myDate"

is bound in twowaystyle to the variable myDate in ts. Here is where the input happens

min="2016"

the attribute min got the string “2016” inside html, because it is not bound with [] to ts side.

[min]='endofworld'

[min] is bound, you see it on the square brackets, to luzifers …, ähh, a variable called endofworld in ts.

If you wanna bind an event, maybe (click) to call a method, then you will do

<button (click)="AnyMethod()"></button>

In this case your are … and can call then end of the world by your self.

Best regards, anna-liebt.

BTW the cheat sheet is really good. Read it and related docs.

5

Thank you @anna_liebt . You have cleared my doubt.

6

Hello,
one another thing I saw on your code. Never use any in declaration as long is not a must. Things are so much easier with a proper declaration.

Best regrards, anna-liebt

7

Sure. I will take care of that onward.