Title: Angular / Pipes

Q: What do pipes do?::
A: They transform the output of an expression in a template.

Q: What are the various types of built-in angular pipes?::
A: - uppercase/lowercase
- percent
- currency
- slice
- date
- json
- async
- keyvalue

Q: When would you use the `async` pipe?::
A: When data that is handled asynchronously needs to be reflected in our view immediately.

Q: Which pipe would you use when you need to manage data that is handled asynchronously by the component, and that the views promptly reflect those changes?::
A: The `async` pipe.

Q: Which angular command helps generate a new pipe?::
A: `ng generate pipe pipe-name`

Q: What is the only required property of the `@Pipe` decorator?::
A: The name of the pipe.

Q: "What does the following code do?::
`import { Pipe, PipeTransform } from '@angular/core';`
A: Imports the `Pipe` and `PipeTransform` artifact from '@angular/core'.

Q: Which method must a pipe implement?::
A: It must always implement the transform method.

Q: Which method must an angular pipe implement?::
A: The transform method

Q: What are the two parameters that the `PipeTransform` method accepts?::
A: - The input value that needs to be transformed.
- an optional arguments list.

Q: When would you use the `ViewChild` decorator?::
A: When you would like your component to have access to an element in its template.

Q: What does the following code do?::
```
@ViewChild(CourseCardComponent)<br>
card: CourseCardComponent
```
A: Angular searches for a `course-card` component in the template and populates `card`  with a reference to that component.

Q: What happens if you use the following code and there are 2 `course-card` components in the template?::
```
@ViewChild(CourseCardComponent)
card: CourseCardComponent
```
A: Angular selects the first matching `course-card` component.

Q: What does the following do?::
```
@ViewChild('cardRef')
card: CourseCardComponent
```
A: Selects a `course-card` component with a `cardRef` template reference variable.

Q: What does the following code do?::
```
@ViewChild('container')
containerDiv: ElementRef
```
A: Angular queries for the `container` template reference variable in the template file.
`ElementRef` is a type used to represent normal html elements.

Q: What does the following code do?::
```
@ViewChild('cardRef1', {read: ElementRef})
cardComponent1: ElementRef
```
A: Angular queries the template for a `card` component with the template reference variable `cardRef1` and returns the html element of that component.

Q: When will you use the following?::
`@ViewChild('cardRef1', {read: ElementRef})`::
A: When you would like to have a reference to the html element of an angular component used in the template.

Q: When can you be sure that the `@ViewChild` objects are populated with the component objects and can be used safely?::
A: In the `ngAfterViewInit()` function.

Q: Is it advisable to do any data modification in the `NgAfterViewInit` lifecycle hook method?::
A: No you get an error.

Q: What is the difference between `@ViewChild` and `@ViewChildren` decorator?::
A: With `@ViewChild` you can select only one component.
With `@ViewChildren` you can select more than one component.

Q: What does the following do?::
```
@ViewChildren(CourseCardComponent)
cards: QueryList<CourseCardComponent>;
```
A: Creates a view children component for a list of `course-card` components.

Q: Which tag can you use for content projection?::
A: `ng-content`

Q: Explain what does the following do?::
`<ng-content select="img"><ng-content>`::
A: It selects all the `img` tags from the projected content.

Q: Explain what does the following do?::
`<ng-content select=".course-img"><ng-content>`::
A: It selects only tags with class .
`course-img` from the content projection.

Q: Why did angular introduce standalone components, directives and pipes?::
A: Components, directives and pipes need to be associated with a single Angular module in an application.
Standalone components, directives and pipes need not be associated with an Angular module and can be imported into multiple angular modules.

Q: How can you import an existing angular module into a standalone component?::
A: By adding the module to the imports array of the standalone component decorator.

Q: Can you bootstrap an application using standalone components with no angular module?::
A: Yes

Q: What does the following code do?::
```
import {bootstrapApplication} from '@angular/platform-browser';
import {PhotoAppComponent} from './app/photo.app.component';
bootstrapApplication(PhotoAppComponent);
```
A: Bootstraps an angular application with a standalone component.

Q: What is an impure pipe?::
A: An impure pipe is called for every change detection cycle no matter whether the value or parameter(s) change.

Q: What is a pure pipe?::
A: A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe.

Q: What is the difference between pure pipes and impure pipes?::
A: Pure pipes execute when there is a change to the reference of the input variable.
Impure pipes execute whenever the change detection cycle executes.