198. TD Set Default Values with ngModel Property Binding

Jul 21, 2026 02:09 · 2:16 · English · Whisper Turbo · 2 Qof-dheer
Qoraalkani wuxuu dhacayaa 7 maalmood. Kordhinta kaydinta joogtada ah →
Liiska Qoraalka
Soo bandhigida oo keliya
0:02
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
Thus far,
0:03
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
we learned a lot about the template -driven approach and how we can create great forms with
0:07
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
it. Now let's move on,
0:08
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
let's leave the world of validating user input here.
0:11
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
And let's say we want to define some default
0:16
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
values which should be displayed.
0:17
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
For example,
0:18
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
on the dropdown here,
0:20
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
right now it's empty by default.
0:22
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
Well, it would be nice if one of the two questions would be selected,
0:25
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
right? For this,
0:27
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
we can change the way we add ng -model.
0:30
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
Right now we add it like this without property or event binding,
0:34
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
no two -way data binding.
0:35
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
Well,
0:36
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
we can use it together with property binding.
0:40
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
So let's add some square brackets around it.
0:42
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
No parentheses.
0:44
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
So we're not using two -way binding as of now.
0:46
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
And now we can bind it to a value.
0:49
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
And remember with it,
0:51
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
I mean the control.
0:53
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
this input here,
0:54
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
which is turned into a control by Angular in the background.
0:57
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
So this select here can now be bound to a default
1:02
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
value.
1:02
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
And you could either hard code a string into there,
1:06
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
don't forget the single quotation marks in this case,
1:09
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
or you set up a property,
1:11
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
like let's say default question,
1:14
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
which would be pet.
1:17
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
pet because that is one of the two valid values,
1:20
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
the other one being teacher for this question here.
1:23
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
So now we can bind this to default question.
1:26
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
And if we now save this and let it reload,
1:30
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
you see that now pet is selected.
1:32
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
And of course,
1:33
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
if we switch this to teacher,
1:36
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
well,
1:36
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
it shouldn't be a surprise that the other value is selected.
1:40
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
So now all of a sudden we're using a default value.
1:44
S… Speaker 2 (198. TD Set Default Values with ngModel Property Binding)
And of course,
1:44
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
this does not only work for the dropdown,
1:46
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
it would also work for the username.
1:48
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
You could point to a default string there,
1:51
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
pre -populating this field with a default username.
1:54
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
Very useful and something you should definitely keep in mind that you
1:58
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
are not limited to using ng -model without any bindings.
2:02
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
You can use one -way binding,
2:04
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
property binding,
2:05
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
to set a default value.
2:07
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
Of course,
2:08
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
this value can still be overwritten.
2:10
S… Speaker 1 (198. TD Set Default Values with ngModel Property Binding)
You can still pick a different option here.

Qoraalkan waxaa abuuray AI (u aqoonsiga hadalka otomaatiga ah). Waxay ku jiri kartaa khaladaad — xaqiijin ka dhanka ah audio asalka ah ee isticmaalka muhiimka ah. Xeerka AI

❤️ Jecel STT.ai? Ka warran saaxiibbadaa!
Qiyaas
Riix Summarize in ay soo saaraan AI faahfaahin ka mid ah qoraalkan.
La iskugu soo uruurinayo...
Su'aal AI Ku saabsan this transcript
Su'aal wax kasta oo ku saabsan qoraalkan - AI ka heli doonaa qaybaha la xiriira iyo jawaab.
Ku dheji mid kale