5

This is my parent component html

<app-card>
  <div class="body">This is body</div>
  <div class="title">This is title</div>
</app-card>

This is my CardComponent 

<div class="card">
            <ng-content  select=".title"></ng-content>
            <ng-content select=".body"></ng-content>
</div>

So I want to access this element (<div class="body">This is body</div>) in the CardComponent, If it was a component I could have access it by ContentChild but how to access this?

I tried using template variable (passing the variable name in the ContentChild) and tried to access it form ngAfterContentInit getting undefined

Pranoy Sarkar
  • 1,965
  • 14
  • 31
  • how about use native "document.querySelector('.body')" inside code of component? Also - it would be easy to help - if you post stackblitz which demonstrates the problem – happyZZR1400 Jan 27 '20 at 08:12
  • Thanks @happyZZR1400 , This will be some hacky way to do that, I just want to check if there is any support from angular. – Pranoy Sarkar Jan 27 '20 at 08:17
  • I you see you need to do some hacky tricks to achieve your goal - it may be a sign that you can do things using some other approach, can you explain in more details - what r u trying to do? – happyZZR1400 Jan 27 '20 at 08:21
  • I plan is to understand ContentChild, everywhere, there are lots example of getting component is given, but nowhere accessing a native element projected in the component is not given, I want to figure it out how to do that – Pranoy Sarkar Jan 27 '20 at 08:26
  • the idea behind the "ng-content" is: put here what you want and it will be rendered inside parent component. So i guess your idea:to make parent to know the native elements of children - it is little bit against the angular-guys idea (according to them parent should be agnositc) – happyZZR1400 Jan 27 '20 at 08:33
  • Their multiple arguments can be made if in my parent component we have like `app-card>nestedCard+someDiv` here in the AppCardCompoent accessing nestedCard is very easy but no way to access someDiv – Pranoy Sarkar Jan 27 '20 at 08:43
  • anyway: parent and child can "talk" using services or "Inputs" (may be this what you need) – happyZZR1400 Jan 27 '20 at 08:45

1 Answers1

1

You can do the following:

  • .html

    <div #myDiv class="body">This is body</div>

  • .ts

    @ViewChild('myDiv', {static: false}) div: ElementRef;

ngAfterViewInit() {
    // now access div here
    console.log(this.div.nativeElement);
}

Here, a reference to the variable myDiv is fetched by using the @ViewChild directive. Once the view for the component has initialized, you will have the corresponding element in the ngAfterViewInit().

The this.div value can be passed using an EventEmitter or a shared service. Now you can subscribe/listen for this change in the child component.

Nicholas K
  • 15,148
  • 7
  • 31
  • 57
  • I think you missed the part `
    This is body
    ` is passed from parent compoenent in the child component all I have is `` and using template reference here doesnot work, I checked     – Pranoy Sarkar Jan 27 '20 at 08:22
  • Oh okay.. Maybe now in the `ngAfterViewInit()`, you can emit `this.div` value using an EventEmitter or a shared service. Now you can subscribe/listen to this change in the child component. Does that work for you? – Nicholas K Jan 27 '20 at 08:29
  • Yes, it works, easily it can be done by `document.querySelector` as commented above, but I want to see if it is achievable by ContentChild. As far as I understand the purpose of ContentChild is to access things that are projected to compoenent, how come such a simple solution is not there. Any way thanks – Pranoy Sarkar Jan 27 '20 at 08:34