235. Adding new Ingredient Controls

Jul 22, 2026 00:51 · 3:39 · English · Whisper Turbo · 2 Speakers

This transcript expires in 8 dagar. Uppgradering til permanent lagring →

Lærarabókin

0:02

S… Speaker 1 (235. Adding new Ingredient Controls)

In the last lecture we added our array.

0:04

S… Speaker 1 (235. Adding new Ingredient Controls)

Now I want to clean up how it looks,

0:08

S… Speaker 1 (235. Adding new Ingredient Controls)

some styling,

0:09

S… Speaker 1 (235. Adding new Ingredient Controls)

but mainly I want to add a button which allows us to

0:13

S… Speaker 1 (235. Adding new Ingredient Controls)

add a new ingredient to that array.

0:16

S… Speaker 2 (235. Adding new Ingredient Controls)

Well,

0:17

S… Speaker 1 (235. Adding new Ingredient Controls)

to work on the styling,

0:18

S… Speaker 1 (235. Adding new Ingredient Controls)

all I really want to do is I want to have some spacing between the rows.

0:22

S… Speaker 1 (235. Adding new Ingredient Controls)

Well, there are a couple of ways of getting this style.

0:27

S… Speaker 1 (235. Adding new Ingredient Controls)

What I will simply do is I will add an inline style,

0:31

S… Speaker 1 (235. Adding new Ingredient Controls)

a normal style,

0:32

S… Speaker 1 (235. Adding new Ingredient Controls)

no angular style,

0:34

S… Speaker 1 (235. Adding new Ingredient Controls)

no ng -style directive.

0:35

S… Speaker 1 (235. Adding new Ingredient Controls)

A normal style where I say margin,

0:38

S… Speaker 1 (235. Adding new Ingredient Controls)

top,

0:40

S… Speaker 1 (235. Adding new Ingredient Controls)

and set this to 10 pixels maybe.

0:42

S… Speaker 1 (235. Adding new Ingredient Controls)

And with that,

0:44

S… Speaker 1 (235. Adding new Ingredient Controls)

it looks much better.

0:45

S… Speaker 1 (235. Adding new Ingredient Controls)

So that's all I wanted to do for now.

0:49

S… Speaker 1 (235. Adding new Ingredient Controls)

The more important part is that we're able to add new ingredients.

0:54

S… Speaker 1 (235. Adding new Ingredient Controls)

And for this,

0:55

S… Speaker 1 (235. Adding new Ingredient Controls)

I'll simply add a new button at the end of this

1:00

S… Speaker 1 (235. Adding new Ingredient Controls)

array area.

1:01

S… Speaker 1 (235. Adding new Ingredient Controls)

So outside of the div,

1:03

S… Speaker 1 (235. Adding new Ingredient Controls)

which is responsible for my individual form groups,

1:07

S… Speaker 1 (235. Adding new Ingredient Controls)

I'll add a new row with a new column inside of it.

1:11

S… Speaker 1 (235. Adding new Ingredient Controls)

And here I will

1:15

S… Speaker 1 (235. Adding new Ingredient Controls)

simply add a button which says add ingredient,

1:18

S… Speaker 1 (235. Adding new Ingredient Controls)

which will be

1:21

S… Speaker 1 (235. Adding new Ingredient Controls)

of type or which will get a class of button,

1:23

S… Speaker 1 (235. Adding new Ingredient Controls)

button success maybe.

1:24

S… Speaker 1 (235. Adding new Ingredient Controls)

So now it sits directly at the bottom.

1:28

S… Speaker 1 (235. Adding new Ingredient Controls)

Maybe let's simply add a horizontal line between rows.

1:32

S… Speaker 1 (235. Adding new Ingredient Controls)

And that looks pretty good.

1:34

S… Speaker 1 (235. Adding new Ingredient Controls)

So now we get this button.

1:36

S… Speaker 1 (235. Adding new Ingredient Controls)

Let's now also hook it up.

1:38

S… Speaker 1 (235. Adding new Ingredient Controls)

I will add a click listener on add ingredient.

1:41

S… Speaker 1 (235. Adding new Ingredient Controls)

And here in this method,

