Skip to content

Media Library Step 4: Coding the Frontend (Intro)

For the front end, we'll use the latest version of Angular.

To get started, move to the root folder. Do not make a folder called frontend; we'll let angular make the folder for us.

Tip: You'll want to make sure you have the latest angular tools installed. Even if you've installed it within the last year or so, you'll want to reinstall to get the latest updates. We make use of its latest features in this walkthrough.

To install the latest angular, simply type:

npm install -g @angular/cli

(For more info, head over to Install Angular CLI.)

Then, from the root folder, type:

ng new frontend

For the question about stylesheets, choose CSS.

For the question about Serve-side Rendering, answer N.

If you get asked any other questions, accept the defaults.

After the app gets created, move into its folder:

cd frontend

What we're going to build

We're going to build three components:

  • Image Uploader: This will provide a form similar to the static HTML form we built in the backend, except it's an angular component (and looks nicer 😉)

  • Thumbnail Gallery: This will display a list of thumbnails. The parent component will provide the IDs of which thumbnails to display. For example, the app component will read in all thumbnails IDs and supply it to this component. The query component will perform a query on the backend and retrieve a list of thumbnails, and provide it to this component. This component will display them in a grid fashion, and the user can click on an individual thumbnail to open the full image.

  • Image Search: This will provide a search box that the user can enter in a search for tags. The search will be sent to the backend, which will return a list of thumbnail IDs; these will then be pushed into an instance of the thumbnail gallery component.

What's missing? Well, we're not yet using the three custom tags that we're allowing the user to add. As we add onto this app, we'll add that feature, and update these docs you're reading.

Let's get started! We'll generate all three components right now. Make sure you're in the frontend folder and type:

ng generate component image-upload
ng generate component thumbnail-gallery
ng generate component image-search

We'll create each component one at a time. Let's start with image-upload.

Head to Step 5.