Where does DOM manipulation belong in Angular 2?

by

Based upon recommend solution by developers: http://angularjs.blogspot.de/2016/04/5-rookie-mistakes-to-avoid-with-angular.html

@Component({
  selector: 'my-comp',
  template: `
    <div #myContainer>
    </div>
  `
})
export class MyComp implements AfterViewInit {
  @ViewChild('myContainer') container: ElementRef;

  constructor() {}

  ngAfterViewInit() {
    var container = this.container.nativeElement;
    console.log(container.width); // or whatever
  }
}

Attention: The view child name has to begin with myName and in the template you need #.

More Related Contents:

  1. What is the difference between Promises and Observables?
  2. Angular 2: 404 error occur when I refresh through the browser [duplicate]
  3. Angular 2+ – Set base href dynamically
  4. Observable type error: cannot read property of undefined
  5. How to force a component’s re-rendering in Angular 2?
  6. password and confirm password field validation angular2 reactive forms
  7. Is there any lifecycle hook like window.onbeforeunload in Angular2?
  8. What does the “ng-reflect-*” attribute do in Angular2/4?
  9. Inheritance and dependency injection
  10. Angular 2 : routing without changing URL
  11. How to switch layouts in Angular2
  12. What’s alternative to angular.copy in Angular
  13. Cleanest way to reset forms
  14. Angular2 Tutorial (Tour of Heroes): Cannot find module ‘angular2-in-memory-web-api’
  15. Angular 2.0. Difference @View @Component
  16. Cannot read property of ‘xxx’ of undefined
  17. Can’t bind to ‘for’ since it isn’t a known native property angular2
  18. Dynamic pipe in Angular 2
  19. Get domain name for service in Angular2
  20. Angular 2 how to keep event from triggering digest loop/detection cycle?
  21. New Angular2 router configuration
  22. Angular routerLink does not navigate to the corresponding component
  23. Default sorting in Angular Material – Sort header
  24. ng2 – Difference between ng-container and ng-template tags
  25. How to use pipes in Angular 5 reactive form input
  26. How to mock Angular 4.3 httpClient an error response in testing
  27. How to add multiple headers in Angular 5 HttpInterceptor
  28. Angular 6 – how to mock router.events url response in unit test
  29. Angular5: Deploying Angular application to multiple clients
  30. Cypress 12.8.1 not working with Stripe Elements iframe

Leave a Comment