├── .gitignore ├── Cucumber └── Cucumber.md ├── Java ├── basic │ ├── java-basics.md │ └── java8.md ├── collection │ └── collection-framework.md ├── images │ ├── Life-Cycle-Thread.png │ ├── Shallow-Vs-Deep-cloning.png │ ├── hashMap-internal.png │ └── intermediate and terminal operations.png └── multi-threading │ └── multi-threading.md ├── README.md ├── _config.yml ├── agile └── agile.md ├── angular ├── Angular.md ├── RxJS.md ├── angular-components.md ├── angular-data-binding.md ├── angular-directive.md ├── angular-lazy-loading.md ├── angular-lifecycle-hooks.md ├── angular-pipes.md ├── angular-routing.md ├── angular-services.md ├── images-components │ └── angular-component.png ├── images-directives │ ├── Attributes-Directives.png │ ├── difference-between-directives-components.png │ ├── dom-manipulation.png │ └── types-of-directives.png ├── images-pipes │ ├── Types-of-Pipes.png │ ├── anular-pipes.png │ └── student-table-output.png ├── images-routing │ ├── 1.1-spa-single-page-app-home.png │ ├── 1.2-spa-single-page-app-departments.png │ ├── 1.3-spa-single-page-app-employees.png │ ├── 1.4-spa-single-page-app-products.png │ ├── 1.5-spa-single-page-app-folder-structure.png │ ├── 2.1-wildcard-route.png │ ├── 2.2-wildcard-route.png │ ├── 3.1-route-parameters-department-list-home.png │ ├── 3.2-route-parameters-department-clicked.png │ ├── 4.1-route-parameters-previous.png │ ├── 4.2-route-parameters-next.png │ ├── 4.3-route-parammap-observable-next.png │ ├── 5.1-optional-route-parameters-back.png │ ├── 5.2-optional-route-parameters-selected-list.png │ ├── 7.1-department-list.png │ ├── 7.2-child-route-department-overview.png │ ├── 7.3-child-route-department-contact.png │ ├── 7.4-optional-route-param-active-highlight.png │ └── angular-logo-1.png └── lifecycle │ └── lifecycle-hooks.webp ├── aws ├── AwsLambda.md ├── aws.md └── images │ ├── CloudWatch dashboard.png │ ├── CloudWatch-Metrics.png │ ├── Cost and usage report showing monthly costs grouped by service.png │ ├── Cost and usage.png │ ├── RI Coverage report.png │ ├── RI Utilization report.png │ ├── S3 Storage Classes.png │ └── lambda.png ├── database ├── Queries.md └── database.md ├── design-pattern ├── behavioral-design-pattern.md ├── creational-design-pattern.md ├── design-pattern.md └── structural-design-pattern.md ├── devops ├── docker │ └── docker.md ├── git │ └── git.md ├── jenkins │ ├── images │ │ ├── AWS Code Deploy pipeline.png │ │ └── Continuous Delivery Pipeline.png │ └── jenkins.md └── kubernetes │ └── kubernetes.md ├── ds-algo ├── Data-Types.md ├── Problems.md ├── Sorting-algorithms.md ├── Sorting.md ├── data-structure.md └── images │ ├── Arrays.png │ ├── Comparison of Linked Lists with Arrays & Dynamic Arrays.png │ ├── Comparison of Sorting Algorithms.png │ ├── Insertion Sort Average case analysis.png │ ├── Insertion Sort Example.png │ ├── Insertion Sort Implementation.png │ ├── Insertion Sort Worst case analysis.png │ ├── Insertion Sort.png │ ├── LinkedList.png │ ├── collection-hierarchy-2.png │ ├── growth rates.png │ ├── map-hierarchy-2.png │ └── rates of growth.png ├── hibernate └── hibernate.md ├── kafka ├── images │ └── kafka-message-flow.jpeg └── kafka.md ├── maven └── maven.md ├── micro-services ├── API-Gateway.md ├── Security in Microservices.md ├── Transactions.md ├── images-ms │ ├── 2pc implementation for the customer order .png │ ├── 2pc rollback for the customer order .png │ ├── API-Gateway.png │ ├── Beehive-Representation-Microservices.png │ ├── Best Practices in Microservices Architecture.png │ ├── CircuitBreakerImplementation.png │ ├── Client Crendtials Sequence Diagram.png │ ├── Config Server Architecture.png │ ├── Different Layers in a Single Microservice.png │ ├── Encoded JWT Claim.png │ ├── Eureka Registry Screenshot.png │ ├── Five Grants in OAuth 2.0 protocol.png │ ├── Four different roles in OAuth 2.0 protocol.png │ ├── High Level Eureka Architecture.png │ ├── OAuth2 Use in Microservices Context.png │ ├── Saga pattern for a compensation transaction.png │ ├── Saga pattern for the customer order.png │ ├── customer order example with microservices.png │ ├── microservice-architecture.png │ └── monolithic system using a local transactio.png └── micro-services.md ├── misc ├── GoodPractices.md ├── http.md ├── images │ └── cross-site-scripting.svg └── owasp.md ├── mongo-db └── mongo-db.md ├── oop ├── images │ ├── Association vs. Aggregation vs. Composition.png │ ├── Association.png │ ├── Composition.png │ ├── aggregation between a professor and department.png │ ├── default-methods-error.png │ └── two-way association.png └── oops.md ├── react └── react-main.md ├── spring ├── Spring-Transaction-Management.md ├── annotations.md ├── http-Verbs.md ├── images │ └── spring-mvc-flow.png ├── spring-aop.md ├── spring-boot.md ├── spring-mvc.md ├── spring.md └── swagger.md └── unix └── Unix.md /.gitignore: -------------------------------------------------------------------------------- 1 | /.settings/ 2 | /test-output/ 3 | /bin/ 4 | .idea.idea 5 | /.idea 6 | 7 | -------------------------------------------------------------------------------- /Java/images/Life-Cycle-Thread.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilsoni/interviewnotes/caf1fa63490f903cb16fe61df1c441ca5b9f7563/Java/images/Life-Cycle-Thread.png -------------------------------------------------------------------------------- /Java/images/Shallow-Vs-Deep-cloning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilsoni/interviewnotes/caf1fa63490f903cb16fe61df1c441ca5b9f7563/Java/images/Shallow-Vs-Deep-cloning.png -------------------------------------------------------------------------------- /Java/images/hashMap-internal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilsoni/interviewnotes/caf1fa63490f903cb16fe61df1c441ca5b9f7563/Java/images/hashMap-internal.png -------------------------------------------------------------------------------- /Java/images/intermediate and terminal operations.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilsoni/interviewnotes/caf1fa63490f903cb16fe61df1c441ca5b9f7563/Java/images/intermediate and terminal operations.png -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-leap-day 2 | encoding: utf-8 -------------------------------------------------------------------------------- /agile/agile.md: -------------------------------------------------------------------------------- 1 | Agile 2 | ===== 3 | 4 | Agile Scrum Ceremonies 5 | -------------------- 6 | 7 | The four scrum ceremonies are: 8 | 9 | Sprint Planning 10 | -------------------- 11 | Sprint Planning is the scrum ceremony designed to make sure the team is prepared to get the right things done every sprint. 12 | 13 | The scrum team – product owner, development team & scrum master. 14 | 15 | 16 | Daily Scrum 17 | -------------------- 18 | The Daily Scrum is the team’s chance to get together, define a plan for the day’s work, and identify any blockers. 19 | 20 | The Scrum Master and the Development Team. The Product Owner is an optional attendee. On occasion, outside stakeholders can be invited to listen in to the daily scrum. 21 | 22 | Sprint Review 23 | -------------------- 24 | The Sprint Review is the scrum ceremony where all work completed during the sprint can be showcased the stakeholders. 25 | 26 | The scrum team – product owner, development team & scrum master – and typically a mixture of management, outside stakeholders, customers, and even developers from other projects. In terms of who needs to be there, this scrum ceremony is more fluid than the others. The Product Owner and Scrum Master should be discussing who ought to be involved prior to the Sprint Review and work to ensure they’re in attendance. 27 | 28 | Sprint Retrospective 29 | -------------------- 30 | The Sprint Retrospective is the final scrum ceremony in the sequence that allows the team to look back on the work that was just completed and identify items that could be improved. 31 | 32 | The Scrum Master and the Development Team. The Product Owner is an optional attendee. There should be no outside stakeholders involved in the retro. 33 | 34 | 35 | 36 | For more information: 37 | 38 | [The 4 Agile Scrum Ceremonies Explained](https://thedigitalprojectmanager.com/scrum-ceremonies-made-simple/#planning) -------------------------------------------------------------------------------- /angular/angular-components.md: -------------------------------------------------------------------------------- 1 | What Is an Angular Component? 2 | ================== 3 | 4 | 5 | Components are the most basic UI building block of an Angular app which formed a tree of Angular components. These components are subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template. 6 | 7 | ```typescript 8 | import { Component } from '@angular/core'; 9 | 10 | @Component ({ 11 | selector: 'my-app', 12 | template: `
13 |

{{title}}

14 |
Angular components example
15 |
`, 16 | }) 17 | 18 | export class AppComponent { 19 | title: string = 'Welcome to Angular world'; 20 | } 21 | ``` 22 | 23 | 24 | Angular Component = HTML Template + Component Class + Component Metadata 25 | 26 | 27 | 28 | Every Angular application has at least one component that is used to display the data on the view. Technically, a 29 | component is nothing but a simple typescript class and composed of three things as follows: 30 | 31 | 1. Class (Typescript class) 32 | 2. Template (HTML Template or Template URL) 33 | 3. Component Metadata (@Component Decorator) 34 | 35 | Template: 36 | ------------------- 37 | The template is used to define an interface with which the user can interact. As part of that template, you can define 38 | HTML Mark-up; you can also define the directives, and bindings, etc. So in simple words, we can say that the template 39 | renders the view of the application with which the end-user can interact i.e. user interface. 40 | 41 | Class: 42 | ------------------- 43 | The Class is the most important part of a component in which we can write the code which is required for a template to 44 | render in the browser. You can compare this class with any object-oriented programming language classes such as C++, C# 45 | or Java. The angular component class can also contain methods, variables, and properties like other programming 46 | languages. The angular class properties and variables contain the data which will be used by a template to render on the 47 | view. Similarly, the method in an angular class is used to implement the business logic like the method does in other 48 | programming languages. 49 | 50 | Component Metadata: 51 | ------------------- 52 | Metadata is some extra data for a component used by Angular API to execute the component, such as the location of HTML 53 | and CSS files of the component, selector, providers, etc. 54 | 55 | `Note:` Whenever we create any component, we need to define that component in `@NgModule`. 56 | 57 | Components are like the basic building block in an Angular application. Components are defined using the `@component` 58 | decorator. A component has a `selector`, `template`, `style` and other properties, using which it specifies the metadata 59 | required to process the component. 60 | 61 | From the official docs: 62 | 63 | > Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. 64 | Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template. 65 | 66 | 67 | Communication Between Components 68 | ------------------------------- 69 | 70 | There are 4 ways to share data between components: 71 | 72 | 1. Parent to Child: Sharing Data via `Input` 73 | 2. Child to Parent: Sharing Data via `ViewChild` with `AfterViewInit` 74 | 3. Child to Parent: Sharing Data via `Output()` and `EventEmitter` 75 | 4. Unrelated Components: Sharing Data with a `Service` 76 | 77 | 78 | - **Parent to Child: Sharing Data via Input** 79 | 80 | It works by using the `@Input()` decorator to allow data to be passed via the template. 81 | 82 | parent.component.ts 83 | 84 | ```typescript 85 | import { Component } from '@angular/core'; 86 | 87 | @Component({ 88 | selector: 'app-parent', 89 | template: ` 90 | 91 | `, 92 | styleUrls: ['./parent.component.css'] 93 | }) 94 | export class ParentComponent{ 95 | parentMessage = "message from parent" 96 | constructor() { } 97 | } 98 | ``` 99 | 100 | child.component.ts 101 | 102 | ```typescript 103 | import { Component, Input } from '@angular/core'; 104 | 105 | @Component({ 106 | selector: 'app-child', 107 | template: ` 108 | Say {{ message }} 109 | `, 110 | styleUrls: ['./child.component.css'] 111 | }) 112 | export class ChildComponent { 113 | 114 | @Input() childMessage: string; 115 | 116 | constructor() { } 117 | 118 | } 119 | ``` 120 | 121 | - **Child to Parent: Sharing Data via ViewChild** 122 | 123 | `ViewChild` allows a one component to be injected into another, giving the parent access to its attributes and functions. One caveat, however, is that child won’t be available until after the view has been initialized. This means we need to implement the `AfterViewInit` lifecycle hook to receive the data from the child. 124 | 125 | parent.component.ts 126 | ```typescript 127 | import { Component, ViewChild, AfterViewInit } from '@angular/core'; 128 | import { ChildComponent } from "../child/child.component"; 129 | 130 | @Component({ 131 | selector: 'app-parent', 132 | template: ` 133 | Message: {{ message }} 134 | 135 | `, 136 | styleUrls: ['./parent.component.css'] 137 | }) 138 | export class ParentComponent implements AfterViewInit { 139 | 140 | @ViewChild(ChildComponent) child; 141 | 142 | constructor() { } 143 | 144 | message:string; 145 | 146 | ngAfterViewInit() { 147 | this.message = this.child.message 148 | } 149 | } 150 | 151 | ``` 152 | 153 | child.component.ts 154 | 155 | ```typescript 156 | import { Component} from '@angular/core'; 157 | 158 | @Component({ 159 | selector: 'app-child', 160 | template: ` 161 | `, 162 | styleUrls: ['./child.component.css'] 163 | }) 164 | export class ChildComponent { 165 | 166 | message = 'Hola Mundo!'; 167 | 168 | constructor() { } 169 | 170 | } 171 | 172 | ``` 173 | 174 | 175 | - **Child to Parent: Sharing Data via Output() and EventEmitter** 176 | 177 | Another way to share data is to emit data from the child, which can be listened to by the parent. This approach is ideal when you want to share data changes that occur on things like button clicks, form entires, and other user events. 178 | 179 | In the parent, we create a function to receive the message and set it equal to the message variable. 180 | 181 | In the child, we declare a messageEvent variable with the Output decorator and set it equal to a new event emitter. Then we create a function named sendMessage that calls emit on this event with the message we want to send. Lastly, we create a button to trigger this function. 182 | 183 | The parent can now subscribe to this messageEvent that’s outputted by the child component, then run the receive message function whenever this event occurs. 184 | 185 | parent.component.ts 186 | ```typescript 187 | import { Component } from '@angular/core'; 188 | 189 | @Component({ 190 | selector: 'app-parent', 191 | template: ` 192 | Message: {{message}} 193 | 194 | `, 195 | styleUrls: ['./parent.component.css'] 196 | }) 197 | export class ParentComponent { 198 | 199 | constructor() { } 200 | 201 | message:string; 202 | 203 | receiveMessage($event) { 204 | this.message = $event 205 | } 206 | } 207 | ``` 208 | 209 | child.component.ts 210 | 211 | ```typescript 212 | import { Component, Output, EventEmitter } from '@angular/core'; 213 | 214 | @Component({ 215 | selector: 'app-child', 216 | template: ` 217 | 218 | `, 219 | styleUrls: ['./child.component.css'] 220 | }) 221 | 222 | export class ChildComponent { 223 | 224 | message: string = "Hola Mundo!" 225 | 226 | @Output() messageEvent = new EventEmitter(); 227 | 228 | constructor() { } 229 | 230 | sendMessage() { 231 | this.messageEvent.emit(this.message) 232 | } 233 | } 234 | ``` 235 | 236 | - **Unrelated Components: Sharing Data with a Service** 237 | 238 | When passing data between components that lack a direct connection, such as siblings, grandchildren, etc, you should you a shared service. When you have data that should aways been in sync, I find the RxJS BehaviorSubject very useful in this situation. 239 | 240 | You can also use a regular RxJS Subject for sharing data via the service, but here’s why I prefer a `BehaviorSubject`. 241 | 242 | - It will always return the current value on subscription - there is no need to call onnext 243 | - It has a getValue() function to extract the last value as raw data. 244 | - It ensures that the component always receives the most recent data. 245 | 246 | In the service, we create a private `BehaviorSubject` that will hold the current value of the message. We define a currentMessage variable handle this data stream as an observable that will be used by the components. Lastly, we create function that calls next on the `BehaviorSubject` to change its value. 247 | 248 | The parent, child, and sibling components all receive the same treatment. We inject the DataService in the constructor, then subscribe to the currentMessage observable and set its value equal to the message variable. 249 | 250 | Now if we create a function in any one of these components that changes the value of the message. when this function is executed the new data it’s automatically broadcast to all other components. 251 | 252 | data.service.ts 253 | ```typescript 254 | import { Injectable } from '@angular/core'; 255 | import { BehaviorSubject } from 'rxjs'; 256 | 257 | @Injectable() 258 | export class DataService { 259 | 260 | private messageSource = new BehaviorSubject('default message'); 261 | currentMessage = this.messageSource.asObservable(); 262 | 263 | constructor() { } 264 | 265 | changeMessage(message: string) { 266 | this.messageSource.next(message) 267 | } 268 | 269 | } 270 | ``` 271 | parent.component.ts 272 | 273 | 274 | ```typescript 275 | import { Component, OnInit } from '@angular/core'; 276 | import { DataService } from "../data.service"; 277 | import { Subscription } from 'rxjs'; 278 | 279 | @Component({ 280 | selector: 'app-parent', 281 | template: ` 282 | {{message}} 283 | `, 284 | styleUrls: ['./sibling.component.css'] 285 | }) 286 | export class ParentComponent implements OnInit, OnDestroy { 287 | 288 | message:string; 289 | subscription: Subscription; 290 | 291 | constructor(private data: DataService) { } 292 | 293 | ngOnInit() { 294 | this.subscription = this.data.currentMessage.subscribe(message => this.message = message) 295 | } 296 | 297 | ngOnDestroy() { 298 | this.subscription.unsubscribe(); 299 | } 300 | 301 | } 302 | ``` 303 | 304 | sibling.component.ts 305 | 306 | ```typescript 307 | import { Component, OnInit } from '@angular/core'; 308 | import { DataService } from "../data.service"; 309 | import { Subscription } from 'rxjs'; 310 | 311 | @Component({ 312 | selector: 'app-sibling', 313 | template: ` 314 | {{message}} 315 | 316 | `, 317 | styleUrls: ['./sibling.component.css'] 318 | }) 319 | export class SiblingComponent implements OnInit, OnDestroy { 320 | 321 | message:string; 322 | subscription: Subscription; 323 | 324 | constructor(private data: DataService) { } 325 | 326 | ngOnInit() { 327 | this.subscription = this.data.currentMessage.subscribe(message => this.message = message) 328 | } 329 | 330 | ngOnDestroy() { 331 | this.subscription.unsubscribe(); 332 | } 333 | 334 | newMessage() { 335 | this.data.changeMessage("Hello from Sibling") 336 | } 337 | 338 | } 339 | ``` 340 | 341 | 342 | For more information: 343 | 344 | 1. [Angular Components with Examples](https://dotnettutorials.net/lesson/angular-components/) 345 | 2. [Angular Component](https://www.tutorialsteacher.com/angular/angular-component) 346 | 3. [Component interaction](https://angular.io/guide/component-interaction#component-interaction) 347 | 4. [How Angular components communicate?](https://www.thirdrocktechkno.com/blog/how-angular-components-communicate/) 348 | 5. [Sharing Data between Angular Components - Four Methods](https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/) -------------------------------------------------------------------------------- /angular/angular-data-binding.md: -------------------------------------------------------------------------------- 1 | 2 | Angular Data Binding 3 | ==================== 4 | 5 | 6 | Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. 7 | 8 | **From the Component to the DOM** 9 | **1. Interpolation** `{{ value }}`: Adds the value of a property from the component 10 | 11 | ```html 12 |
  • Name: {{ user.name }}
  • 13 |
  • Address: {{ user.address }}
  • 14 | ``` 15 | 16 | **2. Property binding** `[property] = "value"`: The value is passed from the component to the specified property or simple HTML attribute 17 | 18 | ```html 19 | 20 | ``` 21 | 22 | **From the DOM to the Component** 23 | 24 | **3. Event binding** `(event) = "function"`: When a specific DOM event happens (eg.: click, change, keyup), call the specified method in the component 25 | 26 | ```html 27 | 28 | ``` 29 | 30 | **4. Two-way data binding** `[(ngModel)] = "value"`: Two-way data binding allows to have the data flow both ways. For example, in the below code snippet, both the email DOM input and component email property are in sync 31 | 32 | ```html 33 | 34 | ``` 35 | 36 | 37 | For more information: 38 | 39 | [Data Binding in Angular 8](https://www.javatpoint.com/data-binding-in-angular-8) -------------------------------------------------------------------------------- /angular/angular-directive.md: -------------------------------------------------------------------------------- 1 | Angular Directive 2 | ================== 3 | 4 | 5 | Directives are custom HTML attributes which tell angular to change the style or behavior of the Dom elements. When we 6 | say that components are the building blocks of Angular applications, we are actually saying that directives are the 7 | building blocks of Angular applications. 8 | 9 | There are three kinds of directives: 10 | 11 | 1. Components Directives — directives with a template. 12 | 2. Structural Directives — change the DOM layout by adding and removing DOM elements. 13 | 3. Attribute Directives — change the appearance or behavior of an element, component, or another directive. 14 | 15 | 16 | 17 | Directives are instructions in the DOM (Document Object Model). It specifies how to place our business logic in Angular. 18 | The directive is markers on a DOM element that tell Angular to attach a specified behavior to that DOM element or even 19 | transform the DOM element and its children. Mostly directives in Angular starts with ng- where ng stands for Angular, 20 | and it extends the HTML. 21 | 22 | 23 | 24 | 25 | Components Directives: 26 | ---------------- 27 | 28 | Components are the most common of the directives. It contains the details of how the component should be processed, 29 | instantiated, and used at runtime. The component comprises meta-data. 30 | 31 | Every component has Input and Output option to pass between component and its parent HTML elements. 32 | 33 | ```html 34 | 35 | ... 36 | ``` 37 | 38 | For example, 39 | 40 | ```html 41 | 42 | ... 43 | ``` 44 | 45 | Here, list-item is a component and items is the input option. We will learn how to create component and advanced usages 46 | in the later chapters. 47 | 48 | 49 | Structural Directives: 50 | ---------------- 51 | Structural Directives are done in the elements section. These directives are used to manipulate and change the structure 52 | of the DOM elements. Structural directives have a star (*) sign before the directive. Like as,* ngIf, *ngFor, and * 53 | ngSwitch directive. 54 | 55 | - `*ngIf Directive`: The `*ngIf` is used to create or remove a part of the DOM tree depending on a condition. 56 | - `*ngSwitch Directive`: The `*ngSwitch` is like the JavaScript switch. It can display one element from among several 57 | possible elements, based on a switch condition. Angular puts only the selected element into the DOM. 58 | - `*ngFor Directive`: The `*ngFor` directive is used to repeat a part of HTML template once per each item from an 59 | iterable list (Collection). 60 | 61 | ```html 62 | 63 | 64 | ``` 65 | 66 | Example For NgIf: 67 | 68 | ```html 69 | 70 |
    71 | Only render if the *isNeeded* value has true value. 72 |
    73 | 74 |
    {{movie.name}}
    75 | 76 |
    {{movie.name}}
    77 | 78 | 79 |
    {{movie.name}}
    80 |
    81 | 82 | ``` 83 | 84 | Here, `ngIf` is a built-in directive used to add or remove the HTML element in the current HTML document. 85 | 86 | Example For Ngfor: 87 | 88 | ```typescript 89 |
    {{movie.name}}
    90 | 91 | ``` 92 | 93 | ```typescript 94 |
    {{movie.name}}
    95 | 96 | ``` 97 | 98 | ```typescript 99 | {{movie.name}} 100 | ``` 101 | 102 | - The let keyword declares a template input variable that you reference within the template. The input variables in this 103 | example is movie. The parser translates let movie into variables named, let-movie. 104 | - As the NgFor directive loops through the list, it sets and resets properties of its own context 105 | 106 | Example For Ngswitch: 107 | 108 | ```typescript 109 |
    110 | 111 | 112 | 113 |
    114 | 115 | ``` 116 | 117 | The Angular `NgSwitch` is actually a set of cooperating directives: `NgSwitch`, `NgSwitchCase`, and `NgSwitchDefault`. 118 | `NgSwitchCase` and `NgSwitchDefault` are structural directives. You attach them to elements using the asterisk `(*)` 119 | prefix notation. A `NgSwitchCase` displays its host element when its value matches the switch value. 120 | The `NgSwitchDefault` displays its host element when no sibling `NgSwitchCase` matches the switch value. 121 | 122 | 123 | 124 | 125 | Attribute Directives: 126 | ---------------- 127 | 128 | It deals with changing the look and behavior of the DOM element. For example: `ngClass`, `ngStyle` etc. 129 | 130 | - NgClass Directive: The `ngClass` Directive is used to add or remove CSS classes to an element. 131 | - NgStyle Directive: The `ngStyle` Directive facilitates you to modify the style of an HTML element using the 132 | expression. We can also use the `ngStyle` Directive to change the style of our HTML element dynamically 133 | 134 | 135 | 136 | ```html 137 | 138 | 139 | ``` 140 | 141 | For example, 142 | 143 | ```html 144 |

    145 | ``` 146 | 147 | Here, `showToolTip` refers an example directive, which when used in a HTML element will show tips while user hovers the 148 | HTML element. 149 | 150 | We use attribute directives to apply conditional style to elements, show or hide elements or dynamically change the 151 | behavior of a component according to a changing property. 152 | 153 | Angular provides many built-in Attribute Directives like `NgStyle`, `NgClass`, etc. We can also create our own custom 154 | Attribute Directives for our desired functionality. 155 | 156 | `NgStyle` Directive is an Attribute directive used to change the styling of any DOM element on the basis of some 157 | condition. 158 | 159 | ```typescript 160 |

    I am an Attribute Directive < /p> 161 | ``` 162 | 163 | In this code snippet, we are adding a blue background if the value of isBlue variable is true. If the value of `isBlue` 164 | variable is false, then the background of the above element will be red. 165 | 166 | How to Create Custom Directives? 167 | ---------------- 168 | 169 | We can create our custom directives to use in Angular components with the help of the command line. The command which is 170 | used to develop the Directive using the command line is as follows- 171 | 172 | ```typescript 173 | ng g directive name of the Directive 174 | ``` 175 | 176 | For example, 177 | 178 | ```typescript 179 | ng g directive change text 180 | ``` 181 | 182 | It is seen in the command line as given in the below code- 183 | ```typescript 184 | C:\ang-app>ng g directive change text 185 | CREATE src/app/change-text.directive.spec.ts (241 bytes) 186 | CREATE src /app/change-text.directive.ts (149 bytes) 187 | UPDATE src/app/app.module.ts (565 bytes) 188 | ``` 189 | 190 | The above files, i.e., `change-text directive.spec.ts` and `change-text.directive.ts` created and the `app.module.ts` is updated. 191 | 192 | app.module.ts:; 193 | 194 | ```typescript 195 | import { BrowserModule } from ‘@angular/platform-browser’; 196 | import { NgModule } from ‘@angular/core’; 197 | import { AppRoutingModule } from ‘./app-routing.module’; 198 | import { AppComponent } from ‘./app.component’; 199 | import { NewcmpComponent } from ‘. /new-cmp.component’; 200 | import { ChangeTextDirective } from ‘. /change-text.directive’; 201 | @NgModule({ 202 | declarations: [ 203 | AppComponent, 204 | NewCmpComponent, 205 | ChangeTextDirective 206 | ], 207 | Imports: [ 208 | BrowserModule, 209 | AppRoutingModule 210 | ], 211 | providers: [ ], 212 | bootstrap: [AppComponent] 213 | }] 214 | export class AppModule { } 215 | ``` 216 | The `ChangeTextDirective` class has been included in the declarations in the above file. The class is also imported from the file given below- 217 | 218 | Change-text.directive 219 | ```typescript 220 | Import {Directive} from ‘@angular/core’; 221 | @Directive ({ 222 | Selector; ‘[changeText]’ 223 | }) 224 | Export class ChangeTextDirective { 225 | Constructor ( ) { } 226 | } 227 | ``` 228 | The above file has a directive and it also has a selector property. Whatever we define in the selector, the same has to match in the view, where we assign the custom directive. 229 | 230 | In the `app.component.html` view, add the directive as follows- 231 | ```html 232 | 233 |

    234 |

    Welcome to {{title}}.

    235 |
    236 |
    237 | Welcome to {{ title}}. 238 |
    239 | ``` 240 | We will write the changes in `change-text.directive.ts` file as- 241 | 242 | change-text.directive.ts 243 | ```typescript 244 | import { Directive, elementRef} from ‘@angular/core’; 245 | @Directive({ 246 | Selector: ‘[changeText]’’ 247 | }) 248 | Export class ChangeTextDirective { 249 | Constructor(Element: ElementRef) { 250 | Console.log(Element); 251 | Element.nativeElement.innerText= "Text is changed by changeText Directive."; 252 | } 253 | } 254 | ``` 255 | In the above file, there is a class known as `ChangeTextDirective`, and also a constructor. 256 | 257 | 258 | Structural Directive vs Attribute Directive: 259 | ---------------- 260 | 261 | | Structural Directive | Attribute Directive | 262 | | ----------- | ----------- | 263 | | Structural directives are applied to `