angular 2 access ng-content within component

by

If you want to get a reference to a component of the transcluded content, you can use:

@Component({
    selector: 'upper',
    template: `<ng-content></ng-content>`
})
export class UpperComponent {
    @ContentChild(SomeComponent) content: SomeComponent;
}

If you wrap <ng-content> then you can access access to the transcluded content like

@Component({
    selector: 'upper',
    template: `
  <div #contentWrapper>
    <ng-content></ng-content>
  </div>`
})
export class UpperComponent {
    @ViewChild('contentWrapper') content: ElementRef;

    ngAfterViewInit() {
      console.debug(this.content.nativeElement);
    }
}

More Related Contents:

  1. typescript anonymous object with variable based label value
  2. How do I return the response from an Observable/http/async call in angular?
  3. How to load external scripts dynamically in Angular?
  4. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  5. Angular 2 Sibling Component Communication
  6. JS : Convert Array of Strings to Array of Objects
  7. Angular: Can’t find Promise, Map, Set and Iterator
  8. Angular 4.3.3 HttpClient : How get value from the header of a response?
  9. Angular 2 router event listener
  10. In Angular, how do you determine the active route?
  11. Angular2 component’s “this” is undefined when executing callback function
  12. Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]
  13. Angular 4 pass data between 2 not related components
  14. Load existing components dynamically Angular 2 Final Release
  15. Angular 5 Scroll to top on every Route click
  16. Prevent IE11 caching GET call in Angular 2
  17. Call a function on click event in Angular 2
  18. Correct way Provide DomSanitizer to Component with Angular 2 RC6
  19. Whats the difference between using a class and interface?
  20. How to Pass data from child to parent component Angular
  21. Angular2 too many file requests on load
  22. Generate dynamic css based on variables angular
  23. Scroll to element on click in Angular 4
  24. Angular interceptor exclude specific urls
  25. Angular 8 – Lazy loading modules : Error TS1323: Dynamic import is only supported when ‘–module’ flag is ‘commonjs’ or ‘esNext’
  26. How to iterate using ngFor loop Map containing key as string and values as map iteration
  27. Plain Javascript as Angular 2 service
  28. TypeScript TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’
  29. Property ‘catch’ does not exist on type ‘Observable’
  30. binding data to angular checkbox

Leave a Comment