Creating a New Project

The next project we’ll work on will display a set of images with pagination. The main focus of this section is to learn about directives. First things first, we’ll prepare a new project.

New project

If you’re running code locally, then you’ll need to run the following command:

ng new directives

During the setup process, you’ll be asked to configure the project. Go with the default settings.

Installing Bootstrap

After installing the project, navigate to the newly created directory, and install Bootstrap. We’ll be using it to help us with styles. You can run the following command to install Bootstrap:

npm i bootstrap

We’ll need to update the styles.css file to import Bootstrap.

@import "bootstrap/dist/css/bootstrap.css"

Adding data

The next thing we’ll do is add the set of images we’ll be using in the application. If you’d like, you can download some of your favorite and upload them to the assets directory. Alternatively, you can provide a direct link to them. There are two sites where you can grab royalty-free images: Unsplash and Lorem Picsum.

Once you’ve retrieved your images, we’ll update the app.component.ts file to define a property called images. Each item in the array will be an object with two properties: title and url. The title property will be dummy text, and the url property will be the URL to the image.