- NodeJs version 8+
- Angular CLI version 6+
Install all the dependencies of the project
npm install
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
The code contains many branches to help building the project step by step
-
list of all branches
git branch -
change to a specific branch: the readme of each branch details briefly what has changed
git checkout < name-of-branch >
Generate the layout
ng generate @angular/material:material-table --name app-layout
Install AGM
npm install @agm/core --save
Import the module in the app.module.ts file
The template variable #infowindow allows to close the previous infowindow.
More on template variable
Using angular ReactiveFormsModule to control dynamically the form (we react
to input event).
new FormControl() create a directive that allows to manage a FormControl instance directly inside the template (the
input is bound to `search' inside the component via what is called an input binding).
generate a service
ng g s app
The above is a shorthand for ng generate service app
The list of markers is fetched from the service
Use of a BehaviorSubject in the service so as to have a Subject with an initial value.
Subject are both Observable and Observer.
They have the advantage of being an Observable to stream data, but can also invoke the next() method in order to change that
stream at some point in time.
It uses the event binding to pass data
from child layout.component to parent app.component.
Also, @ViewChildren allows the parent
app.component to get access to the children AgmMarker making possible to call children methods from the parent.
As part of the FEND nanodegree, this project aims at helping to get start with Angular by doing an Angular version of the 8th project (interacting with google map in React).
Pull requests by Udacians will be welcomed because it is always #betterTogether