Displaying Data Flashcards
Interpolation example
{{interpolated content}}
Interpolation example
{{interpolated content}}
How do you write multiline string
The backtick: ‘
declare a component in html
Structural direct for if statements
*ngIf=”booleanExpression; then templateForFalse
declare a component in html
Structural directive for for loops
*ngFor=”let item of items”
Structural direct for if statements
*ngIf=”booleanExpression; then templateForFalse
Declare a template reference variable to refer to element tags.
#variableName Useful Fact: takes precedence over other variables available in the template
Do templates have access to global variables such as “window” or “document”?
Nope
Rules for template expressions
No visible side effects
Quick execution
Simplicity
Idempotence
Action triggered by event raised that is binding a an element, component, or directive.
Template statement
Which can chain statements and assign values? Template expression or template statements?
Template statements
One way from source to view target binding
{{expression}}
[target]=”expression”
bind-target=”expression”
One-way
from view target
to data source
(target)=”statement”
on-target=”statement”
Two-way
[(target)]=”expression”
bindon-target=”expression”
Difference between html properties and attributes.
Attributes initialize properties. Properties can change.
Class property bindng
<div><div></div></div>
Input binding
<div></div>
Attribute binding example
class binding example
<div></div>
Style binding example
<div></div>
Style binding example with value type example
Big
Directive (attribute) event binding
<div>click with myClick</div>
Attribute Directive: clickable
Directive Event: myClick
EventEmitter example
// Inside child component
deleteRequest = new EventEmitter();
delete() {
this.deleteRequest.emit(this.hero);
}
// inside parent templatetemplate variable for an event when event binding
$event
event)=actionHandlingEventParam($event
Two way binding equivalence example
NgModel Binding with change
[ngModel]=”currentHero.name”
(ngModelChange)=”doSomething($event)”>
NgStyle binding
div [ngStyle]=”{
‘styleVar1’: boolExpression1,
‘styleVar2’: boolExpression2
}”
NgModel binding
// Module inport FormsModule
NgModel Binding with change
[ngModel]=”currentHero.name”
(ngModelChange)=”doSomething($event)”>
Output Binding
@Output(“aliasName”)
public name :EventEmitter?;
NgSwitch example
<div>
</div>
Input Binding
@Input(“aliasName”)
public inputVarName?;
Output Binding
@Output(“aliasName”)
public name :EventEmitter?;
null operator
{{nullObject?.name}}
assert not null operator to indicate that the variable can’t be null
{{nullObject!.name}}
any type conversion in template
$any(expression).anyProperty
pipe example
{{expression | converter}}
