User Input

Topics Covered

Taking input from user
View Encapsulation & Shadow DOM
ng-content

Taking input from user

1. Template Reference Variable

   • A template reference variable is often a reference to a DOM element within a template. It can also refer to a directive (which contains a component), an element, TemplateRef, or a web component.
   • Use the hash symbol # to declare a reference variable. The following reference variable, #player, declares a player variable on an <input> element.
   • You can refer to a template reference variable anywhere within the component's template and NOT inside component. To access inside component, use ViewChild Here, a <button> further down the template refers to the player variable.

   <input #player placeholder="player name">
   <button (click)="playerDetails(player)">Call</button>
   OR
   <input #player placeholder="player name"> => {{player.value}} <!--refere directly-->

   playerDetails(playerName: HTMLInputElement) {
      this.playerName = playerName.value;
   }

   More on template Reference

2. ViewChild() decorator

   • With ViewChild() decorator, we can reference template reference variable variable inside your component without passing it via method as a parameter.

   import {ViewChild, ElementRef} from '@angular/core';
   @ViewChild('viewChild', {static: false}) viewChildReferenceValue: ElementRef; 
   /* here viewChild is template reference variable */
   viewChildReference() {
    console.log(this.viewChildReferenceValue.nativeElement.value);
   }

   <input type="text" class="form-control" #viewChild/><br>
   <button class="btn btn-primary" (click)="viewChildReference()">View Child Reference</button>

   • In Angular 8, the @ViewChild() syntax add { static: true } as a second argument. It needs to be applied to ALL usages of @ViewChild() (and also @ContentChild()) If you plan on accessing the selected element inside of ngOnInit(). If you DON'T access the selected element in ngOnInit() (but anywhere else in your component), set static: false instead! This is a temporary adjustment which will NOT be required anymore once Angular 9 is released!

   • NOTE

     • @ViewChild(<templteRefVar>) varName: ElementRef - access DOM element within same component
     • @ViewChild(<childComponentName>) varName: childComponentName - access child Component within parent component. see

3. Event Binding

   • With Form

   <form (ngSubmit)="onSubmit($event)">
    <input name="player" value="Name">
   </form>

   onSubmit(event: any) {
    return event.target.player.value;
   }

   • Without Form

   <input (keyup)="onKey($event)">

   onKey(event) {const inputValue = event.target.value;}

4. Use ngModel i.e 2-way data binding

   <input type="text" [(ngModel)]="someString">

   someString: string = '';

5. Must read article

---

View Encapsulation & Shadow DOM

• Official Angular Docs
• Host-Context, Host, NG-DEEP

• The shadow DOM is a technology not supported by all browsers where each element has its kind of own shadow DOM behind it, where you then could assign styles to each element. Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree

• More Reading

• Whenever we create a component, Angular puts it’s template into a shadowRoot, which is the Shadow DOM of that particular component. Doing that, we get DOM tree and style encapsulation.

• Angular doesn’t use native Shadow DOM by default, it uses an emulation. To be technically correct, it also doesn’t create a shadowRoot for our components in case no native Shadow DOM is used. The main reason for that is that most browsers simply don’t support Shadow DOM yet, but we should still be able to use the framework.

• Angular comes with view encapsulation built in, which enables us to use Shadow DOM or even emulate it. There are three view encapsulation types:

  • ViewEncapsulation.None -

    • No Shadow DOM at all. Therefore, also no style encapsulation. Angular doesn’t use Shadow DOM at all. Styles applied to our component are written to the document head

  • ViewEncapsulation.Emulated -

    • No Shadow DOM but style encapsulation emulation. Default. It emulates style encapsulation, even if no Shadow DOM is available.
    • This is a very powerful feature in case you want to use a third-party component that comes with styles that might affect your application.
    • Instead of the simple .zippy selector that we used, Angular creates a .zippy[_ngcontent-1] selector
    • Angular adds some attributes to our component's template as well! We see the _ngcontent-1 attribute which is also used in our rewritten CSS
    • We want scoped styles without Shadow DOM right? And that’s exactly what happens. Since there’s no Shadow DOM, Angular has to write the styles to the head of the document.
    • Angular has to make sure that the component’s style selectors only match this particlar component and nothing else on the page. That’s why it extends the CSS selectors, so they have a higher specificity and don’t collide with other selectors defined before at the same.

  • ViewEncapsulation.ShadowDOM - (previously Native) Native Shadow DOM with all it’s goodness. It basically just makes Angular using native Shadow DOM

• More Reading, 2

ng-content

• Content projection (with <ng-content>) allows you to pass data from a parent component to a template of a child component. Example:

<!--parent-->
<app-inner-component *ngFor="let element of serverDetailsArray" [customElement]="element">
   <strong *ngIf="element.type === 'server'" style="color: red">{{ element.serverContent }}</strong>
   <em *ngIf="element.type === 'blueprint'" style="color: blue">{{ element.serverContent }}</em>
</app-inner-component>
<!--child-->
<div class="panel-body">
   <p><ng-content></ng-content></p>
</div>

• Must Read, 2