How to write alternative code "document.querySelector" in Angular 2 (TypeScript)?

Question

I am using Angular 2 (TypeScript). I want to rewrite the code below.

<video></video>

var video = document.querySelector("video");
video.src = URL.createObjectURL(localMediaStream);
video.play();

However, I don't know any way to get "video" in Angular 2. This is so far what I did.

<video [src]="videoSrc"></video>

videoSrc:string;
…
this.videoSrc = URL.createObjectURL(stream);
// Since I don't know any way to get "video",
// do I have any way to use video.play() here?

Late comment . . . I know the answer about @ViewChild works for this case, but if someone really needed to do querySelector, I would think that constructor(private el: ElementRef) { const result = this.el.nativeElement.querySelector('.myClass'); } would be better than const result = document.querySelector('.myClass'); as in angular.io/guide/attribute-directives, though angular.io/api/core/ElementRef says "Use this API as the last resort." — Marcus
– Marcus, Commented Jun 10, 2020 at 17:55

Eric Martinez · Accepted Answer · 2015-11-23 05:26:35Z

You can get a reference to the video element by using a local variable and @ViewChild

@Component({
  selector: 'my-app',
  template : `<video #my-video></video>`
})
export class App implements AfterViewInit {

  // myVideo == #my-video
  @ViewChild('myVideo') myVideo: any;

  afterViewInit() {
    let video = this.myVideo.nativeElement;
    video.src = URL.createObjectURL(yourBlob);
    video.play();
  }

Here's a plnkr demonstrating the case (the plnkr differs a little bit, since I couldn't load a video, apparently it's no that simple, instead I load an image as the poster for video tag. You'll get the idea)

Update

You deleted your last comment, but it was a valid question since the docs only specify one way of using @ViewChild.The docs use the type to query for the children, but you can also use a string. See in ViewChildMetadata#L327 that it accepts a Type (Component/Directive) or a string.

Update 2

Actually the docs show this alternative, but it's in another part of it. Under Query docs you can see it. Note that Query is deprecated, but the syntax is still valid for ViewChild/ViewChildren and ContentChild/ContentChildren.

Hi, Eric. The only thing I found about ViewChild is angular.io/docs/js/latest/api/core/ViewChild-var.html. But the code there looks so different. Any other place I can learn ViewChild? Thanks!
Ha, actually I want to change my question, since I cannot edit my comment after 5 min I post there. So I deleted it and created again :) Thanks again!
For new Angular versions (>= 17.2) the approach with signals would be: angular.dev/guide/signals/queries#viewchild

Avinash Jagtap · Accepted Answer · 2024-01-12 06:59:58Z

In Angular, you typically don't use document.querySelector directly. Instead, you use Angular's built-in directives and services. For instance, you can use the ViewChild decorator to get the first element or the directive matching the selector from the view DOM. If the DOM element is not directly linked to an Angular component, you can use the Renderer2 service.

Here's an example of using

ViewChild:

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<div #myDiv>Some content</div>`
})
export class AppComponent implements AfterViewInit {
  @ViewChild('myDiv') myDiv: ElementRef;

  ngAfterViewInit() {
    console.log(this.myDiv.nativeElement.innerHTML);
  }
}

And here's an example of using

Renderer2:

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<div>Some content</div>`
})
export class AppComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {
    const div = this.renderer.selectRootElement('div');
    console.log(div.innerHTML);
  }
}

Remember, direct DOM manipulation in Angular is not a good practice. We should always try to use Angular's built-in methods and services for interacting with the DOM.

Collectives™ on Stack Overflow

How to write alternative code "document.querySelector" in Angular 2 (TypeScript)?

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related