Templates

Question 1

What is a template reference variable, and how would you use it?

Answer 1

A variable (defined using a #) in a component template, which can be referenced in other parts of the template
For example, a template variable for a form can then be referenced by other elements of the form

Question 2

What are the possible ways to bind component properties to an associated template?

Answer 2

One Way Data Binding (via interpolation and property binding)
Two Way Data Binding (which combines one way data and event binding)

Question 3

What’s the difference between binding a value with or without square brackets, i.e.: input attr=”something” vs input [attr]=”something” ?

Answer 3

The square brackets will cause “something” to be evaluated as an expression, as opposed to just be passed in as a literal string

Question 4

What does the ngFor template syntax look like?

Answer 4

< ul > < li *ngFor=” let val of values “ > {{val}} < /li > < /ul >

Question 5

What does the pipe syntax look like in Angular templates?

Answer 5

< div> {{ value | my-pipe : option }}< /div>

Question 6

What does an interpolated string look like in a template?

Answer 6

< div title=” Hello {{username}} “ > … < /div >

Question 7

What is < ng-container >

Answer 7

A
A grouping element that does not interfere with styles or layout (it’s analogous to curly braces in JavaScript).

Question 8

What is < ng-template >

Answer 8

It’s an Angular element for rendering HTML when using structural directives. The ng-template itself does not render to anything but a comment directly.