30.1. Angular Directives

In the DOM chapter you learned how to wait for events and then change the appearance of the web page in response. You practiced these skills in the DOM studio. By waiting for the users to click specific buttons, your code launched, guided, and landed the LaunchCode rocket.

Angular helps us manage website content and manipulate the DOM through the use of directives. These simplify DOM changes by giving us alternatives to getElementById, addEventListener, innerHTML, etc.

There are three types of Angular directives:

  1. Components: These control how a set of data gets displayed within a template.

  2. Structural directives: These change the layout of the DOM by adding or removing elements (div, ul, a, li, etc.).

  3. Attribute directives: These change the appearance of a specific element within the DOM.

We learned how to generate and modify components in the last chapter. In this lesson, we will focus on how to use structural directives to enhance our work.

30.1.1. Open the Lesson 2 Folder

If you have not yet forked the Angular lessons repo, follow the directions given in lesson 1.

Open the angular-lc101-projects folder in VSCode and find lesson2 in the sidebar.

Access Angular lesson 2 in VSCode.

Open the terminal panel and navigate to the lesson2 folder. You should find subfolders for the examples and exercises used in this chapter. Also, completed code to some of the tasks is located in the solutions branch.

$ ls
   lesson1 lesson2 lesson3
$ cd lesson2
$ ls
   examples        exercises
$ git branch
   solutions
   * master