36_assignment_solution

Jul 13, 2026 07:20 · 5:12 · English · Whisper Turbo · 2 Дисплей

Ин нусхаи нусхаи имрӯз ба итмом мерасад. Навсозии барои захираи доимӣ →

Индекси дарс

0:03

S… Speaker 1 (36_assignment_solution)

So, were you successful?

0:04

S… Speaker 1 (36_assignment_solution)

Here's my solution.

0:05

S… Speaker 1 (36_assignment_solution)

We should add an input field.

0:08

S… Speaker 1 (36_assignment_solution)

So I'll add a horizontal line again,

0:09

S… Speaker 1 (36_assignment_solution)

just to have some separation.

0:11

S… Speaker 1 (36_assignment_solution)

And then my input field.

0:12

S… Speaker 1 (36_assignment_solution)

The label, of course,

0:13

S… Speaker 1 (36_assignment_solution)

is optional.

0:14

S… Speaker 1 (36_assignment_solution)

I want the user to enter a username.

0:16

S… Speaker 1 (36_assignment_solution)

So let's add an input,

0:17

S… Speaker 1 (36_assignment_solution)

which receives this class,

0:20

S… Speaker 1 (36_assignment_solution)

which is form control.

0:21

S… Speaker 1 (36_assignment_solution)

If we save this and have a look at our application,

0:25

S… Speaker 1 (36_assignment_solution)

this is how it looks like.

0:26

S… Speaker 1 (36_assignment_solution)

Now, if you don't want to have it sit directly on the edges,

0:29

S… Speaker 1 (36_assignment_solution)

you can,

0:30

S… Speaker 1 (36_assignment_solution)

of course, add some bootstrap styling to this.

0:32

S… Speaker 1 (36_assignment_solution)

So maybe a container with a row inside of it,

0:35

S… Speaker 1 (36_assignment_solution)

and then the call XS12 class.

0:37

S… Speaker 1 (36_assignment_solution)

So feel free to wrap your content in there.

0:40

S… Speaker 1 (36_assignment_solution)

It's not required for the solution of this,

0:42

S… Speaker 1 (36_assignment_solution)

of course.

0:43

S… Speaker 1 (36_assignment_solution)

So with that,

0:44

S… Speaker 1 (36_assignment_solution)

we got our input field here with the username.

0:46

S… Speaker 1 (36_assignment_solution)

Now let's bind this username to a property of

0:50

S… Speaker 1 (36_assignment_solution)

our TypeScript file.

0:51

S… Speaker 1 (36_assignment_solution)

So here I will add a new property to my app component and

0:56

S… Speaker 1 (36_assignment_solution)

I will name this property username.

0:58

S… Speaker 1 (36_assignment_solution)

This will be a string and I will set it to an empty string

1:02

S… Speaker 1 (36_assignment_solution)

initially like this.

1:03

S… Speaker 1 (36_assignment_solution)

Now we learned that we can use two -way binding to bind to this.

1:07

S… Speaker 1 (36_assignment_solution)

So on my input here,

1:10

S… Speaker 1 (36_assignment_solution)

I'll add two -way binding by adding square brackets

1:14

S… Speaker 1 (36_assignment_solution)

and then parentheses.

1:15

S… Speaker 1 (36_assignment_solution)

This is just two -way binding syntax and then ng

1:19

S… Speaker 1 (36_assignment_solution)

-model.

1:20

S… Speaker 1 (36_assignment_solution)

Now with that added,

1:22

S… Speaker 1 (36_assignment_solution)

I can bind to my username like this.

1:26

S… Speaker 1 (36_assignment_solution)

Now important for ng -model to work,

1:29

S… Speaker 1 (36_assignment_solution)

you need to make sure that in your app module,

1:32

S… Speaker 1 (36_assignment_solution)

you have forms module added to the imports because

1:36

S… Speaker 1 (36_assignment_solution)

the ng -model directive technically is part

