angular_sample_app

Angular Sample App

This directory contains a simple Angular app that helps users locate a college in the US or Canada on a map, with place info such as ratings, photos, and reviews displayed on the side.

The sample app demonstrates usage of Web Components from both the Maps JS SDK and the Extended Component Library.

To view the app from a local dev server, first clone this library from GitHub, then run the following command from the repository's root directory:

MAPS_API_KEY="[REPLACE_WITH_YOUR_API_KEY]" npm run example:angular_sample_app

Note that this command will build the library locally to incorporate its latest changes, including those not yet released on NPM.

Notes on using Web Components with Angular

This project was generated with Angular CLI version 16.0.2.

Then, Google Maps features were added by:

1. Installed the Extended Component Library via npm i @googlemaps/extended-component-library.
2. (TypeScript only) Installed the Google Maps typings with npm i --save-dev @types/google.maps, then opened tsconfig.app.json and added "google.maps" to compilerOptions.types.
3. (TypeScript only) Updated tsconfig.json with moduleResolution: "Node16".
4. (TypeScript only) Updated package.json with type: "module".
5. Added CUSTOM_ELEMENTS_SCHEMA to the schemas defined app.module.ts, telling Angular to be aware that Web Components are being used.
6. Imported Extended Component Library components at the top of app.component.ts.
7. Used Extended Component Library components, as HTML, in app.component.html.