How to Inject Document in Angular

#angular #javascript #typescript #webdev

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) {}
}

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 ng-conf.org

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.