Title: Angular / Directives

Q: When would you use a directive?::
A: When you would like to extend the behavior of the html tag itself.

Q: How many types of directives are there?::
A: There are 3 types of directive:-
- Components
- Structural directives
- Attribute directives

Q: What is a Component directive?::
A: It is a directive with an associated template.

Q: Which type of directive has an associated template?::
A: The Component directive.

Q: What is a Structural Directive?::
A: A directive that adds or removes elements from the DOM.

Q: Which type of directive removes or adds elements to the DOM?::
A: The Structural Directive.

Q: Which type of directive can modify the appearance of or define a custom behavior of a DOM element?::
A: An Attribute Directive.

Q: What are the 3 structural directives provided by angular?::
A: - ngIf
- ngFor
- ngSwitch

Q: What does the `ngIf` structural directive do?::
A: Adds or removes a `dom` element based on an expression.

Q: Which structural directive adds or removes a portion of the DOM tree based on an expression?::
A: `ngIf`

Q: What does the `ngFor` structural directive do?::
A: Iterates through a list of items and binds each item to a template

Q: Which structural directive iterates through a list of items and binds each item to a template?::
A: `ngFor`

Q: Which structural directive switches between templates and displays each one depending on the condition?::
A: `ngSwitch`

Q: What does the asterisk in an `ngIf` directive indicate?::
`<div *ngIf=""name"">`
A: It indicates that it is a structural directive.

Q: Can the `ngFor` directive observe for changes in the underlying collection?::
A: Yes

Q: What does angular use to keep track of every item in the `ngFor` collection?::
A: An object identity

Q: What is an object identity?::
A: Angular uses it to keep track of every item in the `ngFor` collection.

Q: Can you change the object identity of an `ngFor` collection?::
A: Yes

Q: How can you change the object identity of an `ngFor` collection?::
A: By using the `trackBy` property.

Q: Why does angular keep tracks of object in an `ngFor` collection?::
A: Because any changes to the collection must be synced in the DOM.

Q: Is the `ngSwitch` directive prefixed by an asterisk?::
A: No

Q: What are the three sets of directives related to `ngSwitch`?::
A: - `[ngSwitch]`
- `*ngSwitchCase`
- `*ngSwitchDefault`

Q: What does `*ngSwitchCase` do?::
A: It adds or removes a template based on the value of `[ngSwitch]`.

Q: What does `*ngSwitchDefault` do?::
A: Add a template if there is no match for `*ngSwitchCase`.

Q: What does the following code do?::
```
<ng-template let-courseName="description">
    {courseName}
</ng-template>
```
A: It declares a variable `courseName` that can be used inside the template.

Q: What does `ngTemplateOutlet` do?::
```
<ng-template let-courseName="description">
    {courseName}
</ng-template>
<div *ngTemplateOutlet="blankImage; context: {description: course.description}">
</div>
```
A: `*ngTemplateOutlet` directive instantiates an ng-template.

Q: What does the `@HostBinding` function decorator allow you to do?::
A: It allows you to set the properties of the host element from the directive class.

Q: Which angular decorator allows you to set the properties of the host element from the directives class?::
A: `@HostBinding()`

Q: When would you want to use the `@HostBinding` function decorator in a directive?::
A: If you would like to change the style properties like the height, width, color etc of the host element.

Q: How will you use the `@HostBinding()` function decorator in a directive?::
A: You pass in the name of the host element property whose value you would like to change as the first parameter.

Q: If you want to pass an input to a directive, what should be the name of that input property?::
A: The name of the input property should be the same as the name of the directive selector.

Q: If you would like to use more than one input property for a directive, what should you do?::
A: Declare it as follows:
`@Input('anotherProperty') propertyName`
The directive should use `properyName` for internal purposes, whereas components that use the directive should use `anotherProperty`.

Q: Which angular cli command generates a directive?::
A: `ng generate directive copyright`

Q: How do you declare a directive?::
A: Using the `@Directive` decorator and defining its selector property.

Q: What is the `ElementRef` class?::
A: It gives us access to the host element of the directive.

Q: Which class allows us to manipulate the underlying HTML element attached to the directive?::
A: `ElementRef`

Q: Which property of the `ElementRef` class gives us access to the html element?::
A: `nativeElement`

Q: What does the following code do?::
```
import { Directive, ElementRef } from '@angular/core';
@Directive({
    selector: '[appCopyright]'
    })
    export class CopyrightDirective {
    constructor(el: ElementRef) {
    const currentYear = new Date().getFullYear();
    const targetEl: HTMLElement = el.nativeElement;
    targetEl.classList.add('copyright');
    targetEl.textContent = 'Copyright ©${currentYear} All Rights Reserved.';
    }
```
A: It creates a directive that adds the class 'copyright' to an element.

