General Knowledge Flashcards
(30 cards)
How does ng-Content differ from string Interpolation {{myValue}}?
Show Example
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
List the 8 life-cycle hooks in order.
- ngOnChanges()
- ngOnInit()
- ngDoCheck()
- ngAfterContentInit() - after Angular projects external content into the component’s view
- ngAfterContentChecked() - after the ngAfterContentInit() and every subsequent ngDoCheck()
- ngAfterViewInit() -Called once after the first ngAfterContentChecked()
- ngAfterViewChecked() - Called after the ngAfterViewInit and every subsequent ngAfterContentChecked()
- ngOnDestroy()
What module in AppModule contains all the base functionality that is required by Angular?
BrowserModule
Show how to make a Component selector (‘app-server’) be an attribute type.
Show it in use.
selector: ‘[app-server]’
…
Show how to make a Component selector (‘app-server’) be an class.
Show it in use.
selector: ‘.app-server’
…
Explain the use of square brackets in HTML.
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.
Show how to change what appears between the opening and closing tags of an element such as in
(See image)
(see image)
innerText is a native DOM element.
allowNewServer is a boolean which will be converted to string
Show the attributes that are native DOM vs Angular for triggering a click event.
native: onclick=””
Angular: (click)=””
Is this valid: (click)=”status = true ? ‘okay’ : ‘not okay’ “
yes, it can work with expressions.
What is the attribute for the DOM input element that will trigger every time a character is entered or removed.
(input)=” ourFunction( $event ) “
ourFunction(event: Event ) { // or event: any
this.serverName = (event.target).value;
What must be added to the App NgModule Imports in order to use two-way event binding with [(ngModel)] ?
import FormsModule which is from ‘@angular/forms’
What is the syntax of the directive selector field?
selector: “ [myDirective] “
square brackets
what indicates a “local reference” to an element in HTML?
Starts with hash sign #
Show the syntax of ngIf with else.
See attached image
…
Show the format of ngStyle directive.
(See Attached Image)
Show use of ngClass to conditionally add classes.
(See Attached Image)
Show using ngFor
(See Attached Image)
Difference between ngFor .. of versus ngFor … in?
‘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]}`);
}
Show using ngFor in such a way as to get the index of each element.
*ngFor=”let logItem of logs; let i = index”
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 … {
}
import { … Input } from ‘@angular/core’;
export class myChildComponent {
@Input( ) useColor**:** string;
How to decorate @Input or @Output so it has an alias from the parent … like:
Where to place the alias in: @Input( ) server: string;
@Input( ‘newServer’ ) server: string;
newServer becomes the alias for server
likewise
@Output( ‘replaceWith’ ) internalname = new EventEmitter …
How can a component notify a calling parent component of event(s).
The Parent:
<thechild> ....</thechild>
The Child:
public export theChildComponent
@Output( ) targetChanged = new EventEmitter<newtarg : string>( ) <strong>;</strong></newtarg>
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
TRUE
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?
@Component( {
selector:
template:
style:
encapsulation: ViewEncapsulation.None
And: is this a good practice? No
