You can put local references in any template of your angular app, and start with #, such as <input type=”text” id=”test” #localReference>, so you can only use this local reference in this template but not in typescript.

Notice, this local reference represents the whole element, such as #localReference represent the whole input element that includes all property of this element

@ViewChild() : handle view DOM content

In order to use local reference in .ts files, you can use @ViewChild(‘local reference name’ or child component) decorator, such as

<input type=”text” id=”test” #localReference>, so in .ts file, you can use: @ViewChild(‘localReferenc’) varableName: type of var; Then you can use varableName in files, however, be sure to use console.log(varableName) to confirm what kind of this variable is , and then how to use it

@ContentChild(): handle content injected from <ng-content></ng-content> </i>

methods are same as @ViewChild()