Q: What is the `@HostBinding` decorator?::
A: It binds a value to an attribute of the host element of the directive.

Q: You would like to assign a value to a property of the host element.::
Which decorator would you use?::
A: `@HostBinding`

Q: You would like to listen to events raised by the host element in a directive.::
Which decorator will you use?::
A: `@HostListener`

Q: What is `$event`?::
`@HostListener('keypress', ['$event']) onKeyPress(event:KeyboardEvent)`::
A: The event object of the triggered event.

Q: What does the `ViewContainerRef` artifact give access to?::
A: It gives us access to the angular view container that hosts a directive.

Q: What is the `ViewContainerRef`?::
A: It is a container where one or more views can be dynamically created and attached as a child of the host element.

Q: When you would like to use a `ViewContainerRef`?::
A: When you would like to dynamically create and add a component and attach it to the view
or when you would like to dynamically create an `ngTemplate`  and attach it to the view.

Q: If the view container creates more than one view, where is the second view added?::
A: The second view is added after the first view

Q: How can you create a new component and add it to the view of a `ViewContainerRef`?::
A: By using its `createComponent` method.

Q: How can you create a new `ngTemplate` and add it to the view of a `ViewContainerRef`?::
A: By using its `createEmbeddedView` method.

Q: What is `TemplateRef`?::
A: `TemplateRef` is a class and the way to reference the `ng-template` in the component or directive class.

Q: You need access to an `ngTemplate` that is declared in your html template.::
How can your directive access that template?::
A: By injecting the `TemplateRef` class.

Q: What is `ngTemplateOutlet`?::
A: It is a structural directive that renders the template.

Q: Which event gets called when Angular initializes the view of the current component and its child components?::
A: `ngAfterViewInit`

Q: When does `ngAfterViewInit` get called?::
A: This is called after angular initializes the view of the current component and its child components.

Q: What is the diff between the following 2 lines of code?::
`<input class="demo" (keyup)="onKeyUp(titleInput.value)" #titleInput />`
`<input class="demo" (keyup)="onKeyUp($event.target.value)" />`
A: They do the same thing. $event is the event object while `titleInput` is the template reference variable.

Q: Write the syntax for `ngFor`.::
A: `*ngFor="let course of courses"`

Q: Write the syntax for `ngFor` with an index parameter.::
A: `*ngFor="let course of courses;index as i"`

Q: Write the syntax for `ngFor` with an index and a first parameter::
A: `*ngFor="let course of courses;index as i; first as isFirst"`

Q: Write the syntax for `ngFor` with an index and a first parameter and a last parameter.::
A: `*ngFor="let course of courses;index as i; first as isFirst; last as isLast"`

Q: Write the syntax for `ngFor` with an index and a first parameter and a last parameter and an even parameter and an odd parameter.::
A: `*ngFor="let course of courses;index as i; first as isFirst; last as isLast; even as isEven; odd as isOdd"`

Q: What happens to the element if the `ngIf` expression returns false?::
A: The element is removed from the page.

Q: What happens to the element if the `ngIf` expression returns true?::
A: The element is added on the page.

Q: What expressions are allowed in `ngIf`?::
A: Any variable, object or function that returns a truthy value.

Q: What does `ngClass` do?::
A: It adds a class to the element.

Q: What does the following do?::
`[ngClass]="'beginner'"`
A: Adds the beginner class to the element.

Q: What does the following do?::
`[ngClass]="['beginner', 'testClass']"`::
A: Adds the `beginner` and `testClass` to the element.

Q: What does the following do?::
`[ngClass]="{'beginner':true, 'course-card':true}"`::
A: It reads the object and applies the class only if true.

Q: What does the following do?::
`[ngClass]=cardClasses()`::
A: It calls the function and the function must return a list of classes.

Q: When should you use `ngClass`?::
A: When we want to add a style depending on the content of the data.

Q: What does the following do?::
`[style.text-decoration]=""'underline'""`::
A: Adds a text-decoration style to the element.

Q: What does the following do?::
`[ngStyle]="{'text-decoration': 'underline'}"`::
A: Add the text-decoration style to the element.

Q: What is an `<ng-container>`?::
A: It is an angular element onto which you can apply a structural directive like `ngIf` or `ngSwitch`.

Q: When should you use an `<ng-container>` tag?::
A: If you find yourself in a situation where you don't have a convenient html element to use with a structural directive.