- This app integrates Google's Material Design into an Angular app. It displays a series of coloured cards from a public API. The number of cards is limited to 10 using a splice function, but there are 500 of these cards available, all with titles, numbers etc.
- Note: to open web links in a new window use: ctrl+click on link
- Gary Simon tutorial (based on Angular 4) but the app.module.ts, app.component.ts and app.component.html required changes due to changes in Angular 7/8.
- HTTP request moved to its own service file.
- Materials modules begin with 'mat' and not 'md'; md has been deprecated.
- rxjs pipe - map - filter used to limit http response to 10 items using item id - max 5000 items available which takes a while to download.
- rxjs throwError method updated
- A jsonplaceholder API was used to provide dummy json data for the app.
.
.
- Angular v16
- RxJS Library v7 used to handle datastreams and propagation of change using observables.
- Angular Material v16.
- Install dependencies using
npm i - Run
ng servefor a dev server - Navigate to
http://localhost:4200/. The app will automatically reload if you change any of the source files
- service function to get profile data via http request
export class ProfileService {
constructor(private http: HttpClient) {}
getProfileData(): Observable<Profile> {
const profileUrl = "https://jsonplaceholder.typicode.com/photos";
return this.http.get<Profile>(profileUrl).pipe(
map((data: Profile) => data),
catchError((err) => {
return throwError(
"Problem fetching profile data from API, error: ",
err
);
})
);
}
}- Angular Material cards used to show API data.
- Status: Working.
- To-Do: Nothing.
- Gary Simon tutorial on Youtube - no longer available
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email:
gomezbateman@yahoo.com