1:40

S… Speaker 1 (36_assignment_solution)

of the forms module provided by Angular.

1:42

S… Speaker 1 (36_assignment_solution)

So make sure that you have this.

1:44

S… Speaker 1 (36_assignment_solution)

You should have it there by default when using a CLI project.

1:47

S… Speaker 1 (36_assignment_solution)

And then with that,

1:50

S… Speaker 1 (36_assignment_solution)

we should update the username on every keystroke.

1:53

S… Speaker 1 (36_assignment_solution)

Now to be able to see that,

1:55

S… Speaker 1 (36_assignment_solution)

I'll add a paragraph below the input,

1:57

S… Speaker 1 (36_assignment_solution)

and here I want to output username.

1:59

S… Speaker 1 (36_assignment_solution)

Now with that being output here,

2:03

S… Speaker 1 (36_assignment_solution)

we can save this,

2:06

S… Speaker 1 (36_assignment_solution)

ng -surf should be running of course,

2:08

S… Speaker 1 (36_assignment_solution)

and we should see that if I enter supermax

2:13

S… Speaker 1 (36_assignment_solution)

here, we see it below the input.

2:15

S… Speaker 1 (36_assignment_solution)

So the first two tasks here are solved.

2:19

S… Speaker 1 (36_assignment_solution)

Now let's add the button.

2:22

S… Speaker 1 (36_assignment_solution)

So we'll add a button below the paragraph where I will say reset

2:27

S… Speaker 1 (36_assignment_solution)

user.

2:27

S… Speaker 1 (36_assignment_solution)

And this button will first of all receive some bootstrap

2:31

S… Speaker 1 (36_assignment_solution)

classes, button,

2:32

S… Speaker 1 (36_assignment_solution)

button, primary to make it look nice.

2:34

S… Speaker 1 (36_assignment_solution)

But more importantly,

2:35

S… Speaker 1 (36_assignment_solution)

we should disable it if the username is empty.

2:40

S… Speaker 1 (36_assignment_solution)

Now how can we do that?

2:43

S… Speaker 1 (36_assignment_solution)

We have learned that we can bind to the disabled property.

2:47

S… Speaker 1 (36_assignment_solution)

Now,

2:47

S… Speaker 1 (36_assignment_solution)

even though we use that a couple of times,

2:49

S… Speaker 1 (36_assignment_solution)

that's of course not the only property you can bind to,

2:51

S… Speaker 1 (36_assignment_solution)

but it's the one we will need here.

2:53

S… Speaker 2 (36_assignment_solution)

Now,

2:54

S… Speaker 1 (36_assignment_solution)

disabled.

2:55

S… Speaker 1 (36_assignment_solution)

We could set disabled to some property which is true or false,

2:59

S… Speaker 1 (36_assignment_solution)

or we directly set it to true or false.

3:01

S… Speaker 1 (36_assignment_solution)

But as I explained,

3:03

S… Speaker 1 (36_assignment_solution)

between the quotation marks,

3:04

S… Speaker 1 (36_assignment_solution)

you simply have an expression which resolves to a true or false.

3:08

S… Speaker 1 (36_assignment_solution)

Now,

3:10

S… Speaker 1 (36_assignment_solution)

since we want to disable this,

3:12

S… Speaker 1 (36_assignment_solution)

If the username is empty,

3:14

S… Speaker 1 (36_assignment_solution)

we could simply check that between the quotation marks here.

3:18

S… Speaker 1 (36_assignment_solution)

So we could say disable this if username,

3:22

S… Speaker 1 (36_assignment_solution)

this property,

3:23

S… Speaker 1 (36_assignment_solution)

is equal to an empty string.

3:27

S… Speaker 1 (36_assignment_solution)

So two single quotation marks inside here.

3:30

S… Speaker 1 (36_assignment_solution)

With this expression,

3:31

S… Speaker 1 (36_assignment_solution)

