General Knowledge

Question 1

How does ng-Content differ from string Interpolation {{myValue}}?

Show Example

Answer 1

String interpolation comes from the myValue in the current component while ng-Content comes from the parent component.

<xxx> <p>Mary Had a Little Lamb</p>
<br></br> <div>Commercial Break</div> <xxx></xxx></xxx>

Where xxx is defined as:

heading goes here

<ng-content></ng-content>

<—- this is the p and div from above

footer goes here

Question 2

List the 8 life-cycle hooks in order.

Answer 2

1. ngOnChanges()
2. ngOnInit()
3. ngDoCheck()
4. ngAfterContentInit() - after Angular projects external content into the component’s view
5. ngAfterContentChecked() - after the ngAfterContentInit() and every subsequent ngDoCheck()
6. ngAfterViewInit() -Called once after the first ngAfterContentChecked()
7. ngAfterViewChecked() - Called after the ngAfterViewInit and every subsequent ngAfterContentChecked()
8. ngOnDestroy()

Question 3

What module in AppModule contains all the base functionality that is required by Angular?

Answer 3

BrowserModule

Question 4

Show how to make a Component selector (‘app-server’) be an attribute type.

Show it in use.

Answer 4

selector: ‘[app-server]’

…

Question 5

Show how to make a Component selector (‘app-server’) be an class.

Show it in use.

Answer 5

selector: ‘.app-server’

…

Question 6

Explain the use of square brackets in HTML.

Answer 6

Applied to an attribute that is already valid for the selector,
indicates the value of that property will be bound to the expression after the equal sign.

Otherwise, if the attribute is NOT a part of the selector,

it still binds to a variable, but here it is a directive.

Question 7

Show how to change what appears between the opening and closing tags of an element such as in

(See image)

Answer 7

(see image)

innerText is a native DOM element.
allowNewServer is a boolean which will be converted to string

Question 8

Show the attributes that are native DOM vs Angular for triggering a click event.

Answer 8

native: onclick=””
Angular: (click)=””

Question 9

Is this valid: (click)=”status = true ? ‘okay’ : ‘not okay’ “

Answer 9

yes, it can work with expressions.

Question 10

What is the attribute for the DOM input element that will trigger every time a character is entered or removed.

Answer 10

(input)=” ourFunction( $event ) “

