We know that HTML DOM is a cross platform, language independent interface. It views an HTML/XML document as a tree structure and each node as an object representing a part of the document. DOM is an abbreviation for Document Object Model. It is very easy to manipulate the DOM in Angular.js. Angular uses directives to bind application data to the attributes of HTML DOM elements. Angular’s approach for manipulating DOM is to inject DOM elements into the link function. You can query any node within the component’s template to add, remove,modify nodes, styles etc. The drawback is that it is highly dependent on the browser platform. New Angular versions run on various platforms so a level of abstraction is needed to work between platform specific API and framework interfaces. These abstractions come as reference types like ElementRef, TemplateRef, ViewRef, ComponentRef, ViewContainerRef.To access these abstractions inside component/directive class Angular.js provides DOM queries which comes in the form of @ViewChild and @ViewChildren decorators. @ViewChild returns one reference and @ViewChildren returns multiple references as a Querylist object. 

ElementRef-It contains only the native element it is associated with.

console.log(this.tref.nativeElement.textContent);

This kind of usage will cause a security risk so it is not encouraged to use. ElementRef can be returned using the ViewChild decorator. 

TemplateRef- Before template tags were introduced templates were wrapped in script tag with some variation of the type attribute. Drawback of this approach is it had semantics and we had to create DOM models manually. After template tag was introduced browser parses html and creates DOM tree. The Framework removes template elements from the DOM and instead. TemplateRef has an element in elementRef property and a method called createEmbeddedView. This allows us to create a view and return a reference to it as ViewRef.

ViewRef- Angular supports embedded views and host views.Host views are linked to a component and embedded views are linked to a template. To create an embedded view createEmbeddedView method.

ngAfterViewInit() {

    let view = this.tpl.createEmbeddedView(null);

}

Host views are created when a component is dynamically instantiated. To create it use ComponentFactoryResolver.

constructor(private injector: Injector,

            private r: ComponentFactoryResolver) {

    let factory = this.r.resolveComponentFactory(ColorComponent);

    let componentRef = factory.create(injector);

    let view = componentRef.hostView;

}

ViewContainerRef- One or more views can be attached to ViewContainerRef. Angular doesn’t insert views inside the element, appends it after the element is bound to ViewContainer.

 @Component({

    selector: 'sample',

    template: `

        <span>I am first span</span>

        <ng-container #vc></ng-container>

        <span>I am last span</span>

    `})

export class SampleComponent implements AfterViewInit {

    @ViewChild("vc", {read: ViewContainerRef}) vc: ViewContainerRef;

    ngAfterViewInit(): void {

        // outputs `template bindings={}`

        console.log(this.vc.element.nativeElement.textContent);

    }

}

To bind application data to attributes of HTML DOM elements directives are used.

Ng-disabled, ng-show, ng-hide, ng-click are the directives.

Ng-disabled disables a given control. Ng-show and ng-hide are used to show and hide given controls respectively. Ng-click represents an Angular.js click event.