Template variable assignment

You may not have noticed but there is something interesting about the template variable assignments described in the last few sections. To recap, the three examples that we have used are:

<audio #ticks="MyAudio" loop src="/static/audio/tick10s.mp3"></audio> 
    
<input #emailId type="email">Email to {{emailId.value}}

<workout-runner #runner></workout-runner> 

What got assigned to the variable depends on where the variable was declared. This is governed by rules in Angular:

• If a directive is present on the element, such as MyAudioDirective in the first example shown previously, the directive sets the value. The MyAudioDirective directive sets the ticks variable to an instance of MyAudioDirective.
• If there is no directive present, either the underlying HTML DOM element is assigned or a component object is assigned (as shown in the input and workout-runner examples).

We will be employing this technique to implement the workout audio component integration with the workout runner component. This introduction gives us the head start that we need.

The other new concept that we promised to cover is child element/directive injection using the ViewChild and ViewChildren decorators.