56. Adding Content to the Recipes Components

0:02

S… Speaker 1 (56. Adding Content to the Recipes Components)

We added our recipe model.

0:04

S… Speaker 1 (56. Adding Content to the Recipes Components)

Now let's use it.

0:05

S… Speaker 1 (56. Adding Content to the Recipes Components)

So back to the recipe list component.

0:07

S… Speaker 1 (56. Adding Content to the Recipes Components)

Here I added my recipes array.

0:10

S… Speaker 1 (56. Adding Content to the Recipes Components)

And now that we created the model,

0:12

S… Speaker 1 (56. Adding Content to the Recipes Components)

we can also define the type for this.

0:14

S… Speaker 1 (56. Adding Content to the Recipes Components)

So we can add colon to inform TypeScript that now we will define the type

0:18

S… Speaker 1 (56. Adding Content to the Recipes Components)

for this property.

0:19

S… Speaker 1 (56. Adding Content to the Recipes Components)

And the type will be recipe.

0:21

S… Speaker 1 (56. Adding Content to the Recipes Components)

So that will use our own model.

0:25

S… Speaker 1 (56. Adding Content to the Recipes Components)

And not just recipe,

0:26

S… Speaker 1 (56. Adding Content to the Recipes Components)

but an array of recipes,

0:28

S… Speaker 1 (56. Adding Content to the Recipes Components)

which is indicated by adding squared brackets after it.

0:31

S… Speaker 1 (56. Adding Content to the Recipes Components)

So now TypeScript knows the only thing which will ever get stored in this recipes

0:35

S… Speaker 1 (56. Adding Content to the Recipes Components)

property is an array which holds a couple of recipe object

0:39

S… Speaker 1 (56. Adding Content to the Recipes Components)

or also no such objects.

0:41

S… Speaker 1 (56. Adding Content to the Recipes Components)

That would be a possibility too,

0:43

S… Speaker 1 (56. Adding Content to the Recipes Components)

but certainly not a couple of strings or numbers,

0:45

S… Speaker 1 (56. Adding Content to the Recipes Components)

but objects like this,

0:47

S… Speaker 1 (56. Adding Content to the Recipes Components)

like you find in our model.

0:50

S… Speaker 1 (56. Adding Content to the Recipes Components)

Now, to inform TypeScript where this type is coming from,

0:54

S… Speaker 1 (56. Adding Content to the Recipes Components)

we need to add an import.

0:55

S… Speaker 1 (56. Adding Content to the Recipes Components)

So I'll import recipe.

0:58

S… Speaker 1 (56. Adding Content to the Recipes Components)

That is what we named it in here,

1:01

S… Speaker 1 (56. Adding Content to the Recipes Components)

right? That's our class name.

1:03

S… Speaker 1 (56. Adding Content to the Recipes Components)

So that's what we have to specify between the curly braces here.

1:06

S… Speaker 1 (56. Adding Content to the Recipes Components)

And now we have to move up one folder.

1:10

S… Speaker 1 (56. Adding Content to the Recipes Components)

Since we're in the recipe list folder right now,

1:12

S… Speaker 1 (56. Adding Content to the Recipes Components)

we have to go to the recipes folder because that is where our recipe model lives.

1:16

S… Speaker 1 (56. Adding Content to the Recipes Components)

So now I navigated up one folder.

1:18

S… Speaker 1 (56. Adding Content to the Recipes Components)

just like with the cd command in your terminal,

1:21

S… Speaker 1 (56. Adding Content to the Recipes Components)

and then it's in the recipe model file,

1:24

S… Speaker 1 (56. Adding Content to the Recipes Components)

again, without the file extension.

1:25

S… Speaker 1 (56. Adding Content to the Recipes Components)

So with that,

1:26

S… Speaker 1 (56. Adding Content to the Recipes Components)

we can now use this model,

1:28

S… Speaker 1 (56. Adding Content to the Recipes Components)

and now we can manage our array of recipes here.

1:32

S… Speaker 1 (56. Adding Content to the Recipes Components)

And let's start with one recipe,

1:34

S… Speaker 1 (56. Adding Content to the Recipes Components)

one dummy recipe.

1:35

S… Speaker 1 (56. Adding Content to the Recipes Components)

So in this array,

1:37

S… Speaker 1 (56. Adding Content to the Recipes Components)

I will create a new recipe and I can use the new keyword to create a

1:41

S… Speaker 1 (56. Adding Content to the Recipes Components)

new object based on this recipe blueprint,

1:44

S… Speaker 1 (56. Adding Content to the Recipes Components)

based on our class.

1:45

S… Speaker 1 (56. Adding Content to the Recipes Components)

And now when executing this like a method,

1:48

S… Speaker 1 (56. Adding Content to the Recipes Components)

