Title: Angular / Components

Q: Which decorator would you use to create an angular component?::
A: `@Component`

Q: Which tag in index.html is used to load the main component of the application?::
A: `<app-root></app-root>`

Q: What is the `<app-root></app-root>` tag?::
A: It is used to load the main component of the angular application.

Q: By convention, What is the main component of the angular application?::
A: `AppComponent`

Q: What is the `AppComponent`?::
A: It is the default component of an angular application.

Q: Where is the `AppComponent` registered?::
A: In the `AppModule` defined in the `app.module.ts` file.

Q: Does every component created need to be registered in a module?::
A: Yes except standalone components.

Q: What is the point of the selector property in an angular component decorator?::
A: Angular loads the component when it finds the selector tag in an html template.

Q: What prefix does angular add to a component's selector by default?::
A: `app-`

Q: What is the point of the `templateUrl` property in the angular component decorator?::
A: Defines the path of the component's html template file.

Q: What is the point of the `styleUrls` property of an angular decorator component?::
A: It defines the path to external style sheets of the component.

Q: Can you register a component in more than one module?::
A: A component must be registered with only one Angular module.

Q: By default, in which module does the `ng generate component` command register a component?::
A: `AppModule`

Q: What is a standalone component?::
A: A component that does not need to be registered in an Angular module.

Q: Which cli command creates a standalone angular component?::
A: `ng generate component component-name --standalone`

Q: Which additional properties do standalone components contain?::
A: - standalone
-  imports

Q: Can standalone components import angular modules?::
A: Standalone components can import Angular modules and vice versa.

Q: In which property of an `NgModule` must you register a standalone component?::
A: imports array.

Q: In which property of an `NgModule` must a standalone components not be added?::
A: The declarations array because  standalone components cannot be registered to a single module.

Q: What is the following angular syntax called?::
`<span [innerText]="title"></span>`::
A: Property Binding syntax.

Q: What is `innerText` called and what is `title` called?::
`<span [innerText]="title></span>`::
A: `innerText` is called the target property.
`title` is called the template expression.

Q: What is the following  angular syntax called?::
`<p [class.star]="isLiked"></p>``::
A: Class Property Binding syntax

Q: What is the output of the following code?::
`<p [style.color]="'greenyellow'"></p>`::
A: The paragraph element will have a `greenyellow` color.

Q: What is the output of the following code?::
`<p [style.width.px]="'100'"></p>"`::
A: The paragraph element will be 100 pixels long.

Q: What is the `target event` and what is the `template statement` in the code below?::
`<button (click)=""onClick()"">Click me</button>`::
A: `(click)` is the target event.
`onClick()` is the template statement.

Q: What is `@Input`?::
A: A component input property decorator.

Q: What does the following code define?::
`@Input() name = '"";`::
A: Defines a name property that is an `Input` to the component.

Q: What does this do?::
`<app-product-detail [name]="selectedProduct"></app-product-detail>`::
A: It binds the name property of `app-product-detail` to the `selectedProduct` property of the parent component.

Q: What does this do?::
`<app-product-detail name="Webcam"></app-product-detail>`
A: The string value `Webcam` is bound to the `name` property of `app-product-detail`.

Q: What is `@Output`?::
A: `@Output` is an angular property decorator for emitting events.

Q: What does the following code declare?::
`@Output() bought = new EventEmitter();`::
A: A property called bought that emits events.

Q: What does the following code do?::
`this.bought.emit();`::
A: It emits an event from the component.

Q: Explain the following code?::
```
<app-product-detail [name]="selectedProduct" (bought)="onBuy()"></app-product-detail>
```
A: The name property of app-product-detail is bound to the `selectedProduct` of the parent component.
The bought event of app-product-detail is bound to the `onBuy()` method of the parent component.

Q: What does the following code declare?::
`@Output() bought = new EventEmitter<string>();` ::
A: A property called bought that emits string data.

Q: What does $event mean in the following code do? ::
`<app-product-detail [name]="selectedProduct" (bought)="onBuy($event)">app-product-detail>` ::
A: The $event object is a reserved keyword in Angular.
It contains the payload data that is emitted by the `app-product-detail`.

Q: What is the term in angular for `#product`?::
`<app-product-detail #product [name]="selectedProduct" (bought)="onBuy()"></app-product-detail>` ::
A: template reference variable.

Q: What is View Encapsulation?::
A: View Encapsulation is how angular manages CSS scoping within a component.

Q: How can you change the view encapsulation of a component?::
A: By changing the encapsulation property of the `@Component` decorator.

Q: What are the three View Encapsulation enumeration value?::
A: - Emulated
-  Native
-  None

Q: When is change detection triggered?::
A: - button clicks
- async requests
- setTimeout
- setInterval

Q: Can we change the change detection strategy for a component?::
A: Yes by changing the `changeDetection` property of the `@Component` decorator.

