198. TD Set Default Values with ngModel Property Binding

Jul 21, 2026 02:09 · 2:16 · English · Whisper Turbo · 2 اسپیکر

یہ نقل ختم ہو جاتا ہے 7 دن. دائمی محفوظہ کے لئے بہتری →

ليکشن

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.

یہ نقل AI (خودکار بولنے کی پہچان) سے بنائی گئی تھی. غلطیاں ہو سکتے ہیں - اہم استعمال کے لیے اصل آڈیو کے مقابلے میں جانچیں. AI پالیسي

❤️ STT.ai سے محبت؟ اپنے دوستوں کو بتاؤ۔

خلاصہ

اس نقل کا AI خلاصہ پیدا کرنے کے لئے خلاصہ کرو کلک کریں.

اس نقل کے بارے ميں AI سے پوچھو

اس نقل کے بارے میں کچھ پوچھو - AI متعلقہ حصوں کو تلاش کرے گا اور جواب دے گا۔

دوسرا نقل کریں