we're actually calling the constructor.

1:51

S… Speaker 1 (56. Adding Content to the Recipes Components)

So now here we need to pass the arguments we're expecting in

1:55

S… Speaker 1 (56. Adding Content to the Recipes Components)

this constructor.

1:55

S… Speaker 1 (56. Adding Content to the Recipes Components)

So name,

1:56

S… Speaker 1 (56. Adding Content to the Recipes Components)

description and image path.

1:58

S… Speaker 1 (56. Adding Content to the Recipes Components)

Now, you may choose any data you want here.

2:00

S… Speaker 1 (56. Adding Content to the Recipes Components)

I'll name this a test recipe.

2:04

S… Speaker 1 (56. Adding Content to the Recipes Components)

So that will be the title,

2:05

S… Speaker 1 (56. Adding Content to the Recipes Components)

the name of the recipe.

2:06

S… Speaker 1 (56. Adding Content to the Recipes Components)

Then the description.

2:07

S… Speaker 1 (56. Adding Content to the Recipes Components)

This is simply a test maybe.

2:10

S… Speaker 1 (56. Adding Content to the Recipes Components)

And the image path.

2:11

S… Speaker 1 (56. Adding Content to the Recipes Components)

Now, as I said,

2:12

S… Speaker 1 (56. Adding Content to the Recipes Components)

I'm going to use images from the web here.

2:15

S… Speaker 1 (56. Adding Content to the Recipes Components)

So we're going to use a URL.

2:17

S… Speaker 1 (56. Adding Content to the Recipes Components)

Now,

2:18

S… Speaker 1 (56. Adding Content to the Recipes Components)

let's simply search for an image.

2:21

S… Speaker 1 (56. Adding Content to the Recipes Components)

And I will search for recipe.

2:25

S… Speaker 1 (56. Adding Content to the Recipes Components)

Let's use Google image search.

2:28

S… Speaker 1 (56. Adding Content to the Recipes Components)

I also want to make sure that I may use whatever I

2:32

S… Speaker 1 (56. Adding Content to the Recipes Components)

find here.

2:33

S… Speaker 1 (56. Adding Content to the Recipes Components)

So let's find a recipe.

2:36

S… Speaker 1 (56. Adding Content to the Recipes Components)

Maybe this one

2:40

S… Speaker 1 (56. Adding Content to the Recipes Components)

here. Let's see if we

2:44

S… Speaker 1 (56. Adding Content to the Recipes Components)

take this.

2:45

S… Speaker 1 (56. Adding Content to the Recipes Components)

And deep linking like this,

2:47

S… Speaker 1 (56. Adding Content to the Recipes Components)

of course, should be done in a real app.

2:49

S… Speaker 1 (56. Adding Content to the Recipes Components)

This is just for testing this.

2:51

S… Speaker 1 (56. Adding Content to the Recipes Components)

So if we take this image here and paste the path in here as

2:55

S… Speaker 1 (56. Adding Content to the Recipes Components)

a string, now we should be able to use this later on once we output this.

2:59

S… Speaker 1 (56. Adding Content to the Recipes Components)

So with that,

3:01

S… Speaker 1 (56. Adding Content to the Recipes Components)

we are using our own model.

3:03

S… Speaker 1 (56. Adding Content to the Recipes Components)

We're using it here in the recipe list component.

3:05

S… Speaker 1 (56. Adding Content to the Recipes Components)

Of course,

3:06

S… Speaker 1 (56. Adding Content to the Recipes Components)

we won't be able to see anything for now.

3:08

S… Speaker 1 (56. Adding Content to the Recipes Components)

So to see that,

3:09

S… Speaker 1 (56. Adding Content to the Recipes Components)

we should actually do something in the template of the recipe list component.

3:14

S… Speaker 1 (56. Adding Content to the Recipes Components)

Here,

3:15

S… Speaker 1 (56. Adding Content to the Recipes Components)

I'm right now only outputting my recipe item.

3:17

S… Speaker 1 (56. Adding Content to the Recipes Components)

And I want to loop through all these items.

3:20

S… Speaker 1 (56. Adding Content to the Recipes Components)

and use them to display my recipes.

3:22

S… Speaker 1 (56. Adding Content to the Recipes Components)

For now,

3:24

S… Speaker 1 (56. Adding Content to the Recipes Components)

what I will do is I will add a bootstrap row first of all,

3:27

S… Speaker 1 (56. Adding Content to the Recipes Components)

like that.

3:28

S… Speaker 1 (56. Adding Content to the Recipes Components)

And in that row,

3:29

S… Speaker 1 (56. Adding Content to the Recipes Components)

I want to add a column with the class colXS12 to have it span over the full

3:33

S… Speaker 1 (56. Adding Content to the Recipes Components)

