Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Angular 4 Tutorial : View Encapsulation and Local References

Hello all, in the previous post, we learned about the custom two way data binding. In this post, we will learn more about the components and how angular manages the components view and also about the local references in templates.

View Encapsulation

As we know every component has its styles and template. In the last post, we saw multi components example, in that if I change the style of any HTML element in any one component CSS file the same element in other components will not have those styles. For example, in Component Display-Output, I change the background-colour of paragraph tag,

p {
background-color: blue;

which will set the color of paragraph tag of Display-Output component only and not other components. But we know that this not the way CSS works; it will apply changes to every p tag in the page. This restriction is imposed by angular, on compilation angular gives every component an unique id and also modifies the CSS too. And therefore we can design every component separately. But if we want we can change the default behaviour of angular by adding a property to the Component directive.

import { Component, ViewEncapsulation } from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
The encapsulation property is set to ViewEncapsulation.None angular does not add the unique attribute to the elements of that component, so any global changes will reflect these elements. ViewEncapsulation enum has two more properties, Emulated and Native which apparently seems to same. The difference is that if encapsulation is set Emulated angular we emulated the shadow dom technology for non supporting browsers, whereas in case of Native it will use the shadow dom technology only for supported browsers. For most of the cases, it is recommended to use Emulated or None only. By default, angular sets this property to Emulated as to support all browsers.

Local References

In the previous, you would have seen that to access a component we used data binding. For example, to get the text entered in the input field we bind to some string variable using [(ngModel)] attribute. But there’s another way to do that using local references. The local reference is like creating a unique variable to point it to the particular HTML element. Local reference can be created for any element by setting the variable name with prefix #. Like

in this content will hold the reference to whole

element and not only its value. But the local reference can be used in the template only and not in typescript unlike data binding or interpolation. But we can always pass it as a parameter to the methods and then can access it in typescript. In the below example, the input element is accessed in the typescript using the local reference.

    Local References                             Displayed Text : {{displayContent}}          
export class AppComponent {
displayContent = '';
  setText(inputElement: HTMLInputElement) {
    this.displayContent = inputElement.value;
Local References-screenshot

This post first appeared on, please read the originial post: here

Share the post

Angular 4 Tutorial : View Encapsulation and Local References


Subscribe to

Get updates delivered right to your inbox!

Thank you for your subscription