DEV Community

Cover image for How to Inject Document in Angular

Posted on

How to Inject Document in Angular

Jared Youtsey | ng-conf | Oct 2020

Sometimes we just need to directly work with the DOM directly. I find this particularly so when doing things like scrolling to an element. How do you correctly leverage the document object in Angular?

import { DOCUMENT } from '@angular/common';
@Component({...}) // could be a service too!
export class MyComponent {
    constructor (@Inject(DOCUMENT) private document: Document) {}
Enter fullscreen mode Exit fullscreen mode

That’s it. Now, why write an article on something so simple? For starters, the best way to learn something is to teach it. Done. In addition, I’ve been doing full-time Angular development since the early alphas of Angular 2. I consider myself a guru-level Angular developer. However, I’m honest enough to admit that I still don’t know everything. One of my team members pointed this out in a code review. So, I learned something new today! Thanks, Ananthan!

Angular is evolving constantly. New features are added all of the time. As a developer, I love that I’m still learning new things and getting new features from the Angular team.

Be open to learning from anyone, anytime.

ng-conf: The Musical is coming

ng-conf: The Musical is a two-day conference from the ng-conf folks coming on April 22nd & 23rd, 2021. Check it out at

Top comments (0)