{"id":21696328,"url":"https://github.com/dinanathsj29/angular7-step-by-step-tutorial","last_synced_at":"2025-04-12T12:07:36.663Z","repository":{"id":38749523,"uuid":"185736320","full_name":"dinanathsj29/angular7-step-by-step-tutorial","owner":"dinanathsj29","description":"A beginners to advanced, building block-step by step guide to Google Angular. We will learn basic to pro Angular latest concepts like component, interpolation, SPA, data binding, Directives, ngFor, ngIf, Service, Pipes, Dependency Injection (DI), HTTP and Observables, Routing etc.","archived":false,"fork":false,"pushed_at":"2023-01-05T02:53:59.000Z","size":12226,"stargazers_count":7,"open_issues_count":10,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T06:51:07.082Z","etag":null,"topics":["angular7","class-binding","data-binding","dependency-injection","directives","event-binding","http","httpclient","interpolation","ngclick","ngfor","ngform","ngif","observable","pipe-and-filter","routing","services","single-page-applications","style-binding","two-way-databinding"],"latest_commit_sha":null,"homepage":"","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-05-09T06:04:54.000Z","updated_at":"2024-02-19T07:25:01.000Z","dependencies_parsed_at":"2022-08-24T07:10:29.283Z","dependency_job_id":null,"html_url":"https://github.com/dinanathsj29/angular7-step-by-step-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular7-step-by-step-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular7-step-by-step-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular7-step-by-step-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular7-step-by-step-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinanathsj29","download_url":"https://codeload.github.com/dinanathsj29/angular7-step-by-step-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248565061,"owners_count":21125416,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular7","class-binding","data-binding","dependency-injection","directives","event-binding","http","httpclient","interpolation","ngclick","ngfor","ngform","ngif","observable","pipe-and-filter","routing","services","single-page-applications","style-binding","two-way-databinding"],"created_at":"2024-11-25T19:19:29.692Z","updated_at":"2025-04-12T12:07:36.640Z","avatar_url":"https://github.com/dinanathsj29.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"_images_angular7/angular_logo_1.png\" alt=\"angular logo\" title=\"angular logo\" width=\"200\" /\u003e\n\u003c/p\u003e\n\nAngular 2/4/5/6/7\n=====================\nWelcome\n---------------------\nHi All, I'm **`Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional`**, I wanna welcome you to `Angular7 step by step guide`. In this course/tutorial will go over and learn all the fundamental building blocks of Angular, which a developer needs to know to get started developing Angular applications. Will cover from Node/NPM/Angular CLI Setup, Angular basic+advanced and common concepts like Components, Interpolation, Data Binding, Pipes, Services, Directives, Routing and Nativation, Forms, Http and Observables, etc.\n\nWho is this for? \n---------------------\nThis course is for anyone and everyone, Almost everyone! Fresher/Newcomer as well as experienced UI/frontend/Web Developers who are interested in boost skills and further career - by learning new latest dynamic JavaScript framework from Google to become a hi-tech developer.\n\nTopics include\n===================== \n1. [Angular7 Introduction](#01-angular7-introduction)\n2. [Getting Started](#02-getting-started)\n3. [Angular First Hello World App](#03-angular-first-hello-world-app)\n4. [Components](#04-components)\n5. [Interpolation (Data Binding)](#05-interpolation-data-binding)\n6. [Property Binding](#06-property-binding)\n7. [Class Binding](#07-class-binding)\n8. [Style Binding](#08-style-binding)\n9. [Event Binding](#09-event-binding)\n10. [Template Reference Variables](#10-template-reference-variables)\n11. [Two Way Data Binding](#11-two-way-data-binding)\n12. [ngIf Directive](#12-ngIf-directive)\n13. [ngSwitch Directive](#13-ngSwitch-directive)\n14. [ngFor Directive](#14-ngFor-directive)\n15. [Component Interaction](#15-component-interaction)\n16. [Pipes](#16-pipes)\n17. [Services](#17-services)\n18. [Dependency Injection (DI)](#18-dependency-injection-di)\n19. [Using a Service](#19-using-a-service)\n20. [HTTP and Observables](#20-http-and-observables)\n21. [Fetch Data Using HTTP and Observables](#21-fetch-data-using-http-and-observables)\n22. [Creating Custom Directives](#22-creating-custom-directives)\n23. [Custom Directives with Events and @HostListener](#23-custom-directives-with-events-and-HostListener)\n24. [Creating Custom Pipes](#24-creating-custom-pipes)\n\n01 Angular7 Introduction\n=====================\n1.1. What is Angular:\n---------------------\n- Angular is a JavaScript (TypeScript based) open-source front-end web application framework from Google\n- A framework to build a client-side application\n- Great for SPAs (Single Page Application)\n- Angular Ver2/4/5/6/7 frameworks target Mobile and Desktop\n- The very first version `Angular 1.0 (1.xx)` is known as `AngularJS`, versions beyond `2+ `are generally known as `Angular`\n\n1.2. SPA (Single Page Application)\n---------------------\nA SPA (Single Page Application) is a website/web applications in which part of page reload asynchronously without loading/re-loading whole page/app. It contains the menu, navigations, buttons, and blocks on a single page, as-and-when a user clicks on any of them; it dynamically rewrites/loads the current page rather than loading entire new pages from a server and so it is reactive, fast and speedy. (Web apps that load a single HTML page and dynamically update that page as the user interacts with the app).\n\n1.3. Why to learn and use Angular:\n---------------------\n- Modular approach\n- Re-usable code (Components)\n- Development quicker and easier (Many inbuilt features helps to do development quicker+easier)\n- Follows good programming practices and design patterns (MVC - Module View Controller)\n- Inbuilt validations \u0026 Routing capabilities)\n- Unit testable code\n- Easily maintainable code\n- Uses advanced features and principles like Dependency Injection, DRY (Do Not Repeat Yourself)\n- Google + Microsoft collaboration (Angular + TypeScript)\n\n1.4. Angular History:\n---------------------\n- The first version of Angular was Angular1.0 (AngularJS) which was released in 2010\n\n| Year                                      | Version                                   |\n| ------------------------------------------|-------------------------------------------|\n| **AngularJs**   =   year 2010     =     v1.XX (1.0 version)                           |\n| **Angular**     =   year 2016     =     Angular v2.0 and above (2/4/5/6/7 and coming future versions...)  |\n| 2010                                      | Angular JS (Angular v1.XX versions)       |\n| 2016                                      | Angular v2.0                              |\n| **Version v3.0 skipped to avoid routing version 3.3.0**                               |\n| 2016 December                             | Angular v4.0                              |\n| 2017 November                             | Angular v5.0                              |\n| 2018 April                                | Angular v6.0                              |\n| 2018 October                              | Angular v7.0                              |\n\n\u003ch2\u003e1.5. Difference between AngularJS and Angular\u003cbr/\u003e\nWhat’s new in Angular compared to AngularJS\u003c/h2\u003e\nLet’s focus through some of the main differences between AngularJS and Angular:\n\n| AngularJs                                 | Angular                                   |\n| ------------------------------------------|-------------------------------------------|\n|                                           | **Angular is a complete rewrite of AngularJS**  |\n| AngularJS is the name of the `first version of v1.XX (1.0 version)`.                  | Angular is the name of the Angular's `version beyond 2+ (Angular v2.0 and above i.e. 2/4/5/6/7 and coming future angular versions...)`                                                                   |\n| AngularJS is a `JavaScript` based open-source front-end web application framework.    | Angular is a `JavaScript/TypeScript/Dart` based open-source front-end web application framework.     |\n| AngularJS uses the concept of `scope($scope)` or `controller`.                        | Angular uses a hierarchy of `components` as its primary architectural base.                            |\n| AngularJS has a simple syntax and uses to work with different directives like `ng-app`, `ng-init`, `ng-model`, `ng-for` etc.                                                               | In Angular syntax have been changed as it uses `[ ]` for property binding, and `( )` for event binding. |\n\n1.6. Semantic Versioning System:\n---------------------\n- Change is nature's thumb rule, so every tool/technology/framework/library developed have to room for improvement\n- Google team decided and declared that Angular major version will be upgraded twice a year with `Semantic Versioning System`\n- **`Semantic Versioning System`** = `Major.Minor.Fix Patch, example: 0.0.1`\n    - `Fix Patch` - can increase any time with bug fixes/patch release\n    - `Minor version` - increases with every feature release which does not break any functionalities\n    - `Major version` - Break in the functionalities/ extraordinary feature achievements \n\n02 Getting Started\n=====================\n2.1. Pre-requisites:\n---------------------\nBasic familiarity with HTML, CSS and JavaScript 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\n2.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    - it allows 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\n2.3. Steps to Setup the Angular development environment:\n---------------------\n1. Download and Install node (node comes with npm) (website: https://nodejs.org/en)\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/2.3.1_nodejs.png\" alt=\"nodejs website\" title=\"nodejs website\" width=\"600\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Nodejs website - https://nodejs.org/en\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\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 command: `npm install -g @angular/cli` (it will install Angular CLI globally)\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/2.3.2_angular_cli.png\" alt=\"Angular CLI website\" title=\"Angular CLI website\" width=\"600\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Angular CLI website - https://cli.angular.io/\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\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: `ng new project/appName` example: command: `ng new angular6-1-demo`\n6. Go inside the project/app directory, command: `cd angular6-1-demo`\n7. Build and run Angular App, command: `ng serve` OR `ng serve -o` OR `ng serve --open`\n8. Go to the browser and launch/check Angular App by entering the web address: `localhost:4200`\n\n2.4. Commonly / widely used node/npm commands:\n---------------------\n- to get Node version, type command: `node -v`  OR `node --version`\n- to get NPM version, type command: `npm -v`  OR `npm --version`\n- to install Angular CLI, type command: `npm install -g @angular/cli`\n- to get angular CLI version, type command: `ng -v` OR `ng --version` (this command displays details of a node, npm, and other angular package versions)\n- to get various angular CLI commands, type command: `ng` OR `ng --help` \n\n03 Angular First Hello World App\n=====================\n3.1. Creating new Angular App\n---------------------\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- To create a new app with angular CLI by using syntax: `ng new project/appName` example: command: `ng new angular6-1-demo`\n- Go inside the project/app directory, command: `cd angular6-1-demo OR cd appName`\n- To Build and run Angular App, command: `ng serve / npm start` OR `ng serve -o` OR `ng serve --open`\n- To change 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\n3.2. Working 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-angular6-1-demo 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 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\n3.3. Angular application 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_angular7/3.1_application_architecture.png\" alt=\"Angular Application Folder Architecture\" title=\"Angular Application Folder Architecture\" width=\"400\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Angular Application Folder 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\n3.4. Angular application File / Folder 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- `ng serve / npm start` -\u003e main.ts (index.html) -\u003e app.module.ts -\u003e app.component.ts -\u003e (app.component.html + css)\n\n04 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. (Show graphical representation)\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_angular7/4_components.png\" alt=\"Angular Components \" title=\"Angular Components\" width=\"400\" 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\n4.1. 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    - `syntax`: ng generate component componentName OR ng generate component path/componentName\n    - `command`: ng generate component components/component-demo1 OR ng g c components/component-demo1\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    - To use current component in application, copy and paste new component `'selector'` from .ts file i.e. `'app-component-demo1'` as a tag in `app.component.html `\n\n4.2. @Component/Decorator/Metadata details:\n---------------------\n### 4.2.1. selector:\n- Selector is basically a `custom HTML tag used to represent current component`\n- Selector helps to `render .html file/html template` in browser\n- Example: index.html: `\u003capp-root\u003e\u003c/app-root\u003e`\n- Example: app.component.html: `\u003capp-component-demo1\u003e\u003capp-component-demo1\u003e`\n- There are total 3 ways to specify/write and use selectors:\n\n\u003e **Syntax \u0026 Example**: component-demo1.component.ts\n```\n    1. tag: \u003c \u003e selector: 'app-test', example: \u003capp-test\u003e\n    2. class: . selector: '.app-test', example: \u003cdiv class=\"app-test\"\u003e\n    3. attribute / [ ]: selector: '[app-test]', example: \u003cdiv app-test\u003e\n```\n\n### 4.2.2. template:\n- `template` property denotes writing html markup in current class .ts file only\n- `template` property can help to write all html/markup in .ts typescript file itself\n- single line can be written directly:\n\n\u003e **Syntax \u0026 Example**:\n```typescript\ntemplate: '\u003ch1\u003eInline single template Heading used - template written in same .ts file\u003c/h1\u003e',\n```\n\n- multi line html can be written with back-tick ` ` symbol: \n\u003e **Syntax \u0026 Example**:\n```typescript\ntemplate: `\n    \u003ch1\u003e Multiple line template \u003c/h1\u003e\n    \u003cdiv\u003e template written in same .ts file \u003c/div\u003e\n`,\n```\n### 4.2.3. templateUrl:\n- `templateUrl` denotes/points to an `external .html` file OR \n- Write html code in another .html file and call the file path with `templateUrl` property (separation of concern)\n\n\u003e **Syntax \u0026 Example**: \n```typescript\ntemplateUrl: './app.component.html', // template/templateUrl - html view,\n```\n\n\u003e **Syntax \u0026 Example**: component-demo2-template.component.ts\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo2-template',\n  templateUrl: './component-demo2-template.component.html',\n\n  // single line template\n  // template: '\u003ch1\u003eInline single template para used \u003c/h1\u003e',\n\n  // multi line template\n  template:`\n    \u003ch1\u003ecomponent-demo2-template templateUrl works!\u003c/h1\u003e\n\n    \u003ch2\u003etemplate\u003c/h2\u003e\n    template denotes writing html markup in current class file only, template property can help to write all html/markup in .ts typescript file itself.\n  \n    \u003cp\u003e Multiple line template \u003c/p\u003e\n    \u003cdiv\u003e template written in same .ts file \u003c/div\u003e\n    `,\n  styleUrls: ['./component-demo2-template.component.css']\n})\nexport class ComponentDemo2TemplateComponent implements OnInit {\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n### 4.2.4. styles:  \n- style denotes writing `css style for current component only` - like inline css, \n- multiple css styles written inside array [ ] and back tick ` ` symbol\n\n\u003e **Syntax \u0026 Example**: \n```typescript\nstyles: [`\n    h1 {\n        text-align:center;\n    }\n\n    div {\n        border:2px dashed gray;\n    }\n`]\n```\n\n### 4.2.5. styleUrls:\n- `styleUrls` denotes external css file used for current component\n- write css styles in another .css file and `call the file path with styleUrls` property (seperation of concern)\n\n\u003e **Syntax \u0026 Example**: \n```typescript\nstyleUrls: ['./app.component.css'] // styleUrls - css style sheet\n```\n\n\u003e **Syntax \u0026 Example**: component-demo3-styles.component.ts\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo3-styles',\n  templateUrl: './component-demo3-styles.component.html',\n  //styleUrls: ['./component-demo3-styles.component.css']\n  styles: [`\n    h1{\n      text-align:center;\n    }\n\n    div{\n      border:2px dashed gray;\n    } \n  `]\n})\nexport class ComponentDemo3StylesComponent implements OnInit {\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo1.component.ts\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  // 1. \u003ctag/element\u003e selector\n  selector: 'app-component-demo1',\n  // 2. .class selector\n  // selector: '.app-component-demo1',\n  // 3. [attribute] selector\n  // selector: '[app-component-demo1]',\n  templateUrl: './component-demo1.component.html',\n  styleUrls: ['./component-demo1.component.css']\n})\nexport class ComponentDemo1Component implements OnInit {\n  private appName:string = 'Angualr 6 Application';\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo1.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo1 works! \u003c/h1\u003e\n  \u003cul\u003e\n    \u003cli\u003e{{ appName }}\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003eWhat is Angular\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli\u003eFramework to build client side application\u003c/li\u003e\n    \u003cli\u003eGreat for SPAs\u003c/li\u003e\n    \u003cli\u003eAngular 2/4/5/6/7 frameworks targets Mobile and Desktop.\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003c!--The content below is only a placeholder and can be replaced.--\u003e\n\u003cdiv class=\"container\"\u003e\n\n  \u003c!-- There are total 3 ways to specify/write and use selectors: \n      tag: \u003c \u003e\n      class: .\n      attribute / [ ]\n    --\u003e\n\n  \u003capp-component-demo1\u003e\u003c/app-component-demo1\u003e\n  \u003c!-- \u003cdiv class=\"app-component-demo1\"\u003e\u003c/div\u003e --\u003e\n  \u003c!-- \u003cdiv app-component-demo1\u003e\u003c/div\u003e --\u003e\n  \u003cdiv class=\"custom-divider\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u003e **Syntax \u0026 Example**: app.component.ts\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  // create a property to send from parent to child\n  parentMessage = 'From Parent';\n\n  // \n  \n}\n```\n\n\u003e **Syntax \u0026 Example**: app.module.ts\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { ComponentDemo1Component } from './componenets/component-demo1/component-demo1.component';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    ComponentDemo1Component,\n  ],\n  imports: [\n    BrowserModule,\n  ],\n\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\u003e **Syntax \u0026 Example**: styles.css\n```css\n/* You can add global styles to this file, and also import other style files */\n\n/* common global generic styles */\n.custom-divider {\n  margin: 30px 0px;\n  border-bottom:2px dashed gray;\n}\n\nh1,h2,h3 {\n  text-transform: uppercase;\n  /* text-transform: capitalize; */\n}\n\nh2 {\n  text-decoration: underline;\n}\n\nbody {\n  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;\n  letter-spacing: 2px;\n}\n\nli {\n  margin: 10px 0px;\n}\n\ninput{\n  padding: 5px;\n}\n\nbutton {\n  border-radius: 5px;\n  padding: 10px 15px;\n  background-color: teal;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  color: lightcyan;\n}\n\n/* class binding */\n.text-primary {\n  color: blue;\n}\n\n.text-danger {\n  color: red;\n}\n\n.text-success {\n  color: lawngreen;\n}\n\n.text-special {\n  font-weight:bold;\n  font-style: italic;\n  color:orchid;\n}\n\n.text-strikethrough {\n  text-decoration: line-through;\n}\n```\n\u003e **Syntax \u0026 Example**: index.html\n```html\n\u003c!doctype html\u003e\n  \u003chtml lang=\"en\"\u003e\n    \n    \u003chead\u003e\n      \u003cmeta charset=\"utf-8\"\u003e\n      \u003ctitle\u003eAngular7Demo\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    \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\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/4.2.1.output-selector-templateUrl-styleUrls.png\" alt=\"Output -  selector, templateUrl, styleUrls\" title=\"Output -  selector, templateUrl, styleUrls\" width=\"800\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output -  selector, templateUrl, styleUrls\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n05 Interpolation Data Binding\n=====================\n- Interpolation denotes/evaluates the content inside `{{ }} braces` and displays the value in component view file\n- Interpolation = expressions, data-binding to text nodes and attribute values\n- interpolation expression = {{ varName }} or {{ fn_anyReturnFunction() }}\n- Angular expressions are much like `JavaScript expressions` and they can contain literals, operators, and variables\n- Data binding in Angular is the `synchronization/communication between the model and the view`\n- `String interpolation` is used to display dynamic data on HTML template (front end / at user end)\n- Variable value assignment not possible with interpolation, Example: `{{ name = 'Dinanath' or Total = 10 + 20 }}`\n\n\u003e **Syntax \u0026 Example**: component-demo4-interpolation.component.ts\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo4-interpolation',\n  templateUrl: './component-demo4-interpolation.component.html',\n  styleUrls: ['./component-demo4-interpolation.component.css']\n})\nexport class ComponentDemo4InterpolationComponent implements OnInit {\n  // variables - class members\n  public technology = 'Angular 6';\n  public userName = 'Dinanath';\n  // public siteUrl = 'http://www.google.com';\n  public siteUrl = window.location.href;\n\n  fn_showGreetingsToUser() {\n    return 'Welcome ' + this.userName;\n  }\n\n  fn_showMessage() {\n    return 'Welcome to ' + this.technology + ' ' + this.userName;\n  }\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo4-interpolation.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo4-interpolation works!\u003c/h1\u003e\n  \u003cul\u003e\n    \u003cli\u003emaths = 2+2 = {{ 2+2 }}\u003c/li\u003e\n    \u003cli\u003e{{ \"Welcome \" + userName }}\u003c/li\u003e\n    \u003cli\u003euserName.length = {{ userName.length }}\u003c/li\u003e\n    \u003cli\u003etoUpperCase = {{ userName.toUpperCase() }}\u003c/li\u003e\n    \u003cli\u003etoLowerCase = {{ userName.toLowerCase() }}\u003c/li\u003e\n    \u003cli\u003ecurrent Site URL: {{ siteUrl }}\u003c/li\u003e\n    \u003cli\u003efunction call: {{ fn_showGreetingsToUser() }}\u003c/li\u003e\n    \u003cli\u003efunction call: {{ fn_showMessage() }}\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n\u003e **Syntax \u0026 Example**: app.module.ts\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { ComponentDemo1Component } from './componenets/component-demo1/component-demo1.component';\nimport { ComponentDemo2TemplateComponent } from './componenets/component-demo2-template/component-demo2-template.component';\nimport { ComponentDemo3StylesComponent } from './componenets/component-demo3-styles/component-demo3-styles.component';\nimport { ComponentDemo4InterpolationComponent } from './componenets/component-demo4-interpolation/component-demo4-interpolation.component';\nimport { ComponentDemo5PropertybindingComponent } from './componenets/component-demo5-propertybinding/component-demo5-propertybinding.component';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    ComponentDemo1Component,\n    ComponentDemo2TemplateComponent,\n    ComponentDemo3StylesComponent,\n    ComponentDemo4InterpolationComponent,\n  ],\n  imports: [\n    BrowserModule,\n  ],\n\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003c!--The content below is only a placeholder and can be replaced.--\u003e\n\u003cdiv class=\"container\"\u003e\n\n  \u003c!-- There are total 3 ways to specify/write and use selectors: \n      tag: \u003c \u003e\n      class: .\n      attribute / [ ]\n    --\u003e\n\n  \u003capp-component-demo1\u003e\u003c/app-component-demo1\u003e\n  \u003c!-- \u003cdiv class=\"app-component-demo1\"\u003e\u003c/div\u003e --\u003e\n  \u003c!-- \u003cdiv app-component-demo1\u003e\u003c/div\u003e --\u003e\n  \u003cdiv class=\"custom-divider\"\u003e\u003c/div\u003e\n\n  \u003c!-- component decorator template --\u003e\n  \u003capp-component-demo2-template\u003e\u003c/app-component-demo2-template\u003e\n  \u003cdiv class=\"custom-divider\"\u003e\u003c/div\u003e\n\n  \u003c!-- css style --\u003e\n  \u003capp-component-demo3-styles\u003e\u003c/app-component-demo3-styles\u003e\n  \u003cdiv class=\"custom-divider\"\u003e\u003c/div\u003e\n\n  \u003c!-- interpolation --\u003e\n  \u003capp-component-demo4-interpolation\u003e\u003c/app-component-demo4-interpolation\u003e\n  \u003cdiv class=\"custom-divider\"\u003e\u003c/div\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/5.interpolation.png\" alt=\"Output - Interpolation Data Binding {{ }}\" title=\"Output - Interpolation Data Binding {{ }}\" width=\"800\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - Interpolation Data Binding {{ }}\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n06 Property Binding\n=====================\n- String Interpolation and Property binding both are used for the same purpose i.e. one-way Data Binding\n- String Interpolation and Property Binding both `flow value in one direction from our components to HTML elements`\n- Basic Attributes are defined by HTML BUT `\"value\"` kind of dynamic attributes (properties) which are like properties are defined and managed by DOM\n- `Attributes and properties are NOT the same`\u003cbr/\u003e\n    - `Attributes` = HTML \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; | \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; \u0026nbsp; `Properties` = DOM (Document Object Model)\n- Attributes initialise DOM properties and then they are done - cannot change once they are initialised\n- Property values however can change, HTML attribute value specifies initial value and the `DOM value property is the current value`\n\n\u003e **Syntax \u0026 Example**: Property Binding is done with [square bracket] OR bind-properyName:\n\n```html\nexample: \u003cinput type=\"text\" value=\"dinanath\" /\u003e\n```\n\n- type in console:$0.getAttribute(\"value\");   output:\"dinanath\"  \n- type in console:$0.value;   output:\"dinanath\" \n- Now type something new in text field \"new Text\"\n- type in console:$0.getAttribute(\"value\");   output:\"dinanath\"  \n- type in console:$0.value;   output:\"new Text\"\n- \u003e **Note**: Attribute does not changed but `value property changed`\n- `Property Binding done with [ ] square bracket` also with `{{ interpolation }}` But its advisable to use [ ] as its supports string, boolean all property types, boolean value like true/false etc does not works well with {{ interpolation }}\n\n\u003e **Syntax \u0026 Example**: component-demo5-propertybinding.component.ts\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo5-propertybinding',\n  templateUrl: './component-demo5-propertybinding.component.html',\n  styleUrls: ['./component-demo5-propertybinding.component.css']\n})\nexport class ComponentDemo5PropertybindingComponent implements OnInit {\n  public _id = 'id1';\n  public _isDisabled1 = true;\n  public _isDisabled2 = false;\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo5-propertybinding.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo5-propertybinding works!\u003c/h1\u003e\n\n  \u003ch3\u003eattributes vs value\u003c/h3\u003e\n  \u003cinput size=\"40\" type=\"text\" value=\"angular property binding\" /\u003e\n\n  \u003ch3 ngNonBindable\u003eproperty binding [ ] vs interpolation {{ ngNonBindable }} \u003c/h3\u003e\n\n  \u003cinput type=\"text\" [id]=\"_id\" value=\"[ ] property-binding\" /\u003e\u003cbr /\u003e\n  \u003cinput type=\"text\" id=\"{{_id}}\" value=\"{ } interpolation property-binding\" /\u003e \u003cbr /\u003e \u003cbr /\u003e\n\n  \u003ch3\u003eattribute boolean (property) interpolation does not support \u003c/h3\u003e\n  \u003cinput type=\"text\" disabled=\"false\" [id]=\"_id\" value=\"boolean false not works\" /\u003e\u003cbr /\u003e\n  \u003cinput type=\"text\" disabled=\"true\" [id]=\"_id\" value=\"boolean true not works\" /\u003e \u003cbr /\u003e \u003cbr /\u003e\n\n  \u003ch3\u003eproperty binding boolean values supported  \u003c/h3\u003e\n  \u003cinput type=\"text\" [disabled]=\"false\" [id]=\"_id\" value=\"[property-binding] works\" /\u003e\u003cbr /\u003e\n  \u003cinput type=\"text\" [disabled]=\"true\" [id]=\"_id\" value=\"[property-binding] works\" /\u003e\u003cbr /\u003e \u003cbr /\u003e\n\n  \u003ch3\u003eproperty binding boolean property with variable \u003c/h3\u003e\n  \u003cinput type=\"text\" [disabled]=\"_isDisabled1\" [id]=\"_id\" value=\"[ var ] disabled works\" /\u003e\u003cbr /\u003e\n  \u003cinput type=\"text\" [disabled]=\"_isDisabled2\" [id]=\"_id\" value=\"[ var ] enabled works\" /\u003e\u003cbr /\u003e\n\n  \u003ch3\u003eproperty binding with bind- \u003c/h3\u003e\n  \u003cinput type=\"text\" bind-disabled=\"_isDisabled1\" [id]=\"_id\" value=\"[ var ] disabled works\" /\u003e\u003cbr /\u003e\n  \u003cinput type=\"text\" bind-disabled=\"_isDisabled2\" [id]=\"_id\" value=\"[ var ] enabled works\" /\u003e\u003cbr /\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/6.property-binding.png\" alt=\"Output - Property binding with {{}}, [ ] and bind- \" title=\"Output - Property binding with {{}}, [ ] and bind- \" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - Property binding with {{}}, [ ] and bind- \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n07 Class Binding\n=====================\n- Class binding refers to applying different classes normally or depends on condition (dynamically)\n- Class binding is very important and really useful as it allows developer to apply/add and remove classes to html element dynamically based on condition or user interaction\n- Class Binding Syntax: `\u003ctag [class]=\"varName\" /\u003e`, here `varName holds css className`\n- If `[class] binding` and `class=\" \"` attribute both present in tag, `[class] binding` get first/higher priority and `class=\" \"` attribute becomes null \u0026 void (class style properties not applied to text -  so its advisable to use any one either class binding or class attribute)\n- `[ngClass]` directive/attribute helps to apply multiple classes conditionally `\u003ctag [ngClass]=\"varObjectName\"`\n\n\u003e **Syntax \u0026 Example**: styles.css (write css classes in any file)\n```css\n.text-primary {\n  color: blue;\n}\n\n.text-danger {\n  color: red;\n}\n\n.text-success {\n  color: lawngreen;\n}\n\n.text-special {\n  font-weight:bold;\n  font-style: italic;\n  color:orchid;\n}\n\n.text-strikethrough {\n  text-decoration: line-through;\n}\n\n.text-orange {\n  color: orange;\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo6-classbinding.component.ts\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo6-classbinding',\n  templateUrl: './component-demo6-classbinding.component.html',\n  styleUrls: ['./component-demo6-classbinding.component.css']\n})\nexport class ComponentDemo6ClassbindingComponent implements OnInit {\n  public successClass = 'text-success';\n  public dangerClass = 'text-danger';\n  public isSpecialClass = true;\n  public isErrorClass = true;\n\n  public messageClasses = {\n    'text-primary': this.isSpecialClass,\n    'text-strikethrough': this.isSpecialClass\n  }\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo6-classbinding.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo6-classbinding works! \u003c/h1\u003e\n\n  \u003ch3 ngNonBindable\u003e[class]=\"varName\" (varName holds css className present in css)\u003c/h3\u003e\n\n  \u003ch4 class=\"text-orange\"\u003esimple class attribute\u003c/h4\u003e\n  \n  \u003ch4 [class]=\"successClass\"\u003eThis is class binding with []\u003c/h4\u003e\n\n  \u003ch4 class=\"{{successClass}}\"\u003eThis is class binding with interpolation\u003c/h4\u003e\n\n  \u003ch4 [class]=\"successClass\" class=\"text-orange\"\u003eThis is class binding with [] also class attribute\u003c/h4\u003e\n\n  \u003ch4 [class.text-special]=\"isSpecialClass\"\u003eThis is class binding with boolean variable condition \u003c/h4\u003e\n\n  \u003ch4 [class.text-danger]=\"isErrorClass\"\u003eThis is class binding with boolean variable condition \u003c/h4\u003e\n\n  \u003ch4 [ngClass]=\"messageClasses\"\u003eThis is ngClass binding to deal with multiple classes at once\u003c/h4\u003e\n  \n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/7.class-binding.png\" alt=\"Output - Class binding with {{}}, [ ] and ngClass\" title=\"Output - Class binding with {{}}, [ ] and ngClass\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - Class binding with {{}}, [ ] and ngClass\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n08 Style Binding\n=====================\n- Style binding is similar to class binding but it refers to applying different inline styles to html element instead of applying css classes\n- Style Binding Syntax: \n```\n\u003ctag [style.color]=\"'orange'\"\u003e text \u003c/tag\u003e \nOR \n\u003ctag [style.color]=\"'varName'\"\u003e text \u003c/tag\u003e\n```\n- `[ngStyle]` directive/attribute helps to apply multiple inline styles `\u003ctag [ngStyle]=\"varObjectName\"`\n\n\u003e **Syntax \u0026 Example**: component-demo7-stylebinding.component.ts \n```ts\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo7-stylebinding',\n  templateUrl: './component-demo7-stylebinding.component.html',\n  styleUrls: ['./component-demo7-stylebinding.component.css']\n})\nexport class ComponentDemo7StylebindingComponent implements OnInit {\n  public greenColor = 'green';\n  public redColor = 'red';\n  public orangeColor = 'orange';\n  public hasError = true;\n\n  public headerStyles = {\n    color: 'blue',\n    textDecoration: 'line-through',\n    fontStyle: 'italic'\n  }\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo7-stylebinding.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo7-stylebinding works!\u003c/h1\u003e\n\n  \u003ch3 ngNonBindable\u003e \u0026lt;tag [style.color]=\"'orange'\"\u0026gt; text \u0026lt;/tag\u0026gt;\u003c/h3\u003e\n  \u003ch4 [style.color]=\"'orange'\"\u003eapplying inline styles\u003c/h4\u003e\n\n  \u003ch3 ngNonBindable\u003e \u0026lt;tag [style.color]=\"'varName'\"\u0026gt; text \u0026lt;/tag\u0026gt;\u003c/h3\u003e\n  \u003ch4 [style.color]=\"greenColor\"\u003eapplying inline styles with variable \u003c/h4\u003e\n\n  \u003ch3 ngNonBindable\u003e \u0026lt;style.color]=\"hasError ? 'red' : 'green' \"\u0026gt; text \u0026lt;/tag\u0026gt;\u003c/h3\u003e\n  \u003ch4 [style.color]=\"hasError ? 'red' : 'green' \"\u003eapplying inline styles with variable conditions\u003c/h4\u003e\n\n  \u003ch4 [ngStyle]=\"headerStyles\"\u003eapplying multiple inline styles\u003c/h4\u003e\n\u003c/div\u003e\n\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/8.style-binding.png\" alt=\"Output - Style binding with [style.] and [ngStyle]\" title=\"Output - Style binding with [style.] and [ngStyle]\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - Style binding with [style.] and [ngStyle]\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n09 Event Binding\n=====================\n- Event binding captures any DOM event and performs actions\n- Angular provides an ability to bind the events along with the methods, Event binding is used with `parenthesis ()`\n- Usually data binding done from Component Class `.ts` to Component Template `.html` (variables in class .ts files used/bind with html/template .html)\n- To responds to user events like mouse clicks or keyboard events we need data flow from TEMPLATE to CLASS, event binding flows from TEMPLATE to CLASS (.HTML/TEMPLATE/VIEW to .TS/CLASS file)\n- Syntax: `\u003ch1 (click)=\"fn()\"\u003eClick Me - Change Style\u003c/h1\u003e`\n\n\u003e **Syntax \u0026 Example**: component-demo8-eventbinding.component.ts\n```ts\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo8-eventbinding',\n  templateUrl: './component-demo8-eventbinding.component.html',\n  styleUrls: ['./component-demo8-eventbinding.component.css']\n})\nexport class ComponentDemo8EventbindingComponent implements OnInit {\n  public isButtonClicked = false;\n  public greetingMessage = '';\n  public eventType = '';\n  // public withoutHandlerMessage = '';\n\n  fn_changeStyles() {\n    this.isButtonClicked = !this.isButtonClicked;\n    this.greetingMessage = 'welcome to event binding';\n  }\n\n  fn_checkClick(evt) {\n    console.log(evt);\n    this.eventType = evt.type;\n  }\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo8-eventbinding.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo8-eventbinding works!\u003c/h1\u003e\n\n  \u003ch2\u003eEvent Binding\u003c/h2\u003e\n\n  \u003ch1 (click)=\"fn_changeStyles()\" [class.text-primary]=\"isButtonClicked\" style=\"cursor:pointer;\"\u003eClick Me - Change Style\u003c/h1\u003e\n\n  \u003cdiv\u003eisButtonClicked: {{isButtonClicked}}.  | {{isButtonClicked ? greetingMessage : \" \"}} \u003c/div\u003e \u003cbr /\u003e\u003cbr /\u003e\n\n  \u003cbutton (click)=\"fn_checkClick($event)\"\u003eClick me!\u003c/button\u003e Event: {{eventType}} \n\n  \u003cbutton (click)=\"withoutHandlerMessage = 'Without handler function' \"\u003eWithout handler function - Click me!\u003c/button\u003e {{withoutHandlerMessage}}\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/9.event-binding-1.png\" alt=\"Event binding with (click)\" title=\"Event binding with (click)\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Event binding with (click)\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_angular7/9.event-binding-2.png\" alt=\"Image - Output - Event binding with (click) - After Click\" title=\"Image - Output - Event binding with (click) - After Click\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - Event binding with (click) - After Click\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n10 Template Reference Variables\n=====================\n- When there is a user interaction we may want some data to flow from VIEW/TEMPLATE (.HTML) to the class .TS) to perform some operation  \n    - Example: value from input fields to perform some validation etc\n- To easily access DOM elements and their properties, Template Reference Variables is used\n- Template Reference Variables is created with #hash symbol followed by var name i.e. `#heading1`\n- Syntax: `\u003ch1 #heading1\u003eI am heading 1\u003c/h1\u003e`, here `#heading1` is Template Reference Variable (a dynamic name/id) assigned to h1 tag\n\n\u003e **Syntax \u0026 Example**: component-demo9-templaterefvars.component.ts\n```ts\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo9-templaterefvars',\n  templateUrl: './component-demo9-templaterefvars.component.html',\n  styleUrls: ['./component-demo9-templaterefvars.component.css']\n})\nexport class ComponentDemo9TemplaterefvarsComponent implements OnInit {\n  logDetails(_value) {\n    console.log(_value);\n  }\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo9-templaterefvars.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo9-templaterefvars works!\u003c/h1\u003e\n\n  \u003ch2\u003eTemplate Reference Variables\u003c/h2\u003e\n \n  \u003cinput #textInput type=\"text\" placeholder=\"Enter Name\" /\u003e \u0026nbsp; \u0026nbsp;\n\n  \u003cbutton (click)=\"logDetails(textInput)\"\u003eGet Input Field\u003c/button\u003e \u0026nbsp; \u0026nbsp;\n\n  \u003cbutton (click)=\"logDetails(textInput.value)\"\u003eGet Value of field \u003c/button\u003e \u0026nbsp; \u0026nbsp;\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/10.template-ref-var.png\" alt=\"Output - Template Reference Variables\" title=\"Output - Template Reference Variables\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - Template Reference Variables\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n11 Two Way Data Binding\n=====================\n- Data binding is one of the most powerful features of Angular, used widely for communication between TypeScript code (.ts - business logic) and different components (.html - view/template) shown to the users\n- Whenever we work with Input Form fields its necessary/essentials that MODEL (data) and VIEW (template) both syncs well (any changes into HTML field should update the model/property and any updates/changes in model/property/variable than view should reflect those updated values)\n- There are two types of data binding:\n    1. One way data binding \n    2. Two way data binding \n\n11.1. One way data binding\n---------------------\n- One way data binding is a simple/normal one way communication where HTML template is changed when any changes to TypeScript code/model/data/variable\n- In one way data binding value of Model is used in the View (HTML) but we can't update Model from the View (.HTML Template)\n- Example:  Interpolation / String Interpolation, Property Binding, and Event Binding\n- One way data binding works from class .ts file to template/view .html file:\n\n\u003e **Syntax \u0026 Example**: component-demo10-onewaydatabinding.component.ts\n```ts\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo10-onewaydatabinding',\n  templateUrl: './component-demo10-onewaydatabinding.component.html',\n  styleUrls: ['./component-demo10-onewaydatabinding.component.css']\n})\nexport class ComponentDemo10OnewaydatabindingComponent implements OnInit {\n  public inputResultValue = 'One Way Data Binding!';\n\n  public userNameText = 'Angular 7';\n\n  public changeInputText(evt) {\n    console.log(evt);\n    this.userNameText = evt.target.value;\n  }\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo10-onewaydatabinding.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo10-onewaydatabinding works!\u003c/h1\u003e\n\n  \u003ch2\u003eOne way data binding\u003c/h2\u003e\n  One way data binding works from class .ts file to template/view .html file: \u003cbr /\u003e \u003cbr /\u003e\n  \u003cinput type=\"text\" value={{inputResultValue}} /\u003e \u003cbr /\u003e\n  \u003cinput type=\"text\" [value]=inputResultValue /\u003e \u003cbr /\u003e\n  \u003cinput type=\"text\" bind-value=inputResultValue /\u003e \u003cbr /\u003e\n\n  \u003ch2\u003eOne Way Data Binding works as Two way (work around)\u003c/h2\u003e\n  \u003cinput type=\"text\" placeholder=\"Enter Name\" [value]=\"userNameText\" (input)=\"changeInputText($event)\" /\u003e \u0026nbsp;\u0026nbsp;\n  \u003cspan\u003e\u003cem\u003e\u003cstrong\u003e{{userNameText}}\u003c/strong\u003e\u003c/em\u003e\u003c/span\u003e\n  \n\u003c/div\u003e\n```\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/11.one-way-data-binding-1.png\" alt=\"Simple one way data binding with {{}}, [ ] and bind-\" title=\"Simple one way data binding with {{}}, [ ] and bind-\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Simple one way data binding with {{}}, [ ] and bind-\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_angular7/11.one-way-data-binding-2.png\" alt=\"Image - Output - Simple one way data binding with {{}}, [ ] and bind-, used as two way data binding\" title=\"Image - Output - Simple one way data binding with {{}}, [ ] and bind-, used as two way data binding\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - Simple one way data binding with {{}}, [ ] and bind-, used as two way data binding\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n11.2. Two way data binding\n---------------------\n- Two Way Data Binding helps to update the property at the same time displays the value of the property\n- In two way data binding, `automatic synchronization of data happens between the Model and the View`\n- Here whenever we make changes in the Model(data/variable) it will be reflected in the View and when you make changes in View(HTML/template) it will be reflected in Model\n- `\"ngModel\"` Directive is used to implement Two Way Data Binding (basically VIEW \u0026 MODEL should always be sync) \n- `[ ] square bracket/property binding` is used for data flow from class to the template and `( ) parentheses/event binding` for data from template to class \n- `[(ngModel)]` - this syntax is known as `[(banana in the box)]`\n- To use `[(ngModel)]` Directive we must need to `import FormsModule` from `@angular/forms` and also add to imports array in app.module.ts: `import { FormsModule } from '@angular/forms';`\n- \u003e **Note**: In two way data binding value flow from an Input Text field to the class file and then to view/template file\n\n\u003e **Syntax \u0026 Example**: app.module.ts\n```ts\n// import forms module for two way data binding\nimport { FormsModule } from '@angular/forms';\n\nimports: [\n    BrowserModule,\n    FormsModule\n  ],\n```\n\n\u003e **Syntax \u0026 Example**: component-demo11-twowaydatabinding.component.ts\n```ts\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo11-twowaydatabinding',\n  templateUrl: './component-demo11-twowaydatabinding.component.html',\n  styleUrls: ['./component-demo11-twowaydatabinding.component.css']\n})\nexport class ComponentDemo11TwowaydatabindingComponent implements OnInit {\n  public nameText = 'Angular 6';\n  \n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo11-twowaydatabinding.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo11-twowaydatabinding works!\u003c/h1\u003e\n\n  \u003ch2\u003eTwo way data binding\u003c/h2\u003e\n  \n  \u003cinput type=\"text\" [(ngModel)]=\"nameText\" placeholder=\"Enter Name\"/\u003e {{nameText}}\n  \n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/12.two-way-data-binding.png\" alt=\"Image - Output - Two way data binding with [(ngModel)], FormsModule\" title=\"Image - Output - Two way data binding with [(ngModel)], FormsModule\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - Two way data binding with [(ngModel)], FormsModule\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n12 ngIf Directive\n=====================\n- Directives are an `instructions in the DOM`, they specify how to place your components and business logic in the Angular\n- Directives are js class and `declared as @directive`\n- There are 3 main types of directives in Angular:\n    1. **Component Directives** - Component directives are used in `main class (app.component.ts)`. They contain the detail of how the component should be processed, instantiated and used at runtime\n    2. **Structural Directives** - Structural Directives let us `Add or Remove (Show or Hide) HTML elements` from DOM. Structural directives `start with a * sign`. These directives are used to `manipulate and change the structure of the DOM elements`. For example, *ngIf and *ngFor etc.\n    3. **Attribute Directives** - Attribute directives `look like a normal HTML Attribute` and mainly used in `databinding and event binding`. Attribute directives are used to `change the look and behavior of the DOM elements`. Attribute Directives affect only the element they are added to. For example: ngClass, ngStyle etc. \n- Most important/widely used inbuilt Structural directives are: \n    - **ngIf** - conditionally render/show-hide html elements \n    - **ngSwitch** - conditionally render/show-hide html elements \n    - **ngFor** - render/show list of html elements through loop\n\n*ngIf\n---------------------\n- *ngIf directive is used to change the output conditionally\n- If the condition is false, the DOM element does not render\n- With *ngIf use truthy or falsy value which conditionally renders the DOM elements\n- `ng-template` is like a container for chunks/group of HTML elements controlled once\n\n\u003e **Syntax \u0026 Example**: component-demo12-ngif.component.ts\n```ts\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo12-ngif',\n  templateUrl: './component-demo12-ngif.component.html',\n  styleUrls: ['./component-demo12-ngif.component.css']\n})\nexport class ComponentDemo12NgifComponent implements OnInit {\n  public isShow=true;\n  public hasDisplay=false;\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo12-ngif.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo12-ngif works!\u003c/h1\u003e\n\n  \u003ch2\u003e*ngIf\u003c/h2\u003e\n  \n  \u003cul\u003e\n    \u003cli *ngIf=\"true\"\u003eShow me \u003c/li\u003e\n    \u003cli *ngIf=\"false\"\u003eI am NOT rendered in DOM \u003c/li\u003e\n    \u003cli *ngIf=\"isShow\"\u003ePlease show me - conditional variable/property from class\u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003engIf else ng-template\u003c/h2\u003e\n  If condition is false, different DOM element renders as specified in \"ng-template else\"\u003e\n\n  \u003c!-- variable true - show me, else show other ng-template --\u003e\n  \u003cdiv *ngIf=\"hasDisplay; else elseTemplate\"\u003e\n    \u003ch5\u003eI have used in ngIf TRUE part\u003c/h5\u003e\n  \u003c/div\u003e\n\n  \u003cng-template #elseTemplate\u003e\n    \u003ch5\u003eI am using ngIf FALSE/ELSE part in ng-template\u003c/h5\u003e\n  \u003c/ng-template\u003e\n\n  \u003ch2\u003engIf - ng-template else ng-template\u003c/h2\u003e\n  depends on variable/condition show ng-template1 else show other ng-template2\n\n  \u003c!-- variable true then show ng-template1 else show other ng-template2 --\u003e\n  \u003cdiv *ngIf=\"hasDisplay; then trueTemplate; else falseTemplate\"\u003e\u003c/div\u003e\n\n  \u003cng-template #trueTemplate\u003e\n    \u003ch5\u003eI am #trueTemplate\u003c/h5\u003e\n  \u003c/ng-template\u003e\n\n  \u003cng-template #falseTemplate\u003e\n    \u003ch5\u003eI am #falseTemplate\u003c/h5\u003e\n  \u003c/ng-template\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/12.structural-directive-ngIf.png\" alt=\"Image - Output - *ngIf - Structural directive to control/add/remove elements to DOM conditionally\" title=\"Image - Output - *ngIf - Structural directive to control/add/remove elements to DOM conditionally\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - *ngIf - Structural directive to control/add/remove elements to DOM conditionally\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n13 ngSwitch Directive\n=====================\n- ngSwitch directive is similar to other programming languages swtich statement, only the `difference is with angular we render HTML elements instead of executing logics`\n\n\u003e **Syntax \u0026 Example**: component-demo13-ngswitch.component.ts\n```ts\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo13-ngswitch',\n  templateUrl: './component-demo13-ngswitch.component.html',\n  styleUrls: ['./component-demo13-ngswitch.component.css']\n})\nexport class ComponentDemo13NgswitchComponent implements OnInit {\n  public curColor='red';\n  // public curColor='green';\n  // public curColor = 'blue';\n\n  // public curColor = 'black';\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo13-ngswitch.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo13-ngswitch works!\u003c/h1\u003e\n\n  \u003ch2\u003e*ngSwtich\u003c/h2\u003e\n\n  \u003cdiv [ngSwitch]=\"curColor\"\u003e\n    \u003cdiv *ngSwitchCase=\"'red'\" [style.color]=\"curColor\"\u003eRED | {{curColor}} | color\u003c/div\u003e\n    \u003cdiv *ngSwitchCase=\"'green'\" [style.color]=\"curColor\"\u003eGREEN | {{curColor}} | color\u003c/div\u003e\n    \u003cdiv *ngSwitchCase=\"'blue'\" [style.color]=\"curColor\"\u003eBLUE | {{curColor}} | color\u003c/div\u003e\n    \u003cdiv *ngSwitchDefault\u003eDefault BLACK\u003c/div\u003e\n  \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/13.structural-directive-ngSwitch.png\" alt=\"Image - Output - *ngSwitch - Structural directive to control/add/remove elements to DOM conditionally\" title=\"Image - Output - *ngSwitch - Structural directive to control/add/remove elements to DOM conditionally\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - *ngSwitch - Structural directive to control/add/remove elements to DOM conditionally\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n14 ngFor Directive\n=====================\n- ngFor directive is similar to other programming languages for loop statement, only the `difference is with angular we render the list of HTML elements instead of executing logics`\n\n\u003e **Syntax \u0026 Example**: component-demo14-ngfor.component.ts\n```ts\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo14-ngfor',\n  templateUrl: './component-demo14-ngfor.component.html',\n  styleUrls: ['./component-demo14-ngfor.component.css']\n})\nexport class ComponentDemo14NgforComponent implements OnInit {\n  // public arrColors = ['red', 'green', 'blue','cyan','magenta','black'];\n  public arrColors = ['red', 'green', 'blue'];\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo14-ngfor.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo14-ngfor works!\u003c/h1\u003e\n\n  \u003ch2\u003e*ngFor\u003c/h2\u003e\n\n  \u003ch2\u003e*ngFor Basics \u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli *ngFor=\"let color of arrColors\" [style.color]=\"color\"\u003e\n      {{color}}\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003e*ngFor with id and class \u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli *ngFor=\"let color of arrColors;\" id=\"{{color}}\" class=\"{{color}}\" [style.color]=\"color\"\u003e\n      {{color}}\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003e*ngFor with index \u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli *ngFor=\"let color of arrColors; index as curIndex\" id=\"{{color}}\" class=\"{{color}}\" [style.color]=\"color\"\u003e\n      Index is: {{curIndex + 1 }}. {{color}}\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\n  \u003ch2\u003e*ngFor with index - first / last / even / odd \u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli *ngFor=\"let color of arrColors; index as curIndex; first as firstIndex; last as lastIndex; even as evenIndex; odd as oddIndex\" id=\"{{color}}\" class=\"{{color}}\" [style.color]=\"color\"\u003e\n      {{curIndex}}. {{color}}  :--:  First Item: {{firstIndex}}  :--: Last Item: {{lastIndex}}  :--:  Odd: {{oddIndex}} :--:  Even: {{evenIndex}} :--:\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/14.structural-directive-ngFor.png\" alt=\"Image - Output - *ngFor - Structural directive to render/loop html elements from an array/object\" title=\"Image - Output - *ngFor - Structural directive to render/loop html elements from an array/object\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - *ngFor - Structural directive to render/loop html elements from an array/object\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n15 Component Interaction\n=====================\n- Component interact [parent to child and vice versa] with @input() \u0026 @output() decorator\n    - **@input() decorator** - Parent component sends data, Child component accepts with @input() decorator `(parent to child component communication with @input() decorator)`\n    - **@output() decorator** - Child component sends data/events, Parent component accepts with @output() decorator `(child to parent component communication with @output() decorator)`\n- To send data from Child to Parent we need events i.e. create `Events-EventEmitter`\n\n15.1. Parent to child communication with @Input() decorator:\n------------------------------\n1. Parent class/.ts file - Create a property or class member/variable, example: `parentMessage = 'From Parent';`\n2. Parent view/.html file - In child selector tag use parent variable with property binding for communication, example: `\u003capp-component-demo15-childparent [parentData]=\"parentMessage\"\u003e\u003c/app-component-demo15-childparent\u003e`\n3. Child component class/.ts file - Receive data data/value coming from parent component, example: `@Input() public parentData;`\n4. Child view/.html file - Bind / Get Parent Data in Child component example: `Hello \u003cstrong\u003e{{parentData}}\u003c/strong\u003e`\n\n\u003e **Syntax \u0026 Example**: parent component - app.component.ts\n```ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  // create a property to send from parent to child\n  parentMessage = 'From Parent';\n    \n}\n```\n\n\u003e **Syntax \u0026 Example**: parent component - app.component.html\n```html\n\u003c!-- component interaction - parent to child and child to parent communication --\u003e\n\n\u003c!-- send property from parent to child - include in child element component selector --\u003e\n\u003capp-component-demo15-childparent [parentData]=\"parentMessage\"\u003e\u003c/app-component-demo15-childparent\u003e\n```\n\n\u003e **Syntax \u0026 Example**: child component - component-demo15-childparent.component.ts\n```ts\nimport { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo15-childparent',\n  templateUrl: './component-demo15-childparent.component.html',\n  styleUrls: ['./component-demo15-childparent.component.css']\n})\nexport class ComponentDemo15ChildparentComponent implements OnInit {\n  // parent to child \n\n  // receive data data/value coming from parent component\n  @Input() public parentData;\n  // @Input() public parentName;\n\n  // alias based method\n  // @Input('parentData') public parentName;\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: child component - component-demo15-childparent.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo15-childparent works!\u003c/h1\u003e\n\n  \u003c!-- parent to child --\u003e\n\n  \u003cu\u003eBind / Get Parent Data in Child component\u003c/u\u003e:\n  Hello \u003cstrong\u003e{{parentData}}\u003c/strong\u003e \u003cbr /\u003e \u003cbr /\u003e \u003cbr /\u003e\n\n  \u003c!-- \u003cu\u003ebind / Get Parent Data in Child alias based method\u003c/u\u003e:\n  Hello \u003cstrong\u003e{{parentName}}\u003c/strong\u003e \u003cbr /\u003e\u003cbr /\u003e --\u003e\n  \n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/15.1.component-communication-parent-child-input.png\" alt=\"Image - Output - component communication parent to child with input decorator\" title=\"Image - Output - component communication parent to child with input decorator\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - component communication parent to child with input decorator\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n15.2. Child to parent communication with @Ouput() decorator:\n------------------------------\n1. Child component class/.ts file - Create child output event to send to parent by using EventEmitter class\n2. Child component class/.ts file - Create child event handler function and emit some events/message\n3. Child view/.html file - Create a button element to fire child event handler function\n4. Parent view/.html file - In child selector tag capture child event, example: `\u003capp-component-demo15-childparent (childEvent)=\"messageChild=($event)\"\u003e\u003c/app-component-demo15-childparent\u003e`\n5. Parent view/.html file - Bind the messageChild property in view `\u003cu\u003eParent component showing message from child component\u003c/u\u003e: \u003cstrong\u003e{{messageChild}}\u003c/strong\u003e`\n\n\u003e **Syntax \u0026 Example**: child component - component-demo15-childparent.component.ts\n```ts\nimport { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo15-childparent',\n  templateUrl: './component-demo15-childparent.component.html',\n  styleUrls: ['./component-demo15-childparent.component.css']\n})\nexport class ComponentDemo15ChildparentComponent implements OnInit {\n  // parent to child \n\n  // receive data data/value coming from parent component\n  @Input() public parentData;\n  // @Input() public parentName;\n\n  // alias based method\n  // @Input('parentData') public parentName;\n\n  // child to parent\n\n  // create child event to send to parent\n  @Output() public childEvent = new EventEmitter();\n\n  // child event handler function\n  childFireEvent() {\n    this.childEvent.emit(\"Message from Child to Parent\");\n  }\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: child component - component-demo15-childparent.component.html\n```html\n\u003cdiv\u003e\n    \u003ch1\u003ecomponent-demo15-childparent works!\u003c/h1\u003e\n    \u003c!-- child to parent --\u003e\n\n    \u003c!-- Fire child event on button click --\u003e\n    \u003cbutton (click)=\"childFireEvent()\"\u003eSend Child Event to Parent\u003c/button\u003e\n\u003c/div\u003e\n```\n\n\u003e **Syntax \u0026 Example**: parent component - app.component.ts\n```ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  // create a property to send from parent to child\n  parentMessage = 'From Parent';\n  \n  // child to parent\n  messageChild;\n}\n```\n\n\u003e **Syntax \u0026 Example**: parent component - app.component.html\n```html\n\u003c!-- component interaction - parent to child and child to parent communication --\u003e\n\n\u003c!-- send property from parent to child - include in child element component selector --\u003e\n\u003capp-component-demo15-childparent [parentData]=\"parentMessage\" (childEvent)=\"messageChild=($event)\"\u003e\u003c/app-component-demo15-childparent\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/15.2.component-communication-child-parent-ouput.png\" alt=\"Image - Output - component communication child to parent with ouput decorator\" title=\"Image - Output - component communication child to parent with ouput decorator\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - component communication child to parent with ouput decorator\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n16 Pipes\n=====================\n- Pipes (Filters) helps to `transform data before displaying to view`\n- Pipes (Filters) can be added in AngularJS to format data\n- Pipes (Filters) is denoted by `piping |` symbol\n- There are many built-in/default pipes available in angular like: `String related pipes` (uppercase, lowercase), `Number related pipes` (number), `Currency` pipes, `Date` pipes, `JSON` pipes. \n- We can also create custom pipes as per out requirements with `Pipe, PipeTransform class \u0026 transform method`\n\n\u003e **Syntax \u0026 Example**: component-demo16-pipesfilters.component.ts\n```ts\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-component-demo16-pipesfilters',\n  templateUrl: './component-demo16-pipesfilters.component.html',\n  styleUrls: ['./component-demo16-pipesfilters.component.css']\n})\nexport class ComponentDemo16PipesfiltersComponent implements OnInit {\n  public nameText = 'Angular js';\n  public messageText = 'Welcome to Angularjs';\n  public greetingText = 'angular 2/4/5/6 is component based';\n\n  public objTechnology = {\n    'firstName': 'angular',\n    'lastName': 'js',\n    'version': 6.0\n  }\n\n  public number1 = 5.786;\n\n  public currentDate = Date();\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo16-pipesfilters.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo16-pipesfilters works!\u003c/h1\u003e\n\n  \u003ch2\u003epipes\u003c/h2\u003e\n  \n  \u003ch2\u003eString based Pipes : Format string\u003c/h2\u003e\n  uppercase: {{ nameText | uppercase }} \u003cbr /\u003e\n  lowercase: {{ messageText | lowercase }} \u003cbr /\u003e\n  titlecase: {{ greetingText | titlecase }} \u003cbr /\u003e\n\n  slice:start:end (not including that letter): {{ greetingText | slice:8}} \u003cbr /\u003e\n  \u003c!-- slice:starting point:limit/up to (not including that letter) --\u003e\n  slice:start:end (not including that letter): {{ greetingText | slice:14:15}} \u003cbr /\u003e\n\n  \u003ch2\u003eJSON Pipes - Shows json representation of an object\u003c/h2\u003e\n  json: {{ objTechnology | json }} \u003cbr /\u003e\n\n  \u003ch2\u003eNumber Pipes - Format Number, Integers\u003c/h2\u003e\n  \u003c!-- min integer digit. min decimal digit - max decimal digit. --\u003e\n  number (min integer digit. min decimal digit - max decimal digit): {{ 5.29898 | number:\"1.2-3\" }} \u003cbr /\u003e\n  number (min integer digit. min decimal digit - max decimal digit): {{ 5.29898 | number:\"2.2-2\" }} \u003cbr /\u003e\n\n  percent: {{ 0.29898 | percent }} \u003cbr /\u003e\n\n  \u003ch2\u003eCurrency Pipes - Transform Currency values\u003c/h2\u003e\n  currency: {{ 0.29898 | currency }}\u003cbr /\u003e\n  currency: {{ 0.29898 | currency:'Rs.' }} \u003cbr /\u003e\n  currency: {{ 0.29898 | currency:'GBP' }} \u003cbr /\u003e\n  currency: {{ 0.29898 | currency:'GBP':'code' }} \u003cbr /\u003e\n\n  \u003ch2\u003eDate Pipes - Transform Date\u003c/h2\u003e\n  Date: {{ currentDate }}\u003cbr /\u003e\n\n  date:short: {{ currentDate | date:'short' }}\u003cbr /\u003e\n  date:shortDate: {{ currentDate | date:'shortDate' }}\u003cbr /\u003e\n  date:shortTime: {{ currentDate | date:'shortTime' }} \u003cbr /\u003e \u003cbr /\u003e\n\n  date:medium: {{ currentDate | date:'medium' }}\u003cbr /\u003e\n  date:mediumDate: {{ currentDate | date:'mediumDate' }}\u003cbr /\u003e\n  date:mediumTime: {{ currentDate | date:'mediumTime' }}\u003cbr /\u003e \u003cbr /\u003e\n\n  date:long: {{ currentDate | date:'long' }}\u003cbr /\u003e\n  date:longDate: {{ currentDate | date:'longDate' }}\u003cbr /\u003e\n  date:longTime: {{ currentDate | date:'longTime' }}\u003cbr /\u003e \u003cbr /\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/16.pipes-filters.png\" alt=\"Image - Output - Transform/Format data with pipes\" title=\"Image - Output - Transform/Format data with pipes\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - Transform/Format data with pipes\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n17 Services\n=====================\n- Programming Principles:\n    - **DRY** - Do not repeat yourself (DRY) - Avoid making copies of data in different files. (example: List \u0026 Details components using same employee object created twice in respective class file)\n    - **SRP** - Single Responsibility Principles (one class/function should perform one task/responsibility)\n    - **KISS** - Keep It Simple Stupid!\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, Repeatative 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\n18 Dependency Injection DI\n=====================\n- Drawback of code without Dependency Injection (DI):\n    - Code is not flexible\n    - If main code (dependencies) changed we need to check and change our code\n    - Code is not suitable for testing\n- Dependency Injection (DI) as a design pattern\n    - Dependency Injection DI is a coding pattern/standard in which a class receives its required dependencies from external sources rather than creating them itself to avoid tight coupling\n- Dependency Injection (DI) as a Framework - Register all dependencies with Injector a central place/container\n    - 3 steps involved to create and use service in angular:\n        1. Define the Service class \n        2. Register with Injector\n        3. Declare as a dependency in List and Details both component\n- `@Injectable()` decorator tells angular that this service might itself have injected dependencies\n\n19 Using a Service\n=====================\n- 3 steps involved to create and use service in angular:\n    1. Define the Service class \n    2. Register with Injector\n    3. Declare as a dependency in List and Details both component\n    \u0026nbsp;  \n\n1.Define the Service class \n---------------------\n1. Create service (which is responsible for providing employee data) with the command `\"ng g s employee\"` OR `\"ng generate service employee\"`\n\n\u003e **Syntax \u0026 Example**: employee.service.ts\n```ts\nimport { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class EmployeeService {\n  // 1.1. create a new method which holds employee data\n  getEmployees() {\n    return [\n      { 'id': 1, 'name': 'Amitabh', 'age': 75, 'city': 'Alahabad' },\n      { 'id': 2, 'name': 'Akshay', 'age': 55, 'city': 'Delhi' },\n      { 'id': 3, 'name': 'RajaniKanth', 'age': 73, 'city': 'Chennai' },\n      { 'id': 4, 'name': 'Rajesh Khanna', 'age': 85, 'city': 'Kolkatta' }\n    ]\n  }\n\n  constructor() { }\n\n}\n```\n\n2.Register with Injector\n--------------------- \n2. Register with Injector in app module file `'app.module.ts'`\n\n\u003e **Syntax \u0026 Example**: app.module.ts\n```ts \n// 2.1. import custom created service to Register with Injector\nimport { EmployeeService } from './services/employee.service';\n\n// 2.2. import service in providers its compulsion to insert services in the provider's array\nproviders: [ EmployeeService ]\n```\n\n3.Declare as a dependency in both List and Details component\n---------------------\n3. import service in necessary component files - Declare as dependency in constructor\nemployee-list.component.ts \u0026 employee-details.component.ts\n\n\u003e **Syntax \u0026 Example**: component-demo191-serviceemployeelist.component.ts \u0026 component-demo192-serviceemployeedetails.component.ts\n```ts\nimport { Component, OnInit } from '@angular/core';\n\n// 3.1. import service in necessary component files - Declared as dependency\nimport { EmployeeService } from '../../services/employee.service';\n\n@Component({\n  selector: 'app-component-demo191-serviceemployeelist',\n  templateUrl: './component-demo191-serviceemployeelist.component.html',\n  styleUrls: ['./component-demo191-serviceemployeelist.component.css']\n})\nexport class ComponentDemo191ServiceemployeelistComponent implements OnInit {\n  // 3.3. define an empty local employees array which will hold employees data after service all\n  public employees = [];\n\n  // 3.2. refer to service with local variable as dependency in constructor\n  constructor(private employeeService: EmployeeService) { }\n\n  ngOnInit() {\n    // 3.4. on component initialization get values from service method\n    this.employees = this.employeeService.getEmployees();\n  }\n\n}\n```\n\n4.Add Markup and bind required data in template/view - employee-list.component.html (component-demo191-serviceemployeelist.component.html) file:\n---------------------\n\u003e **Syntax \u0026 Example**: \n```html\n\u003ch2\u003eEmployee list:\u003c/h2\u003e\n\u003cul\u003e\n    \u003cli *ngFor=\"let employee of employees\"\u003e\n        {{employee.id}} {{employee.name}} \n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n5.Add Markup and bind required data in template/view - employee-details.component.html file: component-demo192-serviceemployeedetails.component.html\n---------------------\n\u003e **Syntax \u0026 Example**: \n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo192-serviceemployeedetails works!\u003c/h1\u003e\n\n  \u003ch2\u003eEmployee Details list:\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli *ngFor=\"let employee of employees\"\u003e\n      {{employee.id}} {{employee.name}} {{employee.age}} {{employee.city}}\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/19-services-1-folder-structure.png\" alt=\"Image - Output - services and component folder structure\" title=\"Image - Output - services and component folder structure\" width=\"500\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - services and component folder structure\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_angular7/19-services-2.png\" alt=\"Image - Output - single service used in multiple component as per logic and requirement\" title=\"Image - Output - single service used in multiple component as per logic and requirement\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - single service used in multiple component as per logic and requirement\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n20 HTTP and Observables\n=====================\n- Http services are used to fetch the data from web server (instead of using hard coded data/json files)\n\n20.1. Http Mechanism: \n---------------------\n1. Send http request \n2. Receive and process http response\n\n### Request: \nComponent file calls -\u003e Service -\u003e Get -\u003e HTTP -\u003e request -\u003e server (DB)\n\n### Response: \nComponent file calls \u003c- Service (cast data) \u003c- Observable \u003c- HTTP \u003c- response \u003c- server (DB)\n\n### Observables: \nThe response/results/returns which we get from the HTTP call is nothing but an Observables. The service needs to cast Observables into an Array/Object and then pass to the required components.\n\n20.2. What exactly are Observables?\n---------------------\n- A sequence of data/items that arrive asynchronously over time\n- HTTP Call = Single item and Single item = HTTP response\n- Observables are HTTP response which arrives asynchronously\n\n20.3. HTTP, Observables, and RxJS:\n---------------------\n- 4 steps to fetch data from HTTP \u0026 observables:\n    1. HTTP Get request from service\n    2. Receive the observable and cast it into an array/Object\n    3. Subscribe to the observable from List and Details component class\n    4. Assign the received array/Object to a local variable\n\n20.4. RxJS\n---------------------\n- Reactive Extensions for JavaScript\n- External library to work with Observables \n- No-where related to ReactJS library from Facebook\n\n21 Fetch Data Using HTTP and Observables\n=====================\n- Http \u0026 HttpClientModule:\n- Till Angular 4 - Http module used\n- In Angular 5 - HttpClientModule used (HttpClientModule provides simplified APIs to work with http functionality)\n- We know an Observables are return as result of a http call, to handle an exceptions on observables we make a use of 'catch' operator\n\u003cbr /\u003e\u003cbr /\u003e\n- 4 steps to fetch data from http \u0026 observables:\n    1. HTTP Get request from service\n    2. Receive the observable and cast it into an array/Object\n    3. Subscribe to the observable from List and Details component class\n    4. Assign the received array/Object to local variable\n- create a custom service to handle http data with command: ng g s employeeHttp\n\n1.HTTP Get request from service\n---------------------\n\u003e **Syntax \u0026 Example**: 1. app.module.ts\n```ts\n // import HttpClientModule and add to imports array\n    // 1a. import HttpClientModule\n    import { HttpClientModule } from '@angular/common/http'\n\n    // 1b. add to imports array\n    imports: [\n        BrowserModule,\n        BrowserAnimationsModule,\n        FormsModule,\n        HttpClientModule\n    ],\n     \n    // 1c. import custom created service Register with Injector\n    import { EmployeeHttpService } from './employee-http.service';\n\n    // import service in providers\n    providers: [EmployeeService, EmployeeHttpService],\n```\n\n2.Receive the observable and cast it into an array/Object\n---------------------\n\u003e **Syntax \u0026 Example**: 2. employee-http.service.ts\n```ts\nimport { Injectable } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { Observable } from 'rxjs';\nimport { IEmployee } from '../models/iemployee';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class EmployeehttpService {\n  // 2c. create json data file\n  private jsonUrl:string= \"/assets/data/employees.json\";\n\n  // 2a. create local variable for HttpClient as DI\n  constructor(private httpClient: HttpClient) { }\n\n  // 2b. http get\n  getEmployees(): Observable\u003cIEmployee[]\u003e {\n    return this.httpClient.get\u003cIEmployee[]\u003e(this.jsonUrl);\n  }\n  \n}\n\n/* \n// 2a. create local variable for HttpClient as DI\n    constructor(private _HttpClient:HttpClient) { }\n\n    import { HttpClient } from '@angular/common/http';\n\n    // 2b. in a getEmployees method make get request\n    // getEmployees(){\n    //   return this._HttpClient.get(_jsonUrl);\n    // }\n\n    // 2b. http get\n    getEmployees():Observable\u003cIEmployee[]\u003e{\n        return this._HttpClient.get\u003cIEmployee[]\u003e(this._jsonUrl);\n    }\n\n    // 2c. create json data file\n    private _jsonUrl:string= \"/assets/data/employees.json\";\n\n    // import model/interface file\n    import { IEmployee } from './employee-model-interface';\n    import { Observable } from 'rxjs/Observable';\n*/\n```\n\n\u003e **Syntax \u0026 Example**: 3. ceate employees.json data file inside assets/data folder\n```json\n[\n    { \"id\": 1, \"name\": \"Amitabh\", \"age\": 75, \"city\": \"Alahabad\" },\n    { \"id\": 2, \"name\": \"Akshay\", \"age\": 55, \"city\": \"Delhi\" },\n    { \"id\": 3, \"name\": \"RajaniKanth\", \"age\": 73, \"city\": \"Chennai\" },\n    { \"id\": 4, \"name\": \"Rajesh Khanna\", \"age\": 85, \"city\": \"Kolkatta\" }\n]\n\n[\n    {\"id\":1, \"name\":\"Ratan Tata\", \"age\":75},\n    {\"id\":2, \"name\":\"Adi Godrej\", \"age\":65},\n    {\"id\":3, \"name\":\"K M Birla\", \"age\":55},\n    {\"id\":4, \"name\":\"Laxmi Mittal\", \"age\":58},\n    {\"id\":5, \"name\":\"Chanda Kochar\", \"age\":50},\n    {\"id\":6, \"name\":\"Amitabh B\", \"age\":76}\n]\n```\n\n\u003e **Syntax \u0026 Example**: 4. create IEmployee.ts an employee model/interface file to store exact data types and rules\n```ts\nexport interface IEmployee {\n    id:number;\n    name:string;\n    age:number\n}\n```\n\n3.Subscribe to the observable from List and Details component class\u003cbr/\u003e\n4.Assign the received array/Object to local variable\n---------------------\n\u003e **Syntax \u0026 Example**: 3. employee-http-list.component.ts\n```ts\nimport { Component, OnInit } from '@angular/core';\nimport { EmployeehttpService } from '../services/employeehttp.service';\n\n@Component({\n  selector: 'app-component-demo211-httpemployeelist',\n  templateUrl: './component-demo211-httpemployeelist.component.html',\n  styleUrls: ['./component-demo211-httpemployeelist.component.css']\n})\nexport class ComponentDemo211HttpemployeelistComponent implements OnInit {\n  public employees = [];\n\n  constructor(private employeehttpService: EmployeehttpService) { }\n\n  ngOnInit() {\n    // on component initialization get value from http subscribe\n    // data =\u003e: argument of the function\n    // this.employees = data: body of the function\n    // subscribe: to receive data\n    this.employeehttpService.getEmployees().subscribe(data =\u003e this.employees = data)\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: component-demo211-httpemployeelist.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo211-httpemployeelist works!\u003c/h1\u003e\n\n  \u003ch2\u003eHTTP Services and Observables\u003c/h2\u003e\n\n  \u003ch2\u003eEmployee HTTP Observables list:\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli *ngFor=\"let employee of employees\"\u003e\n      {{employee.id}} {{employee.name}}\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\n\u003c/div\u003e\n```\n\n\u003e **Syntax \u0026 Example**: component-demo212-httpemployee-details.component.html\n```html\n\u003cdiv\u003e\n  \u003ch1\u003ecomponent-demo212-httpemployee-details works!\u003c/h1\u003e\n\n  \u003ch2\u003eEmployee HTTP Observables Details list:\u003c/h2\u003e\n  \u003cul\u003e\n    \u003cli *ngFor=\"let employee of employees\"\u003e\n      {{employee.id}} {{employee.name}} {{employee.age}} {{employee.city}}\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/21.http-observables-1-folder-structure.png\" alt=\"Image - Output - http-observables services and component folder structure\" title=\"Image - Output - http-observables services and component folder structure\" width=\"500\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - http-observables services and component folder structure\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_angular7/21.http-observables-2.png\" alt=\"Image - Output - http-observables\" title=\"Image - Output - http-observables\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - http-observables\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n22 Creating Custom Directives\n=====================\n- We know that Directives are an `instructions in the DOM`, they specify how to place your components and business logic in the Angular\n- There are many inbuilt structural directives like `ngIf`, `ngSwitch` and `ngFor` used widely in angular\n- We can also create custom directives to implement some common logic/functionality (not existing) as a class `declared as @directive` \n\nLet's create a custom attribute directive to highlight text with blue color \u0026 italic style\n---------------------\n1. The command to create directive: `ng generate directive name` OR `ng g directive name`.\n    1. In the current app, we want to create all custom directives under `directives` folder so use command as: `ng generate directive directives/blueHighlight`\n    2. The above command will generate and update the following:\n```\n    CREATE src/app/directives/blue-highlight.directive.spec.ts (253 bytes)\n    CREATE src/app/directives/blue-highlight.directive.ts (155 bytes)\n    UPDATE src/app/app.module.ts (4690 bytes)\n```\n\u003e **Syntax \u0026 Example**: app.module.ts will be updated automatically with new directive entry\n```ts\n// 22. directives - import custom created directives\nimport { BlueHighlightDirective } from './directives/blue-highlight.directive';\n\ndeclarations: [\n    BlueHighlightDirective\n],\n```\n\n2. Once directive created, in `blue-highlight.directive.ts` assign/change selector name from `appBlueHighlight` to `\"blueHighlight\"` or so. \n    1. Open any component html file and use `\"blueHighlight\"` directive as a attribute (i am trying in app.component.html):  `\u003ch1 blueHighlight\u003e Hello World! I am custom directive \u003c/h1\u003e`\n    2. To target, get or capture the current html element we can import and use `ElementRef` and `nativeElement` utilities\n\n3. Directives called before the element is rendered so it's advisable to perform all content related actions inside `ngOnInit()` life cycle hook\n\n\u003e **Syntax \u0026 Example**: blue-highlight.directive.ts\n```ts\nimport { Directive, ElementRef } from '@angular/core';\n\n@Directive({\n  selector: '[blueHighlight]'\n})\nexport class BlueHighlightDirective {\n\n  constructor(private elem:ElementRef) { \n    console.log('current Element:', elem);\n    // elem.nativeElement.innerText= 'Dynamic text innerHTML';\n    elem.nativeElement.style.color = `#0000ff`;\n    elem.nativeElement.style.fontStyle = 'italic';\n    elem.nativeElement.style.backgroundColor   = '#c7c7ff';\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- custom directive  --\u003e\n\u003ch1\u003e 22 Hello World! Lets learn custom directive \u003c/h1\u003e\n\n\u003cli blueHighlight\u003e I am custom directive \u003c/li\u003e\n\n\u003cp\u003eThe command to create directive: \u003cspan blueHighlight\u003e`ng generate directive blueHighlight`\u003c/span\u003e OR \u003cspan blueHighlight\u003e`ng g directive blueHighlight`\u003c/span\u003e. In current app we want to create all custom directives under `directives` folder so use command as: \u003cspan blueHighlight\u003e`ng generate directive directives/blueHighlight`\u003c/span\u003e. Above command will Genreate and Update following: \u003cbr/\u003e\n\u003cbr/\u003e\n\u003cspan blueHighlight\u003eCREATE\u003c/span\u003e src/app/directives/blue-highlight.directive.spec.ts (253 bytes) \u003cbr/\u003e\n\u003cspan blueHighlight\u003eCREATE\u003c/span\u003e src/app/directives/blue-highlight.directive.ts (155 bytes) \u003cbr/\u003e\n\u003cspan blueHighlight\u003eUPDATE\u003c/span\u003e src/app/app.module.ts (4690 bytes) \u003cbr/\u003e\n\u003c/p\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/22.1.custom-directives-folder-structure.png\" alt=\"Image - Output - custom-directives folder structure\" title=\"Image - Output - custom-directives folder structure\" width=\"500\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - custom-directives folder structure\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_angular7/22.2.custom-directives-elementref-nativelement.png\" alt=\"Image - Output - custom-directives elementref nativelement\" title=\"Image - Output - custom-directives elementref nativelement\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - custom-directives elementref nativelement\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_angular7/22.3.custom-directives-elementref-nativelement-styles.png\" alt=\"Image - Output - custom-directives elementref nativelement style\" title=\"Image - Output - custom-directives elementref nativelement style\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - custom-directives elementref nativelement style\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n23 Custom Directives with Events and HostListener\n=====================\n- In Angular, the `@HostListener() function decorator` allows you to handle events of the host element in the directive class\n- `@HostListener Decorator` declares a DOM event to listen for, and provides a handler method to run when that event occurs\n- Basic syntax of @Hostlistener is:\n    - `@Hostlistener('eventName',[args])` OR `@Hostlistener('target:EVENT',[args])`\n    - **eventName**: The CSS event to listen for\n    - **args**: A set of arguments to pass to the handler method when the event occurs\n\nLet's create a custom attribute directive to highlight text and also have a click event\n---------------------\n1. The command to create directive: `ng generate directive name` OR `ng g directive name`.\n    1. In the current app, we want to create all custom directives under `directives` folder so use command as: `ng generate directive directives/highlightClick`\n    2. The above command will generate and update the following:\n```\n    CREATE src/app/directives/highlight-cilck.directive.spec.ts (257 bytes)\n    CREATE src/app/directives/highlight-cilck.directive.ts (157 bytes)\n    UPDATE src/app/app.module.ts (4855 bytes)\n```\n\u003e **Syntax \u0026 Example**: app.module.ts will be updated automatically with new directive entry\n```ts\n/// 23. directives - import custom created directives\nimport { HighlightCilckDirective } from './directives/highlight-cilck.directive';\n\ndeclarations: [\n    HighlightCilckDirective\n],\n```\n\n2. Once directive created, in `highlight-cilck.directive.ts` assign/change selector name from `appHighlightCilck` to `\"highlightCilck\"` or so. \n    1. Open any component html file and use `\"highlightCilck\"` directive as a attribute (i am trying in app.component.html):  `\u003ch1 highlightCilck\u003e Hello World! I am custom directive with Click\u003c/h1\u003e`\n    2. To target, get or capture the current html element we can import and use `ElementRef` and `nativeElement` with `@HostListener` utilities\n\n\u003e **Syntax \u0026 Example**: blue-highlight.directive.ts\n```ts\nimport { Directive, ElementRef, HostListener } from '@angular/core';\n\n@Directive({\n  selector: '[highlightCilck]'\n})\nexport class HighlightCilckDirective {\n\n  constructor(private elem: ElementRef) {\n    console.log('current Element:', elem);\n    // elem.nativeElement.innerText= 'Dynamic text innerHTML';\n    elem.nativeElement.style.color = `#ff0000`;\n    elem.nativeElement.style.backgroundColor = '#ffd5d5';\n    elem.nativeElement.style.cursor = 'pointer';\n  }\n\n  // element click event - @Hostlistener('eventName',[args])\n  @HostListener('click') showAlert() {\n    window.alert('Custom Directive - @HostListener events!');\n  }\n\n  // use global objects like document/window click - @Hostlistener('target:EVENT',[args])\n  // @HostListener('document:click', ['$event'])\n  // showElementClicked(elem) {\n  //   window.alert('Document Clicked');\n  // }\n}\n```\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- custom directive with @HostListener --\u003e\n  \u003ch1\u003e 23 Hello World! Lets learn custom directive with click \u003c/h1\u003e\n\n  \u003cli highlightCilck\u003e I am custom directive \u003c/li\u003e\n\n  \u003cp\u003eThe command to create directive: \u003cspan highlightCilck\u003e`ng generate directive highlightCilck`\u003c/span\u003e OR \u003cspan highlightCilck\u003e`ng g directive highlightCilck`\u003c/span\u003e. In current app we want to create all custom directives under `directives` folder so use command as: \u003cspan highlightCilck\u003e`ng generate directive directives/highlightCilck`\u003c/span\u003e. Above command will Genreate and Update following: \u003cbr/\u003e\n  \u003cbr/\u003e\n    \u003cspan highlightCilck\u003eCREATE\u003c/span\u003e src/app/directives/blue-highlight.directive.spec.ts (253 bytes) \u003cbr/\u003e\n    \u003cspan highlightCilck\u003eCREATE\u003c/span\u003e src/app/directives/blue-highlight.directive.ts (155 bytes) \u003cbr/\u003e\n    \u003cspan highlightCilck\u003eUPDATE\u003c/span\u003e src/app/app.module.ts (4690 bytes) \u003cbr/\u003e\n  \u003c/p\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/23.1.custom-directives-events-@hostlistener.png\" alt=\"Image - Output - custom-directives events @hostlistener\" title=\"Image - Output - custom-directives events @hostlistener\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - custom-directives events @hostlistener\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n24 Creating Custom Pipes\n=====================\n- We learnt that Pipes (Filters) helps to `transform data before displaying to view`, `format the data`\n- There are many inbuilt pipes like `uppercase`, `number`, `currency` and `date` used widely in angular to transform data\n- We can also create custom pipes as per our requirements with `Pipe, PipeTransform class \u0026 transform method`\n\nLet's create a custom pipe to get the square root of the given number\n---------------------\n1. Inside `app/pipes` folder create a new .ts file named `squareRootPipe.ts`\n2. In `squareRootPipe.ts` to create a custom pipe we need to import `Pipe, PipeTransform class from @angular/core and also use transform method`\n3. Also in the `@Pipe directive` we have to give the name to the current pipe, which will be used in the .html file, like `name: 'squareRootPipe'`\n4. In `app.module.ts` file import and add in declarations `squareRootPipe.ts` as it's created manually\n\n* To create a pipe using angular CLI:\n    - `syntax`: ng generate pipe pipeName OR ng generate pipe path/pipeName\n    - `command`: ng generate pipe pipes/reversText\n* The above command will generate pipe `reversTextPipe.ts` with `@Pipe` decorator, implements `PipeTransform` and also update the src/app/app.module.ts with necessary imports entries\n\n\u003e **Syntax \u0026 Example**: squareRootPipe.ts\n```ts\nimport { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'squareRootPipe'\n})\n\nexport class SquareRootPipe implements PipeTransform {\n  transform(curValue: number): number {\n    return Math.sqrt(curValue);\n  }\n\n}\n```\n\n\u003e **Syntax \u0026 Example**: app.module.ts\n```ts\n// 24. pipes - import custom created pipes\nimport { SquareRootPipe } from './pipes/squareRootPipe';\n\ndeclarations: [\n    SquareRootPipe\n],\n```\n\n\u003e **Syntax \u0026 Example**: app.component.html\n```html\n\u003c!-- custom pipe  --\u003e\n\u003ch1\u003e 24 Lets learn custom pipe to format/transform data \u003c/h1\u003e\n\n\u003cul\u003e\n    \u003cli\u003eSquare Root of 81 is: {{ 81 | squareRootPipe }}\u003c/li\u003e\n    \u003cli\u003eSquare Root of 100 is: {{ 100 | squareRootPipe }}\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"./_images_angular7/24.1.custom-pipes-folder-structure.png\" alt=\"Image - Output - custom-pipes-filters folder structure\" title=\"Image - Output - custom-pipes-filters folder structure\" width=\"500\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - custom-pipes-filters folder structure\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_angular7/24.2.custom-pipes.png\" alt=\"Image - Output - custom-pipes, filters with pipe \u0026 pipeTransform\" title=\"Image - Output - custom-pipes, filters with pipe \u0026 pipeTransform\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image - Output - custom-pipes, filters with pipe \u0026 pipeTransform\u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fangular7-step-by-step-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinanathsj29%2Fangular7-step-by-step-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fangular7-step-by-step-tutorial/lists"}