Angular template

[LagaceM]

Summary | Résumé

This PR add a starter template for Angular. The template include the same pages as the vue one. The Top Nav doesnt show the currently active page (routerLinkActive doesnt work on gcds-links).

Screenshot:

Test instructions | Instructions pour tester la modification

Go to starter-apps/angular/angular-template and run npm run start to start the dev server. Then go to http://localhost:4200

[LagaceM]

Two questions:

1. Right now all links require both routerLink and href to work correctly is that the intended behavior ?
2. How much unit testing is required for the template ? Currently it only includes the default one generated by the cli

[daine]

Thanks for this draft PR @LagaceM !
I've tested the code and it's exciting to see it come to life. I clicked around and even filled out the report a bug sample form 😄

1. Right now all links require both routerLink and href to work correctly is that the intended behavior ?

Yes, and unfortunately I believe it's because the <gcds-link> component requires the href property. But if you use it in another component that doesn't require href, you can simply use routerLink, or gcdsRouterLink like the example in the readme

2. How much unit testing is required for the template ? Currently it only includes the default one generated by the cli

For a starter template, it would be great to have all the basic tests, usually it means all components. The idea is that when someone builds upon this work, they will require less code to setup the tests.

When you're ready, one cool thing to have too is a directory structure to see the files and their descriptions (like in Vue).

Thanks again!

[LagaceM]

Hello, @daine
I updated the PR with new tests (unit and e2e) that matches the vue-starter. I also updated to Angular 20 and renamed the files and classes to match the new Angular style guide (v20+).

Sorry the delay on completing the starter app, i think we all had a crazy last 6 months.

[daine]

Thanks for updating this @LagaceM! I had a few extra mins today to do a short review and found a few things to improve. I'll do another review next week as well, I haven't reviewed the tests and the structure yet 😄

[daine]

I noticed we're not using a router, any reason why? Typically a raw relative string path isn't the best idea, so ideally we'd either put a router link here (with routing setup), or at the minimum, use an absolute path like /about/topic

[LagaceM]

The app is using a router. It's inside the root / app component.

<!-- app.html -->
<app-header />
<gcds-container size="xl" tag="main" [centered]="true" [mainContainer]="true">
  <router-outlet></router-outlet> // The router outlet is here
</gcds-container>
<gcds-footer display="full"></gcds-footer>

I can use absolute path if you prefer. I'm just use to organize apps in "features" and using relative path in feature allow you to move it around and not having to modify all the path.

[daine]

I'm not sure if there's a separate angular specific property called inputId, but to set the ID in the gcds-input component for angular it's:

Suggested change

	inputId="version"
	input-id="version"

[LagaceM]

I doubled check and "input-id" is getting compiled to "inputId" by stencil

[daine]

And for textarea, it's this:

Suggested change

	inputId="currentBehavior"
	textarea-id="currentBehavior"

[LagaceM]

See comment on "input-id"