This conversation continued in the developer chat... Here is the transcript:
Dani Palou, [Oct 10, 2019 at 10:51:19 AM]:
[] means that what you're passing as a parameter is a variable or a primitive value. If you use:
checked="checkbox1"
you're passing a string with value "'checkbox1'. Since there are no [], the content is just a string. However, if you do:
[checked]="checkbox1"
Angular is going to check if a variable checkbox1 exists and pass that value.
Mark Johnson, [Oct 10, 2019 at 10:51:46 AM (2019-10-10, 10:52:22 AM)]:
checked="true" means "the 'checked' property is set to the string 'true'". [checked]="checkbox1" means "the 'checked' property is bound to the value of the variable 'checkbox1'"
Dani Palou, [Oct 10, 2019 at 10:52:41 AM (2019-10-10, 10:52:51 AM)]:
in case of booleans, in our components we add some code to handle checked="false" (string 'false') same as [checked]="false" (boolean). But if you're using angular or ionic components, using checked="false" might not work since a string is evaluated as true
Mike Churchward, [Oct 10, 2019 at 10:53:05 AM]:
And the variable "checkbox1" is now part of the element in question?
Dani Palou, [Oct 10, 2019 at 10:54:15 AM]:
you need to assign it to "this", since "this" is the instance of the component that renders the view
it basically looks for variables in the "root" component of the view
Mike Churchward, [Oct 10, 2019 at 10:58:34 AM (2019-10-10, 10:58:49 AM)]:
Right... But something like this:
<ion-radio value="foo" [checked]="checkbox1"></ion-radio>
means that this particular radio element now has a variable/property named "checkbox1" that is bound to the element's "checked" property?
And that happened because of the "[]" structure?
Mark Johnson, [Oct 10, 2019 at 10:59:14 AM]:
no, it has a property called "checked", "checkbox1" is part of the angular component
or rather, the page's angular component, not the checkbox's
Mike Churchward, [Oct 10, 2019 at 11:00:55 AM]:
>> "checkbox1" is part of the angular component
Meaning that "checkbox1" is a variable of the specific ion-radio that can be used to manipulate the "checked" property of that same specific ion-radio. And exists in javascript.
Mark Johnson, [Oct 10, 2019 at 11:01:39 AM]:
checkbox1 is independant of the ion-radio. Other elements may also have properties bound to checkbox1
Mike Churchward, [Oct 10, 2019 at 11:02:13 AM]:
Okay... So "checkbox1" is a variable of the angular page component, tied to the specific ion-radio element...
No... I guess you just said that's not true.
Mark Johnson, [Oct 10, 2019 at 11:02:58 AM]:
<ion-radio value="foo" [checked]="checkbox1"></ion-radio><ion-radio value="bar" [checked]="checkbox1"></ion-radio> is valid
Mike Churchward, [Oct 10, 2019 at 11:03:06 AM]:
So the page variable "checkbox1" has a one to many relationship to properties of elements on the page?
Dani Palou, [Oct 10, 2019 at 11:03:17 AM]:
yep, you can pass it to many elements
Mike Churchward, [Oct 10, 2019 at 11:03:23 AM]:
Interesting...
Mark Johnson, [Oct 10, 2019 at 11:05:45 AM]:
If you want to expand your brain a bit futher, for [foo]="bar", bar can be any javascript expression, although this isn't necessarily advisable from a performance point of view.
You could do [foo]="bar > 0" or [foo]="'prefix_' + bar"
Mike Churchward, [Oct 10, 2019 at 11:08:32 AM]:
Mark, using your example from the forum, if I had:
<ion-radio value="foo" [checked]="checkbox1" ionSelect="toggleCheckbox()"></ion-radio>
<ion-radio value="bar" [checked]="checkbox1" ionSelect="toggleCheckbox()"></ion-radio>
Would the "toggleCheckbox()" then impact both radio buttons when I click one of them?
Mark Johnson, [Oct 10, 2019 at 11:09:53 AM]:
(ionSelect) but yes
Mike Churchward, [Oct 10, 2019 at 11:10:42 AM]:
So:
<ion-radio value="foo" [checked]="checkbox1" (ionSelect)="toggleCheckbox()"></ion-radio>
<ion-radio value="bar" [checked]="checkbox1" (ionSelect)="toggleCheckbox()"></ion-radio>
Well now... That IS interesting...
So, where in the angular or ionic documentation can I see things like using [] to tie an angular variable to a ionic property?
Mark Johnson, [Oct 10, 2019 at 11:13:52 AM]:
https://ionicframework.com/docs/v3/api/components/button/Button/ has some examples under "Advanced"
You see this quite a lot in the ionic docs when dealing with inputs: ([ngModel]) - that is *two way data binding*, where changes to the value on the page (e.g. if you select something in a list) change that variable in javascript, without you having to explicitly trigger an event. I'm not sure how well that interacts with Moodle plugins?
Mark Johnson, [Oct 10, 2019 at 11:22:46 AM]:
Angular knows that something in the template is bound to "checkbox1", so whenever the value of "checkbox1" is changed, it re-renders the template to reflect the change. I dont know if its clever enough to do individual elements, or of it just does the whole template
Dani Palou, [Oct 10, 2019 at 11:23:50 AM]:
2-way data binding should work fine for plugins. In the end Angular is just dealing with a JS variable, he doesn't know if it comes from a plugin or the app itself
Dani Palou, [Oct 10, 2019 at 11:24:39 AM]:
Angular has a tree of components, and the detection mechanism is supposed to be kind of smart when dealing with the tree. I don't know much about the details of how the change detection mechanism works though
Mike Churchward, [Oct 10, 2019 at 11:26:22 AM]:
Specifically, I'm working with <ion-segment> and <ion-segment-button> using [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>". That seems to take care of what segment button is selected.
I'll have to experiment to see what happens when I start messing around with the "checked" property directly.
Dani Palou, [Oct 10, 2019 at 11:26:24 AM]:
The function toggleCheckbox will be fired only once when you change a checkbox. However, that function will change the value of variable that is then passed to 2 components, so it will affect 2 different elements. This is handled by Angular itself (it has something called digest cycles, and in these cycles it checks if the variables have changed and so)
if you're interested in learning more about this, the "[]" dotation is an Angular Input, and the "()" notation is an Angular Output
basically with [] you send data from outside a component to inside a component. With (), a component sends data from the inside to the outside.
2-way data binding is a mix of both, that's why it combines both of them: [(ngModel)]
<my-component [(ngModel)]="myVar"> means that:
-If you change the value of myVar, the component "my-component" will know it and will receive the new value.
-If the component "my-component" changes the value of the variable, your code will also have the new value.