this will return true if username is empty,

3:35

S… Speaker 1 (36_assignment_solution)

therefore then this button will be disabled,

3:37

S… Speaker 1 (36_assignment_solution)

otherwise it will be false and the button will be enabled.

3:41

S… Speaker 1 (36_assignment_solution)

Let's see if this works as expected.

3:43

S… Speaker 1 (36_assignment_solution)

After saving this,

3:45

S… Speaker 1 (36_assignment_solution)

the button is indeed disabled at the beginning because username

3:49

S… Speaker 1 (36_assignment_solution)

clearly is an empty string,

3:51

S… Speaker 1 (36_assignment_solution)

but as soon as I type anything in here,

3:54

S… Speaker 1 (36_assignment_solution)

you see it gets enabled.

3:57

S… Speaker 1 (36_assignment_solution)

So this is how we can use property binding again with any expression which

4:01

S… Speaker 1 (36_assignment_solution)

returns us the value the property we're binding to expects.

4:05

S… Speaker 1 (36_assignment_solution)

So in the case of disabled,

4:06

S… Speaker 1 (36_assignment_solution)

true or false.

4:07

S… Speaker 1 (36_assignment_solution)

Now with that we get this solved too.

4:11

S… Speaker 1 (36_assignment_solution)

Now we should also add a click listener to this button so that

4:15

S… Speaker 1 (36_assignment_solution)

we can reset the username once we do click the button.

4:18

S… Speaker 1 (36_assignment_solution)

So, event binding with normal parentheses.

4:22

S… Speaker 1 (36_assignment_solution)

Let's bind to click for this.

4:24

S… Speaker 1 (36_assignment_solution)

And here we could call onReset a method where

4:28

S… Speaker 1 (36_assignment_solution)

we then set the username equal to an empty string.

4:31

S… Speaker 1 (36_assignment_solution)

But since this is all we're going to do,

4:34

S… Speaker 1 (36_assignment_solution)

I can also just say username equals empty

4:38

S… Speaker 1 (36_assignment_solution)

string.

4:38

S… Speaker 1 (36_assignment_solution)

And now don't mistake this for the syntax we used here on the

4:42

S… Speaker 1 (36_assignment_solution)

disabled property.

4:43

S… Speaker 1 (36_assignment_solution)

There we have three equal signs to check something.

4:47

S… Speaker 1 (36_assignment_solution)

Here we have one equal sign to assign a value.

4:50

S… Speaker 1 (36_assignment_solution)

With this in place,

4:53

S… Speaker 1 (36_assignment_solution)

we should now be able to go back to the application,

4:55

S… Speaker 1 (36_assignment_solution)

enter supermax here,

4:58

S… Speaker 1 (36_assignment_solution)

and if I click reset user,

4:59

S… Speaker 1 (36_assignment_solution)

it's empty and the button is disabled again because we reset the username

5:04

S… Speaker 1 (36_assignment_solution)

string.

5:04

S… Speaker 1 (36_assignment_solution)

And that is our assignment on data binding solved.

5:07

S… Speaker 1 (36_assignment_solution)

I hope you enjoyed it.

Ин нусхаи навишташуда бо AI (муайянкунии худкори сухан) эҷод шудааст. Мумкин аст хатогиҳо дошта бошад - барои истифодаи муҳим бо аудиои аслӣ тафтиш кунед. Сиёсати AI

❤️ Шумо STT.ai- ро дӯст медоред? Ба дӯстонатон бигӯед!

Ҷамъбаст

Барои эҷоди ҷамъбасти AI- и ин нусхаи навиштаҷот, тугмаи ҷамъбастро пахш кунед.

Дар бораи ин нусхаи навиштаҷот аз AI пурсед

Дар ин ҷо ба шумо дар бораи ин раванд маълумот дода мешавад: Интихоби дурусти раванди эҷодӣ ва раванди таҳия.

& Дигарро гузарондан