CLI: Add addon-interactions to angular template

[yannbf]

Issue: #16722

What I did

• Added E2E test for addon-interactions
• Changed the Header and Page components and made the Page component stateful
• Added addon-interactions example to the angular template:

angular-changes.mov

A small thing I did not solve although I'd love to is this:

☝️ the buttons in the header don't have a space between them (it was already like that before). The reason for that is because we use a common css which has the following rule:

button + button {
  margin-left: 10px;
}

however in angular, the button elements are wrapped in a storybook-button element from angular, so the css rule will never be applied:

A solution would be to just add a margin-left css class to the buttons, this way it would work regardless of framework. This means making a small change but in every framework template, which I could do in another PR if y'all agree with the change!

How to test

• Checkout the branch

• yarn build cli

• run the cli lib/cli/bin/index.js repro --framework angular

• Is this testable with Jest or Chromatic screenshots?

• Does this need a new example in the kitchen sink apps?

• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

☁️ Nx Cloud Report

CI ran the following commands for commit 095fef7. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[yannbf]

This was part of the template for quite some time 🙈

[shilman]

LGTM!