{"id":21696332,"url":"https://github.com/dinanathsj29/angular-peopleapp-demo-tutorial","last_synced_at":"2026-03-11T09:31:16.016Z","repository":{"id":38742837,"uuid":"193237130","full_name":"dinanathsj29/angular-peopleApp-demo-tutorial","owner":"dinanathsj29","description":"Learn to create an Angular app with Angular CLI which includes many core building blocks of Angular like multiple Components, Services, Routing and HTTP Services, CSS Animations etc. This Angular app will fetch data from a free 3rd party mock API service and display it Angular Material UI.","archived":false,"fork":false,"pushed_at":"2023-01-05T03:09:39.000Z","size":3232,"stargazers_count":3,"open_issues_count":10,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T12:08:56.456Z","etag":null,"topics":["angular","angular-animations","angular-cli","angular-components","angular-http-service","angular-material","angular-routing","angular-services","css-animation-effects","http-httpclient"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dinanathsj29.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-22T13:30:01.000Z","updated_at":"2022-01-22T17:53:00.000Z","dependencies_parsed_at":"2022-08-25T01:30:38.920Z","dependency_job_id":null,"html_url":"https://github.com/dinanathsj29/angular-peopleApp-demo-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dinanathsj29/angular-peopleApp-demo-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-peopleApp-demo-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-peopleApp-demo-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-peopleApp-demo-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-peopleApp-demo-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinanathsj29","download_url":"https://codeload.github.com/dinanathsj29/angular-peopleApp-demo-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-peopleApp-demo-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30377272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T06:09:32.197Z","status":"ssl_error","status_checked_at":"2026-03-11T06:09:17.086Z","response_time":84,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-animations","angular-cli","angular-components","angular-http-service","angular-material","angular-routing","angular-services","css-animation-effects","http-httpclient"],"created_at":"2024-11-25T19:19:29.811Z","updated_at":"2026-03-11T09:31:15.493Z","avatar_url":"https://github.com/dinanathsj29.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"_images-angular-peopleApp/angular-logo-1.png\" alt=\"angular logo\" title=\"angular logo\" width=\"200\" /\u003e\n\u003c/p\u003e\n\nCreating and working with Angular application - Routing, Services, HTTP (mock data)\n=====================\nLet's create/build below Angular Single Page Application (SPA) which uses/includes/explore many core building blocks Angular features like: multiple Components, Services, Routing and Navigation, HTTP Services, CSS Animations, etc. This Angular app will fetch data from a free 3rd party mock API service and display it Angular Material UI.\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-peopleApp/_1-peopleapp-user-list.png\" alt=\"Image - Output - Angular Single Page Application (SPA) with Routing and Navigation - Home View (User List)\" title=\"Image - Output - Angular Single Page Application (SPA) with Routing and Navigation - Home View (User List)\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Home View (User List)\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-peopleApp/_2-peopleapp-user-details.png\" alt=\"Image - Output - Angular Single Page Application (SPA) with Routing and Navigation - (User Details)\" title=\"Image - Output - Angular Single Page Application (SPA) with Routing and Navigation - (User Details)\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - Angular Single Page Application (SPA) with Routing Navigation - (User Details)\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-peopleApp/_3-peopleapp-posts.png\" alt=\"Image - Output - Angular Single Page Application (SPA) with Routing and Navigation - Posts\" title=\"Image - Output - Angular Single Page Application (SPA) with Routing and Navigation - Posts\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Posts\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\nWorking with existing/cloned/copied Angular App\n---------------------\n- Clone or Download the project/app from Github or any other sources\n- If using Visual Studio Code / Insiders, open Command panel/terminal from menu: View -\u003e Terminal (shortcut key is `CTRL + BackTick` OR `COMMAND + J`)\n- Go inside the project/app directory, command: `cd _examples-angular-peopleapp OR cd appName`\n- Run command: `npm install` to install project/app dependencies `(node_modules)`\n- To Build and run Angular App, command: `ng serve / npm start` OR `ng serve -o` OR `ng serve --open`\n- To change the port from 4200 to other port - type command:  `ng serve --port 5000`\n- To check the application in browser type path/URL: `localhost:4200 / 5000`\n\n01 Getting Started\n=====================\n1.1. Pre-requisites:\n---------------------\nBasic familiarity with HTML, CSS and JavaScript, Angular 2/4/5/6 is must.\n\n- HTML          - Markup\n- CSS           - Style, Formates\n- JavaScript    - Behaviour, Click, Validations\n- TypeScript basics - Advanced JS features (Class, Arrow Function, Spread Operator)\n- Text Editor / Visual Text Editors\n\n1.2. Setup the Angular development environment:    \n---------------------\nIn this section, we will learn how to set up a local development environment to start developing Angular apps. \n\n- `Node`, (website: https://nodejs.org/en) \n- `NPM`, (Node Package Manager - comes inbuilt with Node)\n- `Angular CLI = Command Line Interface`, Angular CLI (Command Line Interface) for angular (website:  https://cli.angular.io/), \n    - The quickest and easiest way of starting an Angular app is through the `Angular CLI (Command Line Interface)`. It allows/helps the developer to build/generate building blocks of angular application like component, services, routings, modules, etc. with best practices quicker and easier)\n- `Text Editor`\n    - Visual Studio Code / Visual Studio Code Insiders (website: https://code.visualstudio.com)\n    - Sublime Text, \n    - Atom, \n    - Brackets etc.\n\n1.3. Steps to Setup the Angular development environment:\n---------------------\n1. Download and Install node (node comes with npm) (website: https://nodejs.org/en)\n2. After installation check version of node and npm by command: `node -v` / `node --version` OR `npm -v` / `npm --version`\n3. Install Angular CLI (website https://cli.angular.io/) by using the command: `npm install -g @angular/cli` (it will install Angular CLI globally)\n4. After installation check version of angular CLI by using the command: `ng -v` OR `ng --version`, you can also verify angular CLI installation by command: `ng` OR `ng --help`\n5. Create a new app with angular CLI by using syntax command: `ng new project/appName` example: command: `ng new angular-peopleApp` \n    - **command: `ng new angular-peopleApp --style=scss --routing` will create Angular app with `.scss` (no css) and `routing module app-routing.module.ts` files**\n6. Go inside the project/app directory, command: `cd angular-peoplesApp`\n7. Build and run Angular App, command: `ng serve` OR `ng serve -o` OR `ng serve --open`\n    - To change the port from 4200 to other port - type command:  `ng serve --port 5000 --open`\n8. Go to the browser and launch/check Angular App by entering the web address: `localhost:4200 / 5000`\n\n1.4. Angular project/application structure-architecture summary:\n---------------------\n- `Angular app`: (Show graphical representation of `src -\u003e app -\u003e components` folder)\n    - Angular apps are modular in nature \n    - Consists of one or more modules (Angular App is a collection of one or many modules)\n    - Modules are main feature area - User module, Admin module, Dashboard module, Employee module)\n    - `Angular Application Root Module is AppModule (app.module.ts) ` \n    - `Modules` are lines of code which can be IMPORTed or EXPORTed\n        - Module consists of one or more Components and Services \n        - `Components` - .HTML Template + .ts Class + .CSS \n            - A component represents/controls view in the browser\n            - (example: header, footer, sidebar, common panels, common search utility, similar feature components used throughout the application)\n            - `Angular Application Root (bootstrapped) component is AppComponent (app.comoponent.ts)`\n        - `Services` - Class which consists of Business logic (common programming feature used throughout the application)\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-peopleApp/1.4-angular-application-architecture.png\" alt=\"Angular Application Folder structure-Architecture\" title=\"Angular Application Folder structure-Architecture\" width=\"500\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Angular Application Folder structure-Architecture\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\nModules interact and ultimately render Components+Services view in the browser.\n\n1.5. Angular project/application File / Folder structure-Architecture summary:\n---------------------\n- `package.json`: consists of Node/NPM library/package/module dependencies for application development\n- `node_modues` - folder consists of all installed packages\n- `src/main.ts` - entry point to angular application. src/index.html\n- `app/app.module.ts` - route module of application\n- `app/app.component.ts` - route component of application\n- `app-routing.module.ts` - consits of RoutingModule/Routes for application - required path and components details\n- **`ng serve / npm start` -\u003e Initialization proeces: main.ts (index.html) -\u003e app.module.ts -\u003e app.component.ts -\u003e (app.component.html + css)**\n\n1.6. Angular Module (app.module.ts)\n---------------------\n\n\u003e **Syntax \u0026 Example**: app.module.ts\n```ts\n// modules\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { AppRoutingModule } from './app-routing.module';\n\n// components\nimport { AppComponent } from './app.component';\nimport { SidebarComponent } from './component/sidebar/sidebar.component';\nimport { PostsComponent } from './component/posts/posts.component';\nimport { UsersComponent } from './component/users/users.component';\nimport { DetailsComponent } from './component/details/details.component';\n\n// services\nimport { HttpClientModule } from '@angular/common/http';\nimport { PagenotfoundComponent } from './component/pagenotfound/pagenotfound.component'; \nimport { DataService } from './services/data.service';\n\n@NgModule({\n  declarations: [\n    // components\n    AppComponent,\n    SidebarComponent,\n    PostsComponent,\n    UsersComponent,\n    DetailsComponent,\n    PagenotfoundComponent\n  ],\n  imports: [ \n    // modules\n    BrowserModule,\n    AppRoutingModule,\n    HttpClientModule,\n    BrowserAnimationsModule\n  ],\n  // services must be included here\n  providers: [ DataService],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nAs and when we use Angular CLI to generate components and services, it will automatically update app.module.ts file to import and add them to the `@NgModule decorator`. `Components are added to the declarations array`, and `services are added as providers`. You will also find yourself adding various imports to the imports array. For instance, when we want to add animations, HTTP, routes, routers we will add them here. In the absence of Angular CLI, we may need to all entries carefully and manually in app.module.ts.\n\n1.7. Dealing with Angular Components (creating components)\n---------------------\n- The core/key idea behind Angular is to build application using `reusable parts/chunks i.e. components`\n- Components are main building blocks of UI and an/any angular application\n- `Angular Application Root (bootstrapped) component is AppComponent (app.comoponent.ts)`\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-peopleApp/1.7-angular-components.png\" alt=\"Angular Components\" title=\"Angular Components\" width=\"500\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Angular Components\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\nA component is self contained, reusable piece of UI made up of 3 important parts:\n1. `Template` - `View, HTML code` (User Interface for application also known as view)\n2. `Class` - `Business logic/Application logic` for the view, `TypeScript/JavaScript code`, (Data, Methods \u0026 properties)\n3. `Decorator/Metadata` - `Metadata, a @function` which provide more information for angular class. example: app.component.ts: \n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\n@Component({\n    selector: 'app-root', // selector - a custom html tag\n    templateUrl: './app.component.html', // template/templateUrl - html view,\n    styleUrls: ['./app.component.css'] // styleUrls - css style sheet\n})\n```\n\n1.8. Creating component\n---------------------\n- We can create component manually, but in that scenario, we need to do and follow various steps/manual entries\n- It's advisable to use angular CLI to create a component, services, routing, etc. \n- `To create a component using angular CLI`:\n    - command: `ng generate component componentName` OR `ng g c componentName`\n    - **`It generates 4 new files: .css-styles, .html-markup, .spec.ts-test, .ts-class`**\n    - Also, an automated `import` /update/entry of components is done in `app.module.ts` file at the top `imports section` and in `declarations array` which consists of all the components used in the application\n    - A component must be a member of/belongs to an `@NgModule - declarations array` in order for it to be usable by another component or application\n- Let us create some required component for our current app:\n    - ng generate component sidebar \u003cbr/\u003e\n    - ng g c posts \u003cbr/\u003e\n    - ng g c users \u003cbr/\u003e\n    - ng g c details \u003cbr/\u003e\n\n1.9. Using component in the application\n---------------------\n- To use any component in the application, we need to copy and paste new components `'selector'` from respective .ts file i.e. `'app-sidebar'` as a tag in `app.component.html`\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003cdiv id=\"container\"\u003e\n  \u003capp-sidebar\u003e\u003c/app-sidebar\u003e\n\n  \u003cdiv id=\"content\"\u003e\n    \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n  \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\n- Here `\u003capp-sidebar\u003e\u003c/app-sidebar\u003e` is selector of newly created sidebar component from `sidebar.component.ts` file\n- **router-outlet**\n    - The directive `(\u003crouter-outlet\u003e)` that marks where the router displays a view (a container to hold different views/components loaded as users perform application tasks/actions). `(\u003crouter-outlet\u003e)` is used to load different pages/components when the user clicks on different links or buttons.\n\n1.10. index.html\n---------------------\n- In our current application we will use `Angular Material Icon` and `Google Fonts`, so lets first import/link them under `\u003chead\u003e` section of index.html\n\n\u003e **Syntax \u0026 Example**: \n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003ctitle\u003eAngularPeopleApp\u003c/title\u003e\n  \u003cbase href=\"/\"\u003e\n\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n  \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\"\u003e\n\n  \u003c!-- material icon --\u003e\n  \u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n\n  \u003c!-- google fonts --\u003e\n  \u003clink href=\"https://fonts.googleapis.com/css?family=Montserrat:300,700\" rel=\"stylesheet\"\u003e\n\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003capp-root\u003e\u003c/app-root\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n- Learn more about [Angular Material Icon - https://material.io/tools/icons/?style=baseline](https://material.io/tools/icons/?style=baseline) and [Google Fonts - https://fonts.google.com/](https://fonts.google.com/)\n\n1.11. Sidebar component (sidebar.component.html)\n---------------------\n- **routerLink**\n    - The attribute/directive for binding a clickable HTML element `(instead of html \u003ca\u003e anchor href will use routerLink)` to a route which denotes link/view name to load/show in `(\u003crouter-outlet\u003e)`\n\n\u003e **Syntax \u0026 Example**: sidebar.component.html\n```html\n\u003cnav\u003e\n  \u003cul\u003e\n    \u003cli\u003e\n      \u003c!-- --\u003e\n      \u003c!-- \u003ca routerLink=\"\" [class.activated]=\"currentUrl == '/'\"\u003e\n        \u003ci class=\"material-icons\"\u003esupervised_user_circle\u003c/i\u003e\n      \u003c/a\u003e --\u003e\n\n      \u003ca alt=\"User\" title=\"User\" routerLink=\"\" routerLinkActive=\"activated\" [routerLinkActiveOptions]=\"{exact: true}\"\u003e \n        \u003ci class=\"material-icons\"\u003esupervised_user_circle\u003c/i\u003e\n      \u003c/a\u003e\n\n      \u003ca alt=\"Post\" title=\"Post\" routerLink=\"posts\" routerLinkActive=\"activated\" [routerLinkActiveOptions]=\"{exact: true}\"\u003e\n        \u003ci class=\"material-icons\"\u003emessage\u003c/i\u003e\n      \u003c/a\u003e\n    \u003c/li\u003e\n\n    \u003c!-- \u003cli\u003e\n      \u003ca routerLink=\"posts\" [class.activated]=\"currentUrl == '/posts'\"\u003e\n        \u003ci class=\"material-icons\"\u003emessage\u003c/i\u003e\n      \u003c/a\u003e\n    \u003c/li\u003e --\u003e\n\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n1.12. Angular with SCSS/CSS\n---------------------\n- CSS is used to make the application look better and beautiful, in the current project will use the power of `scss/sass` to change look-feel, also make application slick and intuitive\n\nstyles.scss\n---------------------\n\u003e **Syntax \u0026 Example**: styles.scss\n```scss\n/* You can add global styles to this file, and also import other style files */\n/* You can add global styles to this file, and also import other style files */\n\n// $main-color:#e91e63;\n\nbody {\n  margin: 0;\n  background: #F2F2F2;\n  font-family: 'Montserrat', sans-serif;\n  height: 100vh;\n  color: #2D2E2E;\n}\n\n#container {\n  display: grid;\n  grid-template-columns: 70px auto;\n  height: 100%;\n\n    #content {\n        padding: 30px 50px;\n\n        ul {\n            list-style-type: none;\n            margin:0;\n            padding:0;\n        \n            li {\n                background: #fff;\n                border-radius: 10px;\n                padding: 10px;\n                margin-bottom: 10px;\n        \n                a {\n                    font-size: 1.5em;\n                    text-decoration: none;\n                    font-weight: bold;\n                    color:#e91e63; //#00A8FF;\n                }\n        \n                ul {\n                    margin-top: 20px;\n                    \n                    li {\n                        padding:0;\n                        background:none;\n        \n                        a {\n                            font-size: 1em;\n                            font-weight: 300;\n                            text-decoration: underline;\n                        }\n                    }\n                }\n            }\n        }\n    }\n}\n```\n\nsidebar.component.scss\n---------------------\n\n\u003e **Syntax \u0026 Example**: sidebar.component.scss\n```scss\nnav {\n    background: #2D2E2E;\n    height: 100%;\n\n    ul {\n        list-style-type: none;\n        padding: 0;\n        margin: 0;\n\n        li {\n\n            a {\n                color: #e91e63; //#fff;\n                padding: 20px;\n                display: block;\n            }\n\n            .activated {\n                background-color: #e91e63;\n                color: #fff;\n            }\n        }\n    }\n}\n```\n\n1.13. Angular Routing and Navigation\n---------------------\n- In sidebar component we have used 2 icons for User \u0026 Posts respectively also `routerLink=\"posts\"`, let's work with routes/paths in `/src/app/app-routing.module.ts`\n\n\u003e **Syntax \u0026 Example**: app-routing.module.ts\n```ts\nimport { NgModule } from '@angular/core';\nimport { Routes, RouterModule } from '@angular/router';\nimport { UsersComponent } from './component/users/users.component';\nimport { DetailsComponent } from './component/details/details.component';\nimport { PostsComponent } from './component/posts/posts.component';\nimport { PagenotfoundComponent } from './component/pagenotfound/pagenotfound.component';\n\nconst routes: Routes = [\n  {\n    path: '',\n    component: UsersComponent\n  },\n  {\n    path: 'users',\n    component: UsersComponent\n  },\n  {\n    path: 'details/:id',\n    component: DetailsComponent\n  },\n  {\n    path: 'posts',\n    component: PostsComponent\n  },\n  {\n    path: 'details',\n    component: PagenotfoundComponent\n  },\n  {\n    path: 'user',\n    component: PagenotfoundComponent\n  },\n  {\n    path: 'post',\n    component: PagenotfoundComponent\n  },\n  {\n    path: '**',\n    component: PagenotfoundComponent\n  },\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n```\n\n- I hope you remember that `app-routing.module.ts` contains all component path details user need to visit/navigate on some clicks or action. Here in `const routes: Routes = [ ]` array we have created/entered different object with `path` and `component` property which user will navigate\n\n1.14. Angular Services and HTTPClient - Fetching Data from API\n---------------------\n- Service is a class with a specific purpose and widely used to:\n    - Share data - Between multiple pages/components\n    - Implement application logic - Calculations, Repetitive tasks/functionalities, etc.\n    - External Interaction - Database connectivity\n- Services are a great and awesome way to share information among multiple classes/components, just create a service and inject it in respective classes/components\n\u0026nbsp;\n\u0026nbsp;\n- In current application to show Users List in UsersComponent, Posts in PostsComponent we want to fetch a list of users from a 3rd party free public API - `https://jsonplaceholder.typicode.com/users`\n- Let's create a service with Angular CLI command: `ng generate service data` OR `ng g s data`\n- Http \u0026 HttpClientModule: Till Angular 4 - Http module used, In `Angular 5 - HttpClientModule used (HttpClientModule provides simplified APIs to work with HTTP functionality)`\n\n\u003e **Syntax \u0026 Example**: defualt/generic service ts file\n```ts\nimport { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class DataService {\n\n  constructor() { }\n}\n```\n\n\u003e **Syntax \u0026 Example**: data.service.ts\n```ts\nimport { Injectable } from '@angular/core';\n// httpClient\nimport { HttpClient } from '@angular/common/http';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class DataService {\n  //public api url path to get user data\n  private urlUsersData = 'https://jsonplaceholder.typicode.com/users';\n  private urlUserData = 'https://jsonplaceholder.typicode.com/users/';\n  private urlPostsData = 'https://jsonplaceholder.typicode.com/posts';\n\n  //create an instance of it through dependency injection within the constructor\n  constructor(private httpClient: HttpClient) { }\n\n  //get users data from public api \n  getUsersData() {\n    // default returns of get/post \u0026 other rest api method is 'OBSERVABLEs'\n    // return this.httpClient.get(this.urlUsersData);\n\n    // return PROMISE with .toPROMISE() method\n    return this.httpClient.get(this.urlUsersData).toPromise();\n  }\n\n  //get single user data from public api \n  getUserData(_userId) {\n    // default returns of get/post \u0026 other rest api method is 'OBSERVABLEs'\n    // return this.httpClient.get(this.urlUserData+_userId);\n\n    // return PROMISE with .toPROMISE() method\n    return this.httpClient.get(this.urlUserData+_userId).toPromise();\n  }\n\n  //get posts data from public api \n  getPostsData() {\n    // default returns of get/post \u0026 other rest api method is 'OBSERVABLEs'\n    // return this.httpClient.get(this.urlPostsData);\n\n    // return PROMISE with .toPROMISE() method\n    return this.httpClient.get(this.urlPostsData).toPromise();\n  }\n\n}\n```\n\n- To get response/results data structure details, please check the local file: `_api_readme_result.txt`,  in this file API result pasted for reference purpose\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-peopleApp/1.14.1-jsonplaceholder-Fake-Online-REST-API.png\" alt=\"Image - Output - jsonplaceholder Fake Online REST API.png\" title=\"Image - Output - jsonplaceholder Fake Online REST API.png\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - jsonplaceholder Fake Online REST API.png\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-peopleApp/1.14.2-jsonplaceholder-users-data.png\" alt=\"Image - Output - jsonplaceholder Users\" title=\"Image - Output - jsonplaceholder Users\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - jsonplaceholder Users\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images-angular-peopleApp/1.14.3-jsonplaceholder-posts-data.png\" alt=\"Image - Output - jsonplaceholder Posts\" title=\"Image - Output - jsonplaceholder Posts\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - jsonplaceholder Posts\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n1.15. User component \n---------------------\n- Import `data service` in each and every component which needs to fetch/show data and subscribe in respective method\n\n\u003e **Syntax \u0026 Example**: users.component.ts\n```ts\nimport { Component, OnInit } from '@angular/core';\nimport { Observable } from 'rxjs';\n\n// import common services\nimport { DataService } from '../../services/data.service';\n\n@Component({\n  selector: 'app-users',\n  templateUrl: './users.component.html',\n  styleUrls: ['./users.component.scss'],\n})\n\nexport class UsersComponent implements OnInit {\n\n  // to hold users data coming from public API\n  usersData$: Object;\n\n  constructor(private _dataService:DataService) { }\n\n  ngOnInit() {\n\n    /* // subscribe\n    this._dataService.getUsersData().subscribe(\n      (_result) =\u003e {\n        console.log('success block - users - _result : ' , _result);\n        this.usersData$ = _result;\n        console.log('usersData$ : ' , this.usersData$);\n      },\n      (_error) =\u003e {\n        console.log('error block - users - : ' , _error);\n      },\n      () =\u003e {\n        console.log('after complition block users');\n      }\n    ) // subscribe\n    */\n    \n    // promise\n    this._dataService.getUsersData().then(\n      (_result) =\u003e {\n        if(_result == null){\n          console.log('user success block - BUT NO DATA : ' , _result);\n        } else {\n          console.log('users success block - users - _result : ' , _result);\n          this.usersData$ = _result;\n          console.log('usersData$ : ' , this.usersData$);\n        } // else\n      })\n      .catch(function(error){\n        console.log('users error in Promise is : ', error);\n      })\n\n  } // ngOnInit\n  \n} // UsersComponent\n\n```\n\n\u003e **Syntax \u0026 Example**: users.component.html\n- Use `*ngFor` directive to loop over `usersData$` list Object\n\n```html\n\u003ch1\u003eUsers List:\u003c/h1\u003e\n\n\u003cul\u003e\n  \u003cli *ngFor=\"let user of usersData$\"\u003e\n    \u003ca routerLink=\"/details/{{user.id}}\" title=\"{{ user.name }} | Click to get more Details\"\u003e {{ user.name }}\u003c/a\u003e\n\n    \u003cul\u003e\n      \u003cli\u003e{{ user.email }}\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"http://{{ user.website }}\"\u003e{{ user.website }}\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n1.16. Angular Animation\n---------------------\n- To access/use the animation library in an angular application, we need to first install it from the console with command: `npm install @angular/animations@latest --save`\n- `app.module.ts` - import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; imports: [ \n    // modules\n    BrowserModule,\n    AppRoutingModule,\n    HttpClientModule,\n    BrowserAnimationsModule\n  ],\n- In respective compoents which needs to use/show animation, let's import: `import { trigger,style,transition,animate,keyframes,query,stagger } from '@angular/animations';`\n- To make this animation work, in users.component.html file reference the animation trigger: `\u003cul [@usersListStagger]=\"usersData$\"\u003e`\n\n\u003e **Syntax \u0026 Example**: users.component.ts\n```ts\nimport { Component, OnInit } from '@angular/core';\nimport { Observable } from 'rxjs';\n// import animation functions\nimport { trigger,style,transition,animate,keyframes,query,stagger } from '@angular/animations';\n\n// import common services\nimport { DataService } from '../../services/data.service';\n\n@Component({\n  selector: 'app-users',\n  templateUrl: './users.component.html',\n  styleUrls: ['./users.component.scss'],\n  // Add animations properties here:\n  animations: [\n    trigger('usersListStagger', [\n      transition('* \u003c=\u003e *', [\n        query(\n          ':enter',\n          [\n            style({ opacity: 0, transform: 'translateY(-50px) translateX(-50px)' }),\n            stagger(\n              '550ms',\n              animate(\n                '100ms ease-out',\n                style({ opacity: 1, transform: 'translateY(0px)' })\n              )\n            )\n          ],\n          { optional: true }\n        ),\n        query(':leave', animate('50ms', style({ opacity: 0 })), {\n          optional: true\n        })\n      ])\n    ])\n  ]\n})\n\nexport class UsersComponent implements OnInit {\n\n  // to hold users data coming from public API\n  usersData$: Object;\n\n  constructor(private _dataService:DataService) { }\n\n  ngOnInit() {\n\n    /* // subscribe\n    this._dataService.getUsersData().subscribe(\n      (_result) =\u003e {\n        console.log('success block - users - _result : ' , _result);\n        this.usersData$ = _result;\n        console.log('usersData$ : ' , this.usersData$);\n      },\n      (_error) =\u003e {\n        console.log('error block - users - : ' , _error);\n      },\n      () =\u003e {\n        console.log('after complition block users');\n      }\n    ) // subscribe\n    */\n    \n    // promise\n    this._dataService.getUsersData().then(\n      (_result) =\u003e {\n        if(_result == null){\n          console.log('user success block - BUT NO DATA : ' , _result);\n        } else {\n          console.log('users success block - users - _result : ' , _result);\n          this.usersData$ = _result;\n          console.log('usersData$ : ' , this.usersData$);\n        } // else\n      })\n      .catch(function(error){\n        console.log('users error in Promise is : ', error);\n      })\n\n  } // ngOnInit\n  \n} // UsersComponent\n```\n\n\u003e **Syntax \u0026 Example**: users.component.html\n```html\n\u003ch1\u003eUsers List:\u003c/h1\u003e\n\n\u003cul [@usersListStagger]=\"usersData$\"\u003e\n  \u003cli *ngFor=\"let user of usersData$\"\u003e\n    \u003ca routerLink=\"/details/{{user.id}}\" title=\"{{ user.name }} | Click to get more Details\"\u003e {{ user.name }}\u003c/a\u003e\n\n    \u003cul\u003e\n      \u003cli\u003e{{ user.email }}\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"http://{{ user.website }}\"\u003e{{ user.website }}\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fangular-peopleapp-demo-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinanathsj29%2Fangular-peopleapp-demo-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fangular-peopleapp-demo-tutorial/lists"}