Angular 2.x DOM element selection

Question

I know this should be easy, but angular 2.0 does not have many examples yet.

In one of my components, in some cases I need to add a class to the body tag. But my application loads deeper than the body, so I need something like

angular.element('body').addClass('fixed'); 

but in angular 2.0 ..

By the way, I know that I can somehow download my application to include the body tag, but I think that in some other cases I will need to select some elements, so I need a solution on how to do this simple task - "select element and add class to it

Answer 1

Update

I'm not sure if the DOM is actually still supported in RC. Relevant statements are not very clear. Something like

DOM is for internal use only. Either enter the DOM directly, or use your own rendering.

I do not see how a custom renderer can be implemented or how to provide an implementation depending on the current platform (webworker, server, DOM thread).

Update seems to be Angular2's way

 import { DOM } from 'angular2/src/platform/dom/dom_adapter'; DOM.addClass(DOM.query("body"), 'fixed'); 

Import from .../src/... at your own risk. .../src/... is considered a private implementation, and you cannot expect any guarantees that the API will not change without notice.

I tried it in Dart and it works fine (not sure if TS import is higher correctly). Dart exported package:angular2/angular2.dart

Original

If you want to access the DOM element outside of your Angular application root, just use document.querySelector() , there is no need to involve Angular.

Answer 2

Like Angular2 Version 2.0.0-beta.17.

Attribute directives in Angular2 will do this beautifully for you.

Please see this plunk written in TypeScript. It does what you want beautifully.

There is a line in the my-highlight.ts directive file:

 this.renderer.setElementClass(this.element, "red", true); 

This sets the CSS class in the element.

So far, template.html has a valid element, decorated with the [myHighlight] directive:

 <p [myHighlight]>Mouseover to highlight me!</p> 

This, for me, provides the smallest hacker answer to the question without any jqLite dependency.

Answer 3

As of angular 2.4 you should enter DOCUMENT and not interact with any adapter:

 import { Component, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; @Component({}) export class MyClass { constructor (@Inject(DOCUMENT) private document) { } doSomething() { this.document.someMethodOfDocument(); } } 

Further reading: https://github.com/angular/angular/issues/8509

Answer 4

I do not recommend direct DOM access from Angular, but you have a DOM hook through your component's ElementRef. Once you have access to it, you can use it directly or using jquery or any other DOM manipulation method. I included an example using jquery to run general queries. If you are always going to use the body tag, you really do not need ElementRef, but it is useful for something that refers to the root of the component.

 import {Component, ElementRef, OnInit} from '@angular/core'; declare var jQuery:any; @Component({ selector: 'jquery-integration', templateUrl: './components/jquery-integration/jquery-integration.html' }) export class JqueryIntegration implements OnInit { elementRef: ElementRef; constructor(private elementRef: ElementRef) { } ngOnInit() { jQuery(this.elementRef.nativeElement).find('.moving-box').draggable({containment:'#draggable-parent'}); } } 

Further information here: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

Demo: http://www.syntaxsuccess.com/angular-2-samples/#/demo/jquery

Answer 5

DOM manipulation in Angular 2/4 applications

To manipulate the DOM in Angular 2/4 applications, we need to implement the ngAfterViewInit() AfterViewInit . The ngAfterViewInit() method is called when the bindings of child directives were checked for the first time. In other words, when the view is initially displayed.

@ViewChild provides access to nativeElement . It is recommended that you do not have access to nativeElement inside ngAfterViewInit() , because it is not protected by the browser. In addition, it is not supported by web workers. Web workers will never know when the DOM is updated.

The correct way is to use renderer . The renderer must be inserted into the component constructor. We need to provide the id link to the HTML element in the view like this:

<p #p1></p>

It should be accessed by the corresponding copy of the .ts , something like this:

 export class SampleComponent implements AfterViewInit { @ViewChild("p1") p1; constructor(private renderer: Renderer2) //Renderer set to be depreciated soon { } ngAfterViewInit() { //recommended DOM manipulation approach this.renderer.setStyle(this.p1.nativeElement, //setElementStyle for soon to be depreciate Renderer 'color', 'red'); //not recommended DOM manipulation approach //this.p1.nativeElement.style = "color:blue;"; } }