Adding Some Simple Styling

The main goal of this module was to start putting some of the Angular concepts we have been learning into practice. Although some elements of theming and styling will become more relevant in later modules, the goal of this course is not really to teach you how to style apps.

However… it’s just a little bit sad looking at our application with absolutely no styling. So let’s add a few basic styles.

If you want to make some global changes to your styles, you can do that in the src/styles.scss file. These will apply to all of the components in your application.

body {
  font-family: "Arial", sans-serif;
  background-color: #f5f5f5;
  margin: 3rem;
}

button {
  background-color: #0077cc;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

We can also add styles that apply only to a specific component by supplying them to that component directly.

@Component({
  selector: 'app-todo-list',
  template: `
    <ul>
      @for (todo of todos(); track todo.id){
      <li>
        <a routerLink="/detail/{{ todo.id }}">{{ todo.title }}</a>
      </li>
      } @empty {
      <li>Nothing to do!</li>
      }
    </ul>
  `,
  imports: [RouterLink],
  styles: [
    `
      ul {
        margin: 0;
        padding: 1rem;
      }
    `,
  ],
})

We’ve made some very basic changes, and whilst the application still doesn’t look incredible it looks much better now.

We will explore these styling and theming concepts much more in later lessons as we start to integrate Angular’s material design library. But feel free to go wild now, and add whatever styles you want. Remember not to be afraid of straying from the lesson plan. The goal isn’t to get the applications completed or even working — the more you play and experiment the more you will learn.