1:44

S… Speaker 1 (235. Adding new Ingredient Controls)

which I'll add to the TypeScript file,

1:46

S… Speaker 1 (235. Adding new Ingredient Controls)

I want to add a new control to this array of form

1:50

S… Speaker 1 (235. Adding new Ingredient Controls)

controls.

1:51

S… Speaker 1 (235. Adding new Ingredient Controls)

Now I can simply do this by accessing

1:56

S… Speaker 1 (235. Adding new Ingredient Controls)

my recipe form.

1:57

S… Speaker 1 (235. Adding new Ingredient Controls)

There I can get my ingredients control

2:01

S… Speaker 1 (235. Adding new Ingredient Controls)

and I know that this will be a form array but Angular

2:06

S… Speaker 1 (235. Adding new Ingredient Controls)

or TypeScript to be precise doesn't know this.

2:09

S… Speaker 1 (235. Adding new Ingredient Controls)

So I will explicitly cast it with this cast.

2:14

S… Speaker 1 (235. Adding new Ingredient Controls)

command here basically by enclosing the type I want to convert it to

2:18

S… Speaker 1 (235. Adding new Ingredient Controls)

between smaller than and greater than signs and

2:22

S… Speaker 1 (235. Adding new Ingredient Controls)

then enclosing this all in parentheses and now the part here between

2:26

S… Speaker 1 (235. Adding new Ingredient Controls)

the parentheses is treated like a form array because I know that

2:31

S… Speaker 1 (235. Adding new Ingredient Controls)

it indeed is one so here I can call push and

2:35

S… Speaker 1 (235. Adding new Ingredient Controls)

I want to push

2:37

S… Speaker 1 (235. Adding new Ingredient Controls)

new form group because remember we don't push a control here we

2:41

S… Speaker 1 (235. Adding new Ingredient Controls)

need two inputs so a group of inputs and there again I

2:45

S… Speaker 1 (235. Adding new Ingredient Controls)

will have a name which is a new form control and I will have

2:49

S… Speaker 1 (235. Adding new Ingredient Controls)

an amount which will be a new form control and

2:54

S… Speaker 1 (235. Adding new Ingredient Controls)

we don't need to provide any initial values because I don't want to have any so

2:58

S… Speaker 1 (235. Adding new Ingredient Controls)

if I save this and we go back to the application

3:02

S… Speaker 1 (235. Adding new Ingredient Controls)

We should indeed see that once this reloads here,

3:04

S… Speaker 1 (235. Adding new Ingredient Controls)

if I click add ingredient,

3:06

S… Speaker 1 (235. Adding new Ingredient Controls)

we add a new line.

3:08

S… Speaker 1 (235. Adding new Ingredient Controls)

However,

3:09

S… Speaker 1 (235. Adding new Ingredient Controls)

I also submit the form with each click as you can see here on the right.

3:13

S… Speaker 1 (235. Adding new Ingredient Controls)

This is quickly fixed by making sure that this button receives

3:18

S… Speaker 1 (235. Adding new Ingredient Controls)

the type button.

3:20

S… Speaker 1 (235. Adding new Ingredient Controls)

And now it shouldn't submit the form anymore.

3:23

S… Speaker 1 (235. Adding new Ingredient Controls)

So now it just adds ingredients.

3:25

S… Speaker 1 (235. Adding new Ingredient Controls)

This is all working.

3:27

S… Speaker 1 (235. Adding new Ingredient Controls)

This is great.

3:28

S… Speaker 1 (235. Adding new Ingredient Controls)

Now before we make this form submitable or we do something up

3:32

S… Speaker 1 (235. Adding new Ingredient Controls)

on submission,

3:33

S… Speaker 1 (235. Adding new Ingredient Controls)

let's make sure that we add some validation to it.

This transcript was generated by AI (automatic speech recognition). May contain errors - check against the original audio for critical use. Politikkur

❤️ Love STT.ai? Tell your friends!

Samandráttur

Click Summarize to generate an AI summary of this transcript.

Spørg AI um hetta transkriptión

Tað er ein spurningur um, hvussu nógvar ferðir ein kann skriva og lesa.

Transcribe otro