Which `npm` command will install the angular cli for version 15?::	`npm install -g @angular/cli@15`
What does the following code do?::<br>`npm install -g @angular/cli@15`::	It will install the version 15 of&nbsp; the`angular/cli`.
Which angular cli command creates a new application?::	`ng new my-app`
What does the following command do?::<br>`ng new my-app`::	It creates a new angular application called my-app.
What is `angular.json`?::	The main configuration file of the angular workspace.
What is the name of the main configuration file of the Angular cli workspace?::	`angular.json`
Which angular cli command starts your angular application?::	`ng serve`
What does ng serve do?::	It starts your web application.
Which file is the main html file of the angular application?::	`index.html`
Which file is the main entry point of the angular application?::	`main.ts`
Which file defines the main module of the angular application?::	`app.module.ts`
What is the main module of angular called?::	`AppModule`
In which file will you find `AppModule`?::	`app.module.ts`
What is the double curly braces syntax called?::	interpolation
What are decorators?::	Allows us to add metadata to class declarations.
How can you recognize a decorator?::	The @ prefix.
How many types of decorators are there?::	- Class decorators<br>- Property decorators<br>-&nbsp; Method decorators<br>-&nbsp; Parameter decorators
When does the class decorator execute?::	The decorator statement is executed before the class gets instantiated.
Which feature does the `BrowserModule` provide to an angular application?::	It allows an angular application to run in the browser.
What properties does `NgModule` accept?::	- declarations<br>-&nbsp; imports<br>-&nbsp; providers<br>-&nbsp; bootstrap
Which angular artifacts can be added to the declarations collection of `NgModule`?::	Components, directives, and pipes.
What does the imports property of `NgModule` contain?::	Other modules and standalone components, directives and pipes.
What does the providers property of `NgModule` contain?::	Services
What does the bootstrap property of `AppModule` define?::	The component that loads on startup.
What are feature modules?::	Modules that represent specific features of the application.
What features does the `CommonModule` provide to an angular application?::	It provides the template syntax features to an angular application.
What is the cli command to generate a module?::	`ng generate module module-name`
How do you expose components from an Angular module?::	Using the exports array of `NgModule`
What features does the `HttpClientModule` provide an angular application?::	It provides features that enable http communication.
What is the `RouterModule`?::	Module that enables navigation in an Angular application.
What features does the `BrowserAnimationsModule` provide to an angular application?::	It provides features that enable UI animations in an Angular application.
Which decorator would you use to create an angular component?::	`@Component`
Which tag in index.html is used to load the main component of the application?::	`&lt;app-root&gt;&lt;/app-root&gt;`
Why would you use the `&lt;app-root&gt;&lt;/app-root&gt;` tag?::<br>What does it do?	It loads the main component of the angular application.
By convention, Which component is created as the default main component of the angular application?::	`AppComponent`
What is the `AppComponent`?::	By convention, it is the default main component of an angular application.
Where is the `AppComponent` registered?::	In the `AppModule` that is defined in the `app.module.ts` file.
Does every component created need to be registered in a module?::	Yes except standalone components.
Why is the selector property mandatory in an angular component?::	Because angular loads the component when it finds the selector in an html template.
"What prefix does angular add to a component's selector by default?::"	`app-`
What does the `templateUrl` property in an angular component define?::	"Defines the path of the component's html template file."
What does the `styleUrls` property of an angular component define?::	It defines the path to external style sheets of the component.
Can you register a component in more than one module?::	No. A component must be registered with only one Angular module.
By default, in which module does the `ng generate component` command register a component?::	`AppModule`
What is a standalone component?::	A component that does not need to be registered in an Angular module.
Which cli command creates a standalone angular component?::	`ng generate component component-name --standalone`
Which additional properties do standalone components contain?::	- standalone<br>-&nbsp; imports
Can standalone components import angular modules?::	Standalone components can import Angular modules and vice versa.
In which property of an `NgModule` must you register a standalone component?::	In the imports property.
In which property of an `NgModule` must a standalone components not be added?::	The declarations property because standalone components cannot be registered to a single module.
"What is the following angular syntax called?::<br>`&lt;span [innerText]=""title""&gt;&lt;/span&gt;`::"	Property Binding Syntax.
"What is `innerText` called and what is `title` called?::<br>`&lt;span [innerText]=""title&gt;&lt;/span&gt;`::"	`innerText` is called the target property. <br>`title` is called the template expression.
"What is the following&nbsp; angular syntax called?::<br>`&lt;p [class.star]=""isLiked""&gt;&lt;/p&gt;``::"	Class Property Binding syntax
"What is the output of the following code?::<br>`&lt;p [style.color]=""'greenyellow'""&gt;&lt;/p&gt;`::"	The paragraph element will have a `greenyellow` color.
"What is the output of the following code?::<br>`&lt;p [style.width.px]=""'100'""&gt;&lt;/p&gt;""`::"	The paragraph element will be 100 pixels long.
"What is the `target event` and what is the `template statement` in the code below?::<br>`&lt;button (click)=""""onClick()""""&gt;Click me&lt;/button&gt;`::"	`(click)` is the target event.<br>`onClick()` is the template statement.
What is `@Input`?::	A component input property decorator.
"What does the following code define?::<br>`@Input() name = '"""";`::"	Defines a name property that is an `Input` to the component.
"What does this do?::<br>`&lt;app-product-detail [name]=""selectedProduct""&gt;&lt;/app-product-detail&gt;`::"	It binds the name property of `app-product-detail` to the `selectedProduct` property of the parent component.
"What does this do?::<br>`&lt;app-product-detail name=""Webcam""&gt;&lt;/app-product-detail&gt;`"	The string value `Webcam` is bound to the `name` property of `app-product-detail`.
What is `@Output`?::	`@Output` is an angular property decorator for emitting events.
What does the following code declare?::<br>`@Output() bought = new EventEmitter();`::	A property called bought that emits events.
What does the following code do?::<br>`this.bought.emit();`::	It emits an event from the component.
"Explain the following code?::<br>```<br>&lt;app-product-detail [name]=""selectedProduct"" (bought)=""onBuy()""&gt;&lt;/app-product-detail&gt;<br>```"	The name property of app-product-detail is bound to the `selectedProduct` of the parent component.<br>The bought event of app-product-detail is bound to the `onBuy()` method of the parent component.
What does the following code declare?::<br>`@Output() bought = new EventEmitter&lt;string&gt;();` ::	A property called bought that emits string data.
"What does $event mean in the following code do? ::<br>`&lt;app-product-detail [name]=""selectedProduct"" (bought)=""onBuy($event)""&gt;app-product-detail&gt;` ::"	The $event object is a reserved keyword in Angular.<br>It contains the payload data that is emitted by the `app-product-detail`.
"What is the term in angular for `#product`?::<br>`&lt;app-product-detail #product [name]=""selectedProduct"" (bought)=""onBuy()""&gt;&lt;/app-product-detail&gt;` ::"	template reference variable.
What is View Encapsulation?::	View Encapsulation is how angular manages CSS scoping within a component.
How can you change the view encapsulation of a component?::	By changing the encapsulation property of the `@Component` decorator.
What are the three View Encapsulation enumeration value?::	- Emulated<br>-&nbsp; Native<br>-&nbsp; None
When is change detection triggered?::	- button clicks<br>- async requests<br>- setTimeout <br>- setInterval
Can we change the change detection strategy for a component?::	Yes by changing the `changeDetection` property of the `@Component` decorator.
When does change detection cause a problem?::	When large amounts of data change rapidly, it can cause a performance problem.
When does `ChangeDetectionStrategy.OnPush` get triggered?::	Only when the `@Input` property of the component changes.
What are the most basic angular lifecycle hooks?::	`ngOnInit`, `ngOnDestroy`, `ngOnChanges`, `ngAfterViewInit`
What is the general advice towards using constructors in Angular?::	Should be relatively empty and devoid of logic.
You need to initialize a component with data from an angular service. ::<br>Which lifecycle hook in the best place to do it?::	The `OnInit` hook - `ngOnInit` method.
When is a component destroyed?::	A component is destroyed when it is removed from the DOM.
What should we do in `ngOnDestroy` method?::	Perform cleanups:<br>- Reset timers and intervals<br>- Unsubscribe from observable streams
When does `ngOnChanges` get called?::	When the value of an input data binding has changed.
"Can you change the selector prefix 'app' that angular adds by default to a component?::"	Yes in the `angular.json` file.
Which flag of `ng generate component` should you use to create a standalone component?::	`--standalone`
What is class property binding?::	Component property bound to `[class.class-name]`.
What is style property binding?::	Component property bound to `[style.style-name]`.
Why would you use the `@Input` artifact?::	To pass data from one component down to another component.
Which class does the Output decorator use to emit events?::	The `EventEmitter` class.
How would you emit an event from a component?::	Call the emit method - `this.bought.emit(1);`
Why would you use a template reference variable like `#product`?::	In case you would like to access a property of the component elsewhere in the current template.
You would like to access a property of the component elsewhere in the current template.::<br>How can you access it?::	Declare a template reference variable.
Which `ViewEncapsulation` option is the default option?::	Emulated
What does the emulated `ViewEncapsulation` option provide?::	It simulates a Shadow DOM and encapsulates CSS rules.
Which `ViewEncapsulation` option simulates a Shadow DOM and encapsulates CSS rules?::	Emulated
What does the Native option of `ViewEncapsulation` do?::	It uses the native browser Shadow DOM.
Which `ViewEncapsulation` option simulates a native browser Shadow DOM?::	Native
What limitation does the Native option of `ViewEncapsulation` have?::	It works only on browsers that support Shadow DOM.
Which lifecycle hook gets called when angular detects that the value of an input data binding has changed?::	`ngOnChanges`
When does the `ngOnChanges` lifecycle hook get called?::	Whenever the change detection cycle runs.
What is the first parameter of the `ngOnChanges` method?::	`SimpleChanges`
How do you exclude the changes that get triggered on first load of the component?::	"By calling isFirstChange().<br>```<br>ngOnChanges(changes: SimpleChanges): void {<br>&nbsp;&nbsp;&nbsp; if (!changes['name'].isFirstChange()) {<br>&nbsp;&nbsp;&nbsp; const oldValue = changes['name'].previousValue;<br>&nbsp;&nbsp;&nbsp; const newValue = changes['name'].currentValue;<br>&nbsp;&nbsp;&nbsp; }<br>```"
When is the `AfterViewInit` lifecycle hook of an angular component called?::	- The html template has been initialized.<br>- The html template of all child components have been initialized.
Which lifecycle hook gets called when the html template of the component has been initialized?::	`AfterViewInit`
Which lifecycle hook gets called when the html template of all child components have been initialized?::	`ngAfterViewInit`
When would you use the `@ViewChild`?::	To get a reference object of a child component in the template.
What does the following code do?::<br>```<br>@ViewChild(ProductDetailComponent) productDetail:ProductDetailComponent | undefined;<br>```	Loads the first product-detail component it finds in the template. undefined if it does not find one.
What is the `@ContentChild` decorator?::	It helps an angular component have access to the elements inside the projected content i.e ng-content
When should you use `@ContentChild` decorator?::	To get access to elements inside ng-content projected by the parent component.
What does the following code do?::<br>```<br>@ContentChild(CourseImageComponent)<br>image: CourseImageComponent<br>```	It looks for the course-image component that should be projected by the parent into ng-content.
What does the following code do?::<br>```<br>@ContentChild(CourseImageComponent, {read: ElementRef})<br>image: ElementRef<br>```	This gives us access to the element itself not the component object inside ng-content.
What does the following code do?::<br>```<br>@ContentChildren(CourseImageComponent)<br>images: QueryList&lt;CourseImageComponent&gt;<br>```	Selects all `&lt;course-image&gt;` component within `ng-content`.
"What does the following code do?::<br>```<br>&lt;ng-template #blankImage&gt;<br>No Image<br>&lt;/ng-template&gt;<br><br>&lt;ng-content select=""course-image"" *ngIf=""course.iconUrl; else blankImage""&gt;<br>&lt;/ng-content&gt;<br>```"	"It displays ""No Image"" if there is not `iconUrl`."
What does SimpleChanges contain?::	It contains one key for each input property that changes.
When would you use a directive?::	When you would like to extend the behavior of the html tag itself.
How many types of directives are there?::	There are 3 types of directive:-<br>- Components<br>- Structural directives<br>- Attribute directives
What is a Component directive?::	It is a directive with an associated template.
Which type of directive has an associated template?::	The Component directive.
What is a Structural Directive?::	A directive that adds or removes elements from the DOM.
Which type of directive removes or adds elements to the DOM?::	The Structural Directive.
Which type of directive can modify the appearance of or define a custom behavior of a DOM element?::	An Attribute Directive.
What are the 3 structural directives provided by angular?::	- ngIf<br>- ngFor<br>- ngSwitch
What does the `ngIf` structural directive do?::	Adds or removes a `dom` element based on an expression.
Which structural directive adds or removes a portion of the DOM tree based on an expression?::	`ngIf`
What does the `ngFor` structural directive do?::	Iterates through a list of items and binds each item to a template
Which structural directive iterates through a list of items and binds each item to a template?::	`ngFor`
Which structural directive switches between templates and displays each one depending on the condition?::	`ngSwitch`
"What does the asterisk in an `ngIf` directive indicate?::<br>`&lt;div *ngIf=""""name""""&gt;`"	It indicates that it is a structural directive.
Can the `ngFor` directive observe for changes in the underlying collection?::	Yes
What does angular use to keep track of every item in the `ngFor` collection?::	An object identity
What is an object identity?::	Angular uses it to keep track of every item in the `ngFor` collection.
Can you change the object identity of an `ngFor` collection?::	Yes
How can you change the object identity of an `ngFor` collection?::	By using the `trackBy` property.
Why does angular keep tracks of object in an `ngFor` collection?::	Because any changes to the collection must be synced in the DOM.
Is the `ngSwitch` directive prefixed by an asterisk?::	No
What are the three sets of directives related to `ngSwitch`?::	- `[ngSwitch]`<br>- `*ngSwitchCase`<br>- `*ngSwitchDefault`
What does `*ngSwitchCase` do?::	It adds or removes a template based on the value of `[ngSwitch]`.
What does `*ngSwitchDefault` do?::	Add a template if there is no match for `*ngSwitchCase`.
"What does the following code do?::<br>```<br>&lt;ng-template let-courseName=""description""&gt;<br>&nbsp;&nbsp;&nbsp; {courseName}<br>&lt;/ng-template&gt;<br>```"	It declares a variable `courseName` that can be used inside the template.
"What does `ngTemplateOutlet` do?::<br>```<br>&lt;ng-template let-courseName=""description""&gt;<br>&nbsp;&nbsp;&nbsp; {courseName}<br>&lt;/ng-template&gt;<br>&lt;div *ngTemplateOutlet=""blankImage; context: {description: course.description}""&gt;<br>&lt;/div&gt;<br>```"	`*ngTemplateOutlet` directive instantiates an ng-template.
What does the `@HostBinding` function decorator allow you to do?::	It allows you to set the properties of the host element from the directive class.
Which angular decorator allows you to set the properties of the host element from the directives class?::	`@HostBinding()`
When would you want to use the `@HostBinding` function decorator in a directive?::	If you would like to change the style properties like the height, width, color etc of the host element.
How will you use the `@HostBinding()` function decorator in a directive?::	You pass in the name of the host element property whose value you would like to change as the first parameter.
If you want to pass an input to a directive, what should be the name of that input property?::	The name of the input property should be the same as the name of the directive selector.
If you would like to use more than one input property for a directive, what should you do?::	"Declare it as follows:<br>`@Input('anotherProperty') propertyName`<br>The directive should use `properyName` for internal purposes, whereas components that use the directive should use `anotherProperty`."
What do pipes do?::	They transform the output of an expression in a template.
What are the various types of built-in angular pipes?::	- uppercase/lowercase<br>- percent<br>- currency<br>- slice<br>- date <br>- json<br>- async<br>- keyvalue
When would you use the `async` pipe?::	When data that is handled asynchronously needs to be reflected in our view immediately.
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?::	The `async` pipe.
Which angular command helps generate a new pipe?::	`ng generate pipe pipe-name`
What is the only required property of the `@Pipe` decorator?::	The name of the pipe.
"""What does the following code do?::<br>`import { Pipe, PipeTransform } from '@angular/core';`"	"Imports the `Pipe` and `PipeTransform` artifact from '@angular/core'."
Which method must a pipe implement?::	It must always implement the transform method.
Which method must an angular pipe implement?::	The transform method
What are the two parameters that the `PipeTransform` method accepts?::	- The input value that needs to be transformed.<br>- an optional arguments list.
When would you use the `ViewChild` decorator?::	When you would like your component to have access to an element in its template.
What does the following code do?::<br>```<br>@ViewChild(CourseCardComponent)&lt;br&gt;<br>card: CourseCardComponent<br>```	Angular searches for a `course-card` component in the template and populates `card`&nbsp; with a reference to that component.
What happens if you use the following code and there are 2 `course-card` components in the template?::<br>```<br>@ViewChild(CourseCardComponent)<br>card: CourseCardComponent<br>```	Angular selects the first matching `course-card` component.
"What does the following do?::<br>```<br>@ViewChild('cardRef')<br>card: CourseCardComponent<br>```"	Selects a `course-card` component with a `cardRef` template reference variable.
"What does the following code do?::<br>```<br>@ViewChild('container')<br>containerDiv: ElementRef<br>```"	Angular queries for the `container` template reference variable in the template file.<br>`ElementRef` is a type used to represent normal html elements.
"What does the following code do?::<br>```<br>@ViewChild('cardRef1', {read: ElementRef})<br>cardComponent1: ElementRef<br>```"	Angular queries the template for a `card` component with the template reference variable `cardRef1` and returns the html element of that component.
"When will you use the following?::<br>`@ViewChild('cardRef1', {read: ElementRef})`::"	When you would like to have a reference to the html element of an angular component used in the template.
When can you be sure that the `@ViewChild` objects are populated with the component objects and can be used safely?::	In the `ngAfterViewInit()` function.
Is it advisable to do any data modification in the `NgAfterViewInit` lifecycle hook method?::	No you get an error.
What is the difference between `@ViewChild` and `@ViewChildren` decorator?::	With `@ViewChild` you can select only one component.<br>With `@ViewChildren` you can select more than one component.
What does the following do?::<br>```<br>@ViewChildren(CourseCardComponent)<br>cards: QueryList&lt;CourseCardComponent&gt;;<br>```	Creates a view children component for a list of `course-card` components.
Which tag can you use for content projection?::	`ng-content`
"Explain what does the following do?::<br>`&lt;ng-content select=""img""&gt;&lt;ng-content&gt;`::"	It selects all the `img` tags from the projected content.
"Explain what does the following do?::<br>`&lt;ng-content select="".course-img""&gt;&lt;ng-content&gt;`::"	It selects only tags with class .<br>`course-img` from the content projection.
Why did angular introduce standalone components, directives and pipes?::	Components, directives and pipes need to be associated with a single Angular module in an application.<br>Standalone components, directives and pipes need not be associated with an Angular module and can be imported into multiple angular modules.
How can you import an existing angular module into a standalone component?::	By adding the module to the imports array of the standalone component decorator.
Can you bootstrap an application using standalone components with no angular module?::	Yes
"What does the following code do?::<br>```<br>import {bootstrapApplication} from '@angular/platform-browser';<br>import {PhotoAppComponent} from './app/photo.app.component';<br>bootstrapApplication(PhotoAppComponent);<br>```"	Bootstraps an angular application with a standalone component.
What is an impure pipe?::	An impure pipe is called for every change detection cycle no matter whether the value or parameter(s) change.
What is a pure pipe?::	A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe.
What is the difference between pure pipes and impure pipes?::	Pure pipes execute when there is a change to the reference of the input variable.<br>Impure pipes execute whenever the change detection cycle executes.
"What does the following code do?::<br>```<br>bootstrapApplication(PhotoAppComponent, { //&lt;1&gt;<br>&nbsp; providers: [<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {provide: BACKEND_URL, useValue: 'https://photoapp.looknongmodules.com/api'}, //&lt;2&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; provideRouter([/* app routes */]), //&lt;3&gt;&nbsp; <br>&nbsp; ]<br>&nbsp; });<br>```"	- Bootstraps the application with `PhotoAppComponent`<br>- Creates the config value BACKEND_URL that `PhotAppComponent` can use<br>- Configures the routes.
In the `bootstapApplication` function, how can you configure routes?::	Pass in the routes to the `provideRouter` function.
"What does the `loadComponent` function do?::<br>```<br>export const ROUTES: Route[] = [<br>&nbsp; { <br>&nbsp;&nbsp;&nbsp; path: 'admin',<br>&nbsp;&nbsp;&nbsp; loadComponent: () =&gt; import('./admin/panel.component').then(mod =&gt; mod.AdminPanelComponent)<br>&nbsp; },<br>&nbsp; ];<br>```"	It configures the admin route to lazy load the component.
Which function can you use to lazy load a standalone component?::	`loadComponent`
"What does `loadChildren` do in the following code?::<br>`{path: 'admin', loadChildren: () =&gt; import('./admin/routes').then(mod =&gt; mod.ADMIN_ROUTES)},`"	`loadChildren` lazy loads all components defined in ADMIN_ROUTES.
"Explain in detail the following code-::<br>```<br>import { NgModule } from '@angular/core'; //&lt;1&gt;<br>import { Routes, RouterModule } from '@angular/router'; //&lt;2&gt;<br><br>const routes: Routes = []; //&lt;3&gt;<br><br>@NgModule({ //&lt;4&gt;<br>&nbsp; imports: [RouterModule.forRoot(routes)],<br>&nbsp; exports: [RouterModule]&lt;br&gt;})<br>&nbsp; <br>export class AppRoutingModule { } //&lt;5&gt;<br>```"	- Imports `NgModule`.<br>- Imports `Routes` and `RouterModule`.<br>- Adds routes array.<br>- Configures `NgModule` decorator.<br>- Exports the `AppRoutingModule` class
"Explain in detail what does the following code do:-::<br>```<br>const routes: Routes = [<br>&nbsp; { path: 'first-component', component: FirstComponent },<br>&nbsp; { path: 'second-component', component: SecondComponent },<br>&nbsp; ];<br>```"	Defines the routes for first-component and second-component.
"What is routerLink and router-outlet?::<br>```<br>&lt;a routerLink=""/first-component"" routerLinkActive=""active""&gt;First Component&lt;/a&gt;<br>&lt;a routerLink=""/second-component"" routerLinkActive=""active""&gt;Second Component&lt;/a&gt;<br>&lt;router-outlet&gt;&lt;/router-outlet&gt;<br><br>```"	- `routerLink` attribute adds the route.<br>- router-outlet is where the view renders.
In what order should you add routes?::	- Static Path<br>- Empty Path - default route.<br>- Wildcard Path - not found route.
Which route should be last by default?::	The wildcard route.
How can you add a wildcard route to your routes definition?::	"`{ path: '**', component: &lt;component-name&gt; }`"
In the providers array, in the provideRouter method, how will you enable input binding with routing?::	`providers: [provideRouter(appRoutes, withComponentInputBinding()),]`
What are eager-loaded modules?::	These are loaded at application startup.
How do you declare eager-loaded modules?::	In the imports array of another module.
What are lazy-loaded modules?::	These are loaded on demand due to in-app navigation.
How do you declare lazy-loaded modules?::	In the routing module.
Why does Angular use `Zone.js`?::	To detect any changes to the application state.
"Which library helps angular detect changes to an application's state?::"	`Zone.js`
What events does Zone.js listen for and capture in an angular application?::	`setTimeouts`, `setIntervals`, network requests, and event listeners.
What does `runOutsideAngular` do?::<br>```<br>ngOnInit() {<br>&nbsp;&nbsp;&nbsp; this.ngZone.runOutsideAngular(() =&gt; setInterval(pollForUpdates), 500);<br>&nbsp;&nbsp;&nbsp; }<br>```	It excludes the passed in function for change detection.
What does angular do on each change detection cycle? (2 steps)::	- Evaluates all template expressions in all non-onPush components of the application.<br>- Executes the `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, and `ngOnChanges` lifecycle hooks of each component.
Which lifecycle hooks does each change detection cycle execute?::	- `ngDoCheck`<br>- `ngAfterContentChecked`<br>- `ngAfterViewChecked`<br>- `ngOnChanges`
Why should you make sure that the `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, and `ngOnChanges` lifecycle hooks execute quickly?::	Because these methods run after every change detection cycle.
A component has `OnPush` change detection strategy, When does change detection run for this component?::	The component receives new inputs.
Which command generates an application with routing enabled?::	ng new routing-app --routing --defaults
Which angular cli command generates a directive?::	`ng generate directive copyright`
How do you declare a directive?::	Using the `@Directive` decorator and defining its selector property.
What is the `ElementRef` class?::	It gives us access to the host element of the directive.
Which class allows us to manipulate the underlying HTML element attached to the directive?::	`ElementRef`
Which property of the `ElementRef` class gives us access to the html element?::	`nativeElement`
"What does the following code do?::<br>```<br>import { Directive, ElementRef } from '@angular/core';<br><br>@Directive({<br>&nbsp;&nbsp;&nbsp; selector: '[appCopyright]'<br>&nbsp;&nbsp;&nbsp; })<br>&nbsp;&nbsp;&nbsp; export class CopyrightDirective {<br>&nbsp;&nbsp;&nbsp; constructor(el: ElementRef) {<br>&nbsp;&nbsp;&nbsp; const currentYear = new Date().getFullYear();<br>&nbsp;&nbsp;&nbsp; const targetEl: HTMLElement = el.nativeElement;<br>&nbsp;&nbsp;&nbsp; targetEl.classList.add('copyright');<br>&nbsp;&nbsp;&nbsp; targetEl.textContent = 'Copyright ©${currentYear} All Rights Reserved.';<br>&nbsp;&nbsp;&nbsp; }<br>```"	"It creates a directive that adds the class 'copyright' to an element."
What is the `@HostBinding` decorator?::	It binds a value to an attribute of the host element of the directive.
You would like to assign a value to a property of the host element.::<br>Which decorator would you use?::	`@HostBinding`
You would like to listen to events raised by the host element in a directive.::<br>Which decorator will you use?::	`@HostListener`
"What is `$event`?::<br>`@HostListener('keypress', ['$event']) onKeyPress(event:KeyboardEvent)`::"	The event object of the triggered event.
What does the `ViewContainerRef` artifact give access to?::	It gives us access to the angular view container that hosts a directive.
What is the `ViewContainerRef`?::	It is a container where one or more views can be dynamically created and attached as a child of the host element.
When you would like to use a `ViewContainerRef`?::	When you would like to dynamically create and add a component and attach it to the view<br>or when you would like to dynamically create an `ngTemplate`&nbsp; and attach it to the view.
If the view container creates more than one view, where is the second view added?::	The second view is added after the first view
How can you create a new component and add it to the view of a `ViewContainerRef`?::	By using its `createComponent` method.
How can you create a new `ngTemplate` and add it to the view of a `ViewContainerRef`?::	By using its `createEmbeddedView` method.
What is `TemplateRef`?::	`TemplateRef`&nbsp;is a class and the way to reference the `ng-template` in the component or directive class.
You need access to an `ngTemplate` that is declared in your html template.::<br>How can your directive access that template?::	By injecting the `TemplateRef` class.
What is `ngTemplateOutlet`?::	It is a structural directive that renders the template.
Which event gets called when Angular initializes the view of the current component and its child components?::	`ngAfterViewInit`
When does `ngAfterViewInit` get called?::	This is called after angular initializes the view of the current component and its child components.
"What is the diff between the following 2 lines of code?::<br>`&lt;input class=""demo"" (keyup)=""onKeyUp(titleInput.value)"" #titleInput /&gt;`<br>`&lt;input class=""demo"" (keyup)=""onKeyUp($event.target.value)"" /&gt;`"	They do the same thing. $event is the event object while `titleInput` is the template reference variable.
Write the syntax for `ngFor`.::	"`*ngFor=""let course of courses""`"
Write the syntax for `ngFor` with an index parameter.::	"`*ngFor=""let course of courses;index as i""`"
Write the syntax for `ngFor` with an index and a first parameter::	"`*ngFor=""let course of courses;index as i; first as isFirst""`"
Write the syntax for `ngFor` with an index and a first parameter and a last parameter.::	"`*ngFor=""let course of courses;index as i; first as isFirst; last as isLast""`"
Write the syntax for `ngFor` with an index and a first parameter and a last parameter and an even parameter and an odd parameter.::	"`*ngFor=""let course of courses;index as i; first as isFirst; last as isLast; even as isEven; odd as isOdd""`"
What happens to the element if the `ngIf` expression returns false?::	The element is removed from the page.
What happens to the element if the `ngIf` expression returns true?::	The element is added on the page.
What expressions are allowed in `ngIf`?::	Any variable, object or function that returns a truthy value.
What does `ngClass` do?::	It adds a class to the element.
"What does the following do?::<br>`[ngClass]=""'beginner'""`"	Adds the beginner class to the element.
"What does the following do?::<br>`[ngClass]=""['beginner', 'testClass']""`::"	Adds the `beginner` and `testClass` to the element.
"What does the following do?::<br>`[ngClass]=""{'beginner':true, 'course-card':true}""`::"	It reads the object and applies the class only if true.
What does the following do?::<br>`[ngClass]=cardClasses()`::	It calls the function and the function must return a list of classes.
When should you use `ngClass`?::	When we want to add a style depending on the content of the data.
"What does the following do?::<br>`[style.text-decoration]=""""'underline'""""`::"	Adds a text-decoration style to the element.
"What does the following do?::<br>`[ngStyle]=""{'text-decoration': 'underline'}""`::"	Add the text-decoration style to the element.
What is an `&lt;ng-container&gt;`?::	It is an angular element onto which you can apply a structural directive like `ngIf` or `ngSwitch`.
When should you use an `&lt;ng-container&gt;` tag?::	"If you find yourself in a situation where you don't have a convenient html element to use with a structural directive."
Why would you use a command like the below?<br>`npx -p @angular/cli@15 ng generate environments`	With this command, you can switch to any angular cli that you need to work with.<br>You do not need to globally install angular.
Can you build angular without using modules?	Yes by using standalone components.
You would like to use standalone components instead of modules.<br>What steps do you need to do to enable that?	- Delete `app.module.ts`<br>- In `main.ts`, type `bootstrapApplication` passing in `AppComponent`
Do standalone components need to be registered with a module?	No
How do you declare a standalone component?	By setting the standalone property of the `@Component` decorator to `true`.
What is a `RouterOutlet`?	It is an angular component that acts as a placeholder that Angular dynamically fills based on the current router state.
What are named `RouterOutlets`?	"They are router outlet components that have the optional name property set.<br>`&lt;router-outlet name='left'&gt;&lt;/router-outlet&gt;`"
How can you define a route object to use a named `RouterOutlet`?	`{path: &lt;base-path&gt;, component: &lt;component&gt;, outlet: &lt;target_outlet_name&gt;}`
How do you provide bootstrapApplication with routing?	In the providers option, call the `provideRouter` function providing the `appRoutes`.
"What does the static property indicate?<br>`@ViewChild('keyContainer', { static: true }) input: ElementRef |undefined;`"	It indicates whether the element we want to query will be available during component initialization.
What is Redux?	Redux is a global state of data that is outside your framework.
What is Ngrx?	It is a bunch of libraries that helps build reactive applications in Angular and implements redux in the Angular way.
When must you use the `patch` method and when must you use the `put` method?	The `patch` method should be used when we want to update only a subset of an object.<br>The `put` method should be used when we want to update all of the object properties.
Why use Ngrx store for state management?	When you have a lot of user interactions and services and managing state in services in no longer sufficient.
Detail the steps that go into creating a reactive form in angular?	- Create the form in html.<br>- Import `FormBuilder`, `ReactiveForms` and `Validators` from `@angular/forms`.<br>- Create a form group using `this.fb.group` or `this.fb.nonNullable.group`.<br>- Make sure the objects in the form group are mapped to the html controls using `formControlName` property.<br>- Map the html form to the form group object in the component using `[formGroup]`.<br>- Create `ngSubmit` on the form tag.
`Ngrx` state management lifecycle:	- A component triggers an action,<br>- Action calls the service for new data.<br>- Service calls action with the new data.<br>- Action passed the data to a reducer.<br>- Reducer updates the store with the new data.<br>- Store activates the selectors with the new data.<br>- Components registered to the selectors update their state.
What is an action in `Ngrx`?	An action is a simple interface with a property called type that is a string.
What is the purpose of the `createAction` function in `Ngrx`?	It helps us create an action.
What can you pass as parameters to&nbsp; the `createAction` function in `Ngrx`?	- The global name of the action.<br>- Provide additional properties to handle any additional metadata.
What is the standard format for naming `Ngrx` actions?	Include a namespace in the name of your action something like `[Auth] Register` or `[Auth] Login` where `[Auth]` is the namespace for the action.
Why must we also include a namespace while naming our `Ngrx` actions?	Because all actions are global.
What is `ReactiveFormsModule`?	Exports the required infrastructure and directives for reactive forms.
What is a `Validator`?	A validator is a function that processes a `FormControl` or collection of controls and returns an error map or null.<br>A null means that the validation has passed.
What is `updateValueAndValidity()`?	When you add or remove a validator at run time, you must call`updateValueAndValidity()`&nbsp; function for the new validation to take effect.
"What does the following function do?<br>```<br>export const register = createAction(<br>&nbsp; '[Auth] Register',<br>&nbsp; props&lt;{request: RegisterRequestInterface}&gt;()<br>);<br>```"	It creates an action called register and props which can be used to pass data to the action.
What does the following code do?<br>`this.store.dispatch(register({request}));`	It dispatches an action to the store. In this case the register action with a request parameter.
What does `provideStore` do in the following application?<br>```<br>bootstrapApplication(AppComponent, {<br>&nbsp; providers: [provideRouter(appRoutes), provideStore()],<br>});<br>```	It initializes the single store object for the application.
Which `Ngrx` library provides redux dev tools?	`@ngrx/store-devtools`