width.

3:34

S… Speaker 1 (56. Adding Content to the Recipes Components)

And here,

3:35

S… Speaker 1 (56. Adding Content to the Recipes Components)

I will later add a button,

3:37

S… Speaker 1 (56. Adding Content to the Recipes Components)

or I will add the button right now,

3:39

S… Speaker 1 (56. Adding Content to the Recipes Components)

but I will later add the functionality to create a new recipe.

3:42

S… Speaker 1 (56. Adding Content to the Recipes Components)

So here,

3:43

S… Speaker 1 (56. Adding Content to the Recipes Components)

I'll simply set up a button.

3:47

S… Speaker 1 (56. Adding Content to the Recipes Components)

with the classes button and then button success,

3:50

S… Speaker 1 (56. Adding Content to the Recipes Components)

where I say new recipe like this.

3:53

S… Speaker 1 (56. Adding Content to the Recipes Components)

Now again,

3:55

S… Speaker 1 (56. Adding Content to the Recipes Components)

this will be hooked up later.

3:56

S… Speaker 1 (56. Adding Content to the Recipes Components)

So I'll add another row below this,

3:59

S… Speaker 1 (56. Adding Content to the Recipes Components)

which should now actually hold my list of recipes.

4:01

S… Speaker 1 (56. Adding Content to the Recipes Components)

Here I'll again use col -xs12 to have to span over the full

4:05

S… Speaker 1 (56. Adding Content to the Recipes Components)

width.

4:05

S… Speaker 1 (56. Adding Content to the Recipes Components)

And keep in mind,

4:07

S… Speaker 1 (56. Adding Content to the Recipes Components)

this will already be nested inside of this MD5 column,

4:10

S… Speaker 1 (56. Adding Content to the Recipes Components)

so it's only that wide to begin with.

4:13

S… Speaker 1 (56. Adding Content to the Recipes Components)

But inside this column,

4:14

S… Speaker 1 (56. Adding Content to the Recipes Components)

I want it to span over the full width.

4:16

S… Speaker 1 (56. Adding Content to the Recipes Components)

And now here we will later output my recipe items.

4:20

S… Speaker 1 (56. Adding Content to the Recipes Components)

For now,

4:21

S… Speaker 1 (56. Adding Content to the Recipes Components)

though, let's put the code we will later put into app recipe

4:26

S… Speaker 1 (56. Adding Content to the Recipes Components)

item into this component here directly.

4:30

S… Speaker 1 (56. Adding Content to the Recipes Components)

Because right now we will have no way of getting our recipe

4:34

S… Speaker 1 (56. Adding Content to the Recipes Components)

data down to the recipe item.

4:36

S… Speaker 1 (56. Adding Content to the Recipes Components)

So that is something I will actually do after the next section

4:41

S… Speaker 1 (56. Adding Content to the Recipes Components)

once we learn this.

4:42

S… Speaker 1 (56. Adding Content to the Recipes Components)

But so that we're able to see something,

4:44

S… Speaker 1 (56. Adding Content to the Recipes Components)

I will add the code for a single recipe item here into the recipe

4:49

S… Speaker 1 (56. Adding Content to the Recipes Components)

list directly.

4:50

S… Speaker 1 (56. Adding Content to the Recipes Components)

A single recipe item should be clickable.

4:53

S… Speaker 1 (56. Adding Content to the Recipes Components)

So it's going to be an anchor tag because later once we click it,

4:57

S… Speaker 1 (56. Adding Content to the Recipes Components)

we want to select it.

4:58

S… Speaker 1 (56. Adding Content to the Recipes Components)

And here I will then actually assign another

5:02

S… Speaker 1 (56. Adding Content to the Recipes Components)

class, which will be list group item to make it look

5:06

S… Speaker 1 (56. Adding Content to the Recipes Components)

like a list group item in Bootstrap.

5:09

S… Speaker 1 (56. Adding Content to the Recipes Components)

Also add clear fix.

5:11

S… Speaker 1 (56. Adding Content to the Recipes Components)

Otherwise, it will probably look wrong.

5:14

S… Speaker 1 (56. Adding Content to the Recipes Components)

And then I'll add a div,

5:17

S… Speaker 1 (56. Adding Content to the Recipes Components)

which will receive the class pullLeft,

5:20

S… Speaker 1 (56. Adding Content to the Recipes Components)

since I want to have this on the left of this list item.

5:24

S… Speaker 1 (56. Adding Content to the Recipes Components)

In there of h4 tag maybe with the recipe name.

5:27

S… Speaker 1 (56. Adding Content to the Recipes Components)

This should receive the class list group item

5:31

S… Speaker 1 (56. Adding Content to the Recipes Components)

heading.

5:32

