Exercise Solutions: Angular, Lesson 1

Part 1: Modify the CSS

  1. Change the movie list text by adjusting the code in movie-list.component.css to accomplish the following:

    1. The text for the heading and list items can be any color EXCEPT black. (HINT: Take advantage of the movies class).

    2. The movie list should have a centered heading.

    3. The font size should be large enough to easily read.

    .movies {
       color: purple;
       font-size: 1.3vw;
    h3 {
       text-align: center;

    Back to the exercises

Add More Movies

  1. Add two more items to the movies array.

    movies = ['The Manchurian Candidate', 'Oceans 8', 'The Incredibles', 'Hidden Figures'];

    Back to the exercises

Complete the fav-photos Component

  1. The fav-photos component has been generated, but it is incomplete. The page needs more images, which also need to be smaller in size.

    1. In the FavPhotosComponent class, assign a better section heading to the photosTitle variable.

      photosTitle = 'Random Images';
    1. In the .html file for this component, use placeholders in the img tags to display your chosen images.

      <img src="{{image1}}" alt="Oops! Missing photo!">
    1. Use the .css file for this component to make all the images be the same size.

      img {
         width: 40%;
         height: auto;

    Back to the exercises

Part 2: Add More Components

  1. The page needs a set of links to favorite websites.

    1. Generate a fav-links component. Open fav-links.component.ts and shorten the tag name to just fav-links.

         selector: 'fav-links',
         templateUrl: './fav-links.component.html',
         styleUrls: ['./fav-links.component.css']
    1. Inside each <a> tag, set the href attribute equal to a placeholder for an element in the favLinks array:

      <a href = "{{favLinks[0]}}">LaunchCode</a> <br>
      <a href = "{{favLinks[1]}}">WebElements</a>

    Back to the exercises

Part 3: Rearrange the Components

  1. Rearrange the tags fav-photos, fav-links, page-title, etc. to create a specific page layout:

    1. app.component.html has <div> tags to set up a three-column row. Use this to arrange the movie list, images, and chore list.

      <div class="col-3">
      <div class="col-3">
      <div class="col-3">
    1. Add a horizontal line below the three lists with the <hr> tag.

      <!-- three lists are here -->

    Back to the exercises