Q: When does change detection cause a problem?::
A: When large amounts of data change rapidly, it can cause a performance problem.

Q: When does `ChangeDetectionStrategy.OnPush` get triggered?::
A: Only when the `@Input` property of the component changes.

Q: What are the most basic angular lifecycle hooks?::
A: `ngOnInit`, `ngOnDestroy`, `ngOnChanges`, `ngAfterViewInit`

Q: What is the general advice towards using constructors in Angular?::
A: Should be relatively empty and devoid of logic.

Q: You need to initialize a component with data from an angular service. ::
Which lifecycle hook in the best place to do it?::
A: The `OnInit` hook - `ngOnInit` method.

Q: When is a component destroyed?::
A: A component is destroyed when it is removed from the DOM.

Q: What should we do in `ngOnDestroy` method?::
A: Perform cleanups:
- Reset timers and intervals
- Unsubscribe from observable streams

Q: When does `ngOnChanges` get called?::
A: When the value of an input data binding has changed.

Q: Can you change the selector prefix 'app' that angular adds by default to a component?::
A: Yes in the `angular.json` file.

Q: Which flag of `ng generate component` should you use to create a standalone component?::
A: `--standalone`

Q: What is class property binding?::
A: Component property bound to `[class.class-name]`.

Q: What is style property binding?::
A: Component property bound to `[style.style-name]`.

Q: Why would you use the `@Input` artifact?::
A: To pass data from one component down to another component.

Q: Which class does the Output decorator use to emit events?::
A: The `EventEmitter` class.

Q: How would you emit an event from a component?::
A: Call the emit method - `this.bought.emit(1);`

Q: Why would you use a template reference variable like `#product`?::
A: In case you would like to access a property of the component elsewhere in the current template.

Q: You would like to access a property of the component elsewhere in the current template.::
How can you access it?::
A: Declare a template reference variable.

Q: Which `ViewEncapsulation` option is the default option?::
A: Emulated

Q: What does the emulated `ViewEncapsulation` option provide?::
A: It simulates a Shadow DOM and encapsulates CSS rules.

Q: Which `ViewEncapsulation` option simulates a Shadow DOM and encapsulates CSS rules?::
A: Emulated

Q: What does the Native option of `ViewEncapsulation` do?::
A: It uses the native browser Shadow DOM.

Q: Which `ViewEncapsulation` option simulates a native browser Shadow DOM?::
A: Native

Q: What limitation does the Native option of `ViewEncapsulation` have?::
A: It works only on browsers that support Shadow DOM.

Q: Which lifecycle hook gets called when angular detects that the value of an input data binding has changed?::
A: `ngOnChanges`

Q: When does the `ngOnChanges` lifecycle hook get called?::
A: Whenever the change detection cycle runs.

Q: What is the first parameter of the `ngOnChanges` method?::
A: `SimpleChanges`

Q: How do you exclude the changes that get triggered on first load of the component?::
A: By calling isFirstChange().
```
ngOnChanges(changes: SimpleChanges): void {
    if (!changes['name'].isFirstChange()) {
    const oldValue = changes['name'].previousValue;
    const newValue = changes['name'].currentValue;
    }
```

Q: When is the `AfterViewInit` lifecycle hook of an angular component called?::
A: - The html template has been initialized.
- The html template of all child components have been initialized.

Q: Which lifecycle hook gets called when the html template of the component has been initialized?::
A: `AfterViewInit`

Q: Which lifecycle hook gets called when the html template of all child components have been initialized?::
A: `ngAfterViewInit`

Q: When would you use the `@ViewChild`?::
A: To get a reference object of a child component in the template.

Q: What does the following code do?::
```
@ViewChild(ProductDetailComponent) productDetail:ProductDetailComponent | undefined;
```
A: Loads the first product-detail component it finds in the template. undefined if it does not find one.

Q: What is the `@ContentChild` decorator?::
A: It helps an angular component have access to the elements inside the projected content i.e ng-content

Q: When should you use `@ContentChild` decorator?::
A: To get access to elements inside ng-content projected by the parent component.

Q: What does the following code do?::
```
@ContentChild(CourseImageComponent)
image: CourseImageComponent
```
A: It looks for the course-image component that should be projected by the parent into ng-content.

Q: What does the following code do?::
```
@ContentChild(CourseImageComponent, {read: ElementRef})
image: ElementRef
```
A: This gives us access to the element itself not the component object inside ng-content.

Q: What does the following code do?::
```
@ContentChildren(CourseImageComponent)
images: QueryList<CourseImageComponent>
```
A: Selects all `<course-image>` component within `ng-content`.

Q: What does the following code do?::
```
<ng-template #blankImage>
No Image
</ng-template>
<ng-content select="course-image" *ngIf="course.iconUrl; else blankImage">
</ng-content>
```
A: It displays "No Image" if there is not `iconUrl`.

Q: What does SimpleChanges contain?::
A: It contains one key for each input property that changes.