230. Creating the Template for the (Reactive) Recipe Edit Form

Jul 22, 2026 00:52 · 5:00 · English · Whisper Turbo · 2 Speakers
This transcript expires in 8 dagar. Uppgradering til permanent lagring →
Lærarabókin
Showing only
0:02
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
In the last lectures,
0:03
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
we edited our form using the template -driven approach.
0:06
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Now let's move on to the reactive approach for the
0:11
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
new recipe or editing an existing one.
0:13
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
We got our recipeEdit component here,
0:16
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
and it doesn't have a form inside of it.
0:20
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
So we should definitely change this.
0:23
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
In here,
0:24
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
I will start by adding a row and then a column which should span
0:28
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
the full width on all device sizes and then the form without an
0:32
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
action because we don't want to send a request.
0:34
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
We want to handle it in Angular.
0:36
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Now we will need a couple of inputs here.
0:39
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
I will actually begin with the save and cancel buttons
0:43
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
though.
0:43
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
So right at the start of this form,
0:46
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
I'll have another bootstrap row.
0:48
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Col xs12 will be the width.
0:52
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
And here I want to have a button of type submit with
0:57
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
a class of button and then button success so that
1:01
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
it's a green button,
1:02
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
which should simply save the form,
1:05
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
should save the recipe.
1:06
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
I'll have a second button of type button so that it doesn't
1:11
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
submit the form,
1:11
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
which will get the class button danger,
1:15
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
which should simply cancel the editing here.
1:20
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
So these are the two buttons which allow me to control the form in the end.
1:23
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Now for the inputs.
1:25
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
I definitely want a row with my
1:30
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
default column width here,
1:31
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
where I will add a div with the form group CSS class.
1:36
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
To simply use that bootstrap CSS class to give it some nice styling,
1:40
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
then I'll add a label for the name of that
1:44
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
recipe, and I'll say name here.
1:47
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
And I will add the input.
1:49
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
The input will be of type text with the ID name maybe.
1:53
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
And let's already structure this over multiple lines.
1:56
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
And with a class of form control to make it look
2:00
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
nice.
2:01
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Now I will actually copy that row and
2:05
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
paste it in below this name.
2:07
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Here I want to have my image path.
2:11
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
So I'll name it image URL here,
2:14
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
this input.
2:14
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
And here I simply want the user to paste in the image path.
2:18
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
So that will be this row.
2:21
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Below it I'll add another row.
2:23
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Here I won't have my form group though.
2:26
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Instead I want to preview the image the user pasted in.
2:30
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
So I will simply add my image element here.
2:34
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
I will later bind the source and assign
2:39
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
the image responsive class to it.
2:42
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
We will fine tune this later if needed.
2:44
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
So that allows the user to enter a title and
2:48
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
an image and see that image as a preview.
2:50
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Now I'll add another row.
2:54
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
with another label,
2:55
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
which should now say description.
2:57
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
So the description of our recipe or the content of the recipe.
3:01
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
So I'll assign this for the ID description,
3:04
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
which of course will be this,
3:06
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
but this will not be an input.
3:08
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
I'll change it to a text area.
3:10
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Therefore,
3:10
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
I also need a closing tag for this.
3:12
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
On this text area,
3:15
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
I want to provide,
3:16
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
let's say six rows for typing so that it's not too big,
3:20
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
not too small,
3:20
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
should be okay.
3:22
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Well, and then below this I'll add yet number
3:27
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
div.
3:27
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
This will later be required for the ingredients of
3:31
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
that recipe here.
3:33
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
So here we will actually need to create an array of controls and
3:37
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
we will need to manage this.
3:38
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
We did learn how to do this,
3:39
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
but here we will see it in practice in a real project.
3:44
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Now here as this will be for my array of items I will get rid of
3:48
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
the label and get rid of the ID.
3:50
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Also get rid of that div here.
3:52
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Instead I will add a new row inside of there.
3:56
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
We're going to have multiple ingredients probably and each row
4:00
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
should then have a couple of columns.
4:02
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
The first one spanning almost the entire width.
4:05
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
It will hold the input for the name of the ingredient.
4:09
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
The second one
4:12
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
being very narrow next to it which should hold the
4:16
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
amount and the third one also a very small
4:21
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
column should hold a button which allows me to delete
4:25
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
an ingredient therefore button danger and put an X
4:29
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
on it
4:30
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
So if you have a look at this,
4:31
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
that is how a single ingredient will look like.
4:34
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
Now, we don't have descriptions for these inputs.
4:36
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
You could, of course,
4:37
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
restructure this form and try placing labels next to them or use a different layout.
4:41
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
I like that layout here,
4:43
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
though. With that,
4:45
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
we got the HTML code almost finished.
4:48
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
There is something missing.
4:50
S… Speaker 2 (230. Creating the Template for the (Reactive) Recipe Edit Form)
But before we work on this,
4:51
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
let's make this base form work without
4:55
S… Speaker 1 (230. Creating the Template for the (Reactive) Recipe Edit Form)
ingredients for a start.

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.
Summating...
Spørg AI um hetta transkriptión
Tað er ein spurningur um, hvussu nógvar ferðir ein kann skriva og lesa.
Transcribe otro