Angular Dynamic Data with Sanity.io with Tara Z. Manicsic
Angular Components with Sanity.io Data
Let's put all this data to use by adding it to Angular components so user's can actually see everything we're pulling in!
📓 Resources 📓
[00:00:00] We want to actually see the data that we're getting, so we'll go ahead now and update the components and create a new component so we can showcase the data and the information that we're getting from Sanity.io. When we made our service we used the HTTP client module, but now we have to actually bring it into our project through app.module.typescript.
We'll import it here from Angular common HTTP, and then also make sure that we put it inside of our imports. [00:00:30] Underneath the app routing module, we will add HTTP client module and save that. Last time we did generate another thing, we'll generate a component and put it in a components folder, and this is the product list component. This is the one that will hold all the information that we get from Sanity for the products, and we'll use it in the products/products.module module so that it's connected to the products page.
[00:01:00] To start working on this, let's look at that products module at TypeScript folder. You can see that we have now brought in that product list component. Yay, that means we will actually be able to hook these two up. They will talk to each other as parent and child into the product list component TypeScript, and add an input directory from Angular core. This is the way for parent to talk to child.
Next, we need this component to understand what product is, [00:01:30] and so this is where we're also going to use that model that we created for product where we import product and set the path from source, app, models, product. Now we're going to use input to grab the information about the product from parent, and we'll pass product and set the type to product, but we need to instantiate it, otherwise we're going to get an error [00:02:00] because we're using strict mode.
One of the ways to avoid that error is to instantiate it like we're doing here by making a product, and it has to match the model that we have for product. But we're going to just put a bunch of test data in. This is just going to be used as a default for getting the information before the information is populated or something goes wrong. Since it's in strict mode for the type, we have to instantiate it, or do a workaround, which I'll show you a little workaround on another [00:02:30] example that we use.
But for now, we'll instantiate it and then that's all we need in that file. We can open up the HTML to actually look at what we're going to be doing for the display of this data. Inside here, we're just going to make a class for the product item. Go ahead and put the image in there, and we're just saying product.image. We'll make another class for the product item details, and in here, we'll just have the product name, and we'll pass in that [00:03:00] product.name for the product.
Now we'll look at the CSS. We're not going to do too much, we're going to align the text center and leave it at that. We also need to update the actual product component in which the product list component will be displayed inside. But inside here in the TypeScript file, we first have to get that information from, again, our observable that we're getting from [00:03:30] the Netlify function which hits Sanity.
We import observable from RxJs, and we import the product service which is grabbing our information from source, app, services, product.service. Now, it helps if you actually name it correctly by putting in product service, hence why we had that red line there. Then again, we'll grab the product from our model. We're going to go ahead and say [00:04:00] set products to this observable of an array of products. This is where I did the other workaround by adding the exclamation point after products. This is the nonnull assertion operator for TypeScript basically saying this expression cannot be null or undefined, so don't complain about it having the possibility of being null or undefined. It's definitely a workaround. It's better to instantiate your observables, but for now,[00:04:30] this is how we're handling it. Next, we'll inject the product service inside of our constructor by setting private product service and making sure that the P in that is lowercase so we avoid any confusion. We set it to ProductsService with capital P, and then on ngOnInit, we're going to fire this .products equals this .get product. OnInit, we're going to grab those [00:05:00] products. Now, we can go ahead and open up the products.component.html to look at the template for this.
We're going to have a main class products-list. Inside of here, we're going to say *ngIf. If there are products, we're going to do async pipe as products: [00:05:30] else, show the loadingBlock, which is going to be an ng template. Inside here, it's going to be showing this if we have products. We'll put in the app products list component, so assign the class of product item and do an ngFor loop to say, "let product of products."
For each of those products, we're going to parse the product in, bind that in, and then we're going to just set product.name and send that through. Then, we're going [00:06:00] to close out that component, close out main, and then also do an ng template called loadingBlock that's just going to show if we're still loading getting products and say, "Hey, we're loading products." That's all you need for the template there. We'll go ahead and save that and make sure that we have it styled correctly. We'll go to products.component.css. [00:06:30] Again, I will speed up this a bit. We're just going to be doing some display, inline-flex, wrap the flex and justify the content to space evenly, and set some margins and the min-width and width so that all lays out well. Let's go ahead and head to the terminal and run Netlify Dev to see, not only the function in action but what it looks like in the components that we just built out. We can head to localhost 8888. [00:07:00] We see that we just see the titles, so let's take a look and see what happened in the template. Inside here, you can see that we said app-products-list when it's actually app-product-list.
That whole component is just not showing up. We fix that typo, hit save, and we can head back to the terminal and run [00:07:30] Netlify Dev again, head back to the browser, and refresh. Now we see products. This is actually grabbing information from our Sanity CMS. I actually want them three on the line, so I'm just going to change the min-width to 350. CSS is not my strongest suit, but we can see we have three chairs in a row there. We can see that we're getting our logs in our terminal [00:08:00] because we're running it locally. Since we know that that's working great, this looks how we want this to look.
It's getting all the images and information we need. Let's see what happens when we put it up live. To do this, we'll just use our Git workflow to trigger a build by adding all of the changes and committing them, saying that we added the display components for product. Then, we're going to push that up in order to trigger a deploy from Netlify. [00:08:30] If you've gotten this far, you're doing really great, and we're almost done. I'll see you at the next video.
[00:08:35][END OF AUDIO]