ourFunction(event: Event ) { // or event: any
this.serverName = (event.target).value;

Question 11

What must be added to the App NgModule Imports in order to use two-way event binding with [(ngModel)] ?

Answer 11

import FormsModule which is from ‘@angular/forms’

Question 12

What is the syntax of the directive selector field?

Answer 12

selector: “ [myDirective] “

square brackets

Question 13

what indicates a “local reference” to an element in HTML?

Answer 13

Starts with hash sign #

Question 14

Show the syntax of ngIf with else.

Answer 14

See attached image

…

Question 15

Show the format of ngStyle directive.

Answer 15

(See Attached Image)

Question 16

Show use of ngClass to conditionally add classes.

Answer 16

(See Attached Image)

Question 17

Show using ngFor

Answer 17

(See Attached Image)

Question 18

Difference between ngFor .. of versus ngFor … in?

Answer 18

‘of’ is used to iterate over iteratable like Arrays or strings
ex: let names = [‘Gertrude’, ‘Henry’, ‘Melvin’, ‘Billy Bob’];
for (let animal of animals) { // Random name for our animal
let nameIdx = Math.floor(Math.random() * names.length); console.log(${names[nameIdx]} the ${animal});
}

OR
 let str = 'abcde';

for (let char of str) {
console.log(char.toUpperCase().repeat(3));
}

‘in’ is used to iterate over properties of an object.

ex: let oldCar = { make: 'Toyota', model: 'Tercel', year: '1996' };
 for (let key in oldCar) {
 console.log(`${key} --\> ${oldCar[key]}`);
 }

Question 19

Show using ngFor in such a way as to get the index of each element.

Answer 19

*ngFor=”let logItem of logs; let i = index”

Question 20

How do you declare a property in a component that will be accessible from a parent.

For example: in the parent HTML file we have:

<thechild> ... </thechild>

And the child is:

export class myChildComponent … {

}

Answer 20

import { … Input } from ‘@angular/core’;

export class myChildComponent {
 @Input( ) useColor**:** string;

Question 21

How to decorate @Input or @Output so it has an alias from the parent … like:

Where to place the alias in: @Input( ) server: string;

Answer 21

@Input( ‘newServer’ ) server: string;

newServer becomes the alias for server

likewise
@Output( ‘replaceWith’ ) internalname = new EventEmitter …

Question 22

How can a component notify a calling parent component of event(s).

Answer 22

The Parent:

<thechild> ....</thechild>

The Child:
public export theChildComponent
@Output( ) targetChanged = new EventEmitter<newtarg : string>( ) <strong>;</strong></newtarg>

Question 23

Angular enforces encapsulation of CSS files; each CSS that is a part of a component will only affect that component’s HTML.

TRUE or FALSE

Answer 23

TRUE

Question 24

How can you override the fact that Angular does View Encapsulation of CSS styles so they won’t affect other components.

@Component( {
selector:
template:
style:

And: is this a good practice?

Answer 24

@Component( {
selector:
template:
​style:
encapsulation: ViewEncapsulation.None

And: is this a good practice? No

Question 25

Describe the effect of the three settings for ViewEncapsulation.

Answer 25

None - NO style encapulation; NO shadow DOM
Emulated (default) - style encapulation; NO shadow DOM
Native - style encapulation; shadow DOM

Question 26

Show example of @ViewChild ( Angular >= v8 )

Answer 26

Parent:
@ViewChild( ‘headingTag’, {static: true} ) header: ElementRef;
ngOnInit( ) {
console.log( this.headingTag.nativeElement.textContent);

static: true allows it to have effect on ngOnInit, otherwise false waits until afterviewinit
- —————————————————————————–

Child component:

{{ name }}

Question 27

Since @ViewChild cannot look inside ng-content in the child, show an example of how to do that.

Answer 27

Parent:
@ContentChild( ‘ contentDivTag’ , {static: true }) dv: ElementRef ;

header

<ngcontent></ngcontent>

footer

console. log(‘ dv ‘ + dv.nativeElement.textContent;
- ————————————————————–
static: true allows it to be used in ngOnInit, otherwise it won’t be available until AfterContentInit

Child:

<app-parent><br></br> <div> something goes here </div></app-parent>

Question 28

What is the best way to access an element in a custom directive - NOT using ElementRef directly?

Answer 28

Renderer2
import { Diirective, OnInit, ElementRef, Renderer2 } .. ‘@angular/core’
constructor(
private elRef: ElementRef,
private renderer: Renderer2 )
ngOnInit() {
this.renderer.setStyle( this.elRef.nativeElement ,
‘background-color’ ,‘blue’ );

Question 29

Show an example of using HostListener.

Answer 29

import { … HostListener } from @angular/core;

used inside a directive for example:

@HostListener( ‘mouseenter‘ ) mouseover( eventData: Event ) {
this.renderer.setStyle( this.elRef.nativeElement ,
‘background-color’ , ‘blue’, false false );
}

@HostListener( ‘mouseleave‘ ) mouseover( eventData: Event ) {
this.renderer.setStyle( this.elRef.nativeElement ,
‘background-color’ , ‘transparent’ , false, false);
}

Question 30

Show use of HostBinding.

Answer 30

import { HostBinding, … } from ‘ @angular/core‘ ;

export class myDirective implements OnInit {
 @HostBinding( ' style.backgroundColor ' ) backgroundColor: string = **'transparent';**

@HostListener( ‘mouseenter’ ) mouseover( eventData: Event ) {
this.backgroundColor = ‘blue’;
}

@HostListener( ‘mouseleave’ ) mouseover( eventData: Event ) {
this.backgroundColor = ‘transparent’;

}