S… Speaker 1 (56. Adding Content to the Recipes Components)

Again, these are all bootstrap classes I'm using here.

5:35

S… Speaker 1 (56. Adding Content to the Recipes Components)

And there I will later output the name of the recipe.

5:39

S… Speaker 1 (56. Adding Content to the Recipes Components)

So recipe name for now.

5:40

S… Speaker 1 (56. Adding Content to the Recipes Components)

We will soon replace this with dynamic content.

5:43

S… Speaker 1 (56. Adding Content to the Recipes Components)

Below this,

5:45

S… Speaker 1 (56. Adding Content to the Recipes Components)

I want to have a paragraph with a class of list

5:50

S… Speaker 1 (56. Adding Content to the Recipes Components)

group item text.

5:55

S… Speaker 1 (56. Adding Content to the Recipes Components)

And here we will have the description of the recipe.

5:59

S… Speaker 1 (56. Adding Content to the Recipes Components)

And on the other side,

6:02

S… Speaker 1 (56. Adding Content to the Recipes Components)

I'll add a span with a class of pull right.

6:06

S… Speaker 1 (56. Adding Content to the Recipes Components)

In the span,

6:08

S… Speaker 1 (56. Adding Content to the Recipes Components)

I want to output my image.

6:10

S… Speaker 1 (56. Adding Content to the Recipes Components)

So here what I'll do is I'll add a class image responsive

6:15

S… Speaker 1 (56. Adding Content to the Recipes Components)

so that bootstrap will resize this image automatically for me.

6:19

S… Speaker 1 (56. Adding Content to the Recipes Components)

And again,

6:20

S… Speaker 1 (56. Adding Content to the Recipes Components)

all that content will go into the app recipe item component after

6:24

S… Speaker 1 (56. Adding Content to the Recipes Components)

the next course section.

6:25

S… Speaker 1 (56. Adding Content to the Recipes Components)

One more thing I want to set on the image though,

6:28

S… Speaker 1 (56. Adding Content to the Recipes Components)

I want to add my own style.

6:30

S… Speaker 1 (56. Adding Content to the Recipes Components)

I'll simply add an inline style here to set the maximum height of

6:34

S… Speaker 1 (56. Adding Content to the Recipes Components)

that item to 50 pixels.

6:36

S… Speaker 1 (56. Adding Content to the Recipes Components)

so that we can't go above that and Bootstrip will handle the

6:41

S… Speaker 1 (56. Adding Content to the Recipes Components)

rest and resize the image appropriately.

6:42

S… Speaker 1 (56. Adding Content to the Recipes Components)

So that's my setup for a single item.

6:45

S… Speaker 1 (56. Adding Content to the Recipes Components)

Of course, feel free to fine tune this to your needs.

6:49

S… Speaker 1 (56. Adding Content to the Recipes Components)

Now with that,

6:50

S… Speaker 1 (56. Adding Content to the Recipes Components)

the goal is to replicate this item.

6:54

S… Speaker 1 (56. Adding Content to the Recipes Components)

Again, we will later put it into its own component and then fill

6:58

S… Speaker 1 (56. Adding Content to the Recipes Components)

these spaces here with dynamic data.

7:03

S… Speaker 1 (56. Adding Content to the Recipes Components)

This is your challenge.

7:04

S… Speaker 1 (56. Adding Content to the Recipes Components)

We got a recipe list component with our recipes

7:09

S… Speaker 1 (56. Adding Content to the Recipes Components)

array.

7:09

S… Speaker 1 (56. Adding Content to the Recipes Components)

The array only holds one item for now.

7:12

S… Speaker 1 (56. Adding Content to the Recipes Components)

You, of course,

7:13

S… Speaker 1 (56. Adding Content to the Recipes Components)

are free to add more.

7:14

S… Speaker 1 (56. Adding Content to the Recipes Components)

But even with that one item,

7:16

S… Speaker 1 (56. Adding Content to the Recipes Components)

you should be able to replicate this part here as often

7:20

S… Speaker 1 (56. Adding Content to the Recipes Components)

as needed to create one.

7:22

S… Speaker 1 (56. Adding Content to the Recipes Components)

section of this code for each item in this recipe array and then fill

7:27

S… Speaker 1 (56. Adding Content to the Recipes Components)

name, description and the source attribute here,

7:31

S… Speaker 1 (56. Adding Content to the Recipes Components)

property, with the right values for this recipe.

7:34

S… Speaker 1 (56. Adding Content to the Recipes Components)

I will do this in the next lecture,

7:36

S… Speaker 1 (56. Adding Content to the Recipes Components)

but definitely try doing this on your own first.

56. Adding Content to the Recipes Components

Zesummenfassung

D'Lëscht vun de lëtzebuergesche Transkriptiounen