interpolations inside "transcluded" <content> in Angular2 directives. or: accessing parent components inside <content>

[Lior M]

Hi

I've built a directive in Angular 2 that allows "transcluded" template. inside the transcluded template i'd like to access the "parent" directive members. how can I do that? the visibility isnt there out of the box

in other words, in the following code the  ++{{items}}++ interpolation gives me ++++:

index.html:

<c2-dropdown items="['11','12']">

  

       ++{{items}}++

  </c2-dropdown>

c2dropdown.ts:

import {Component, View, NgFor, NgIf} from 'angular2/angular2';

@Component({

  selector: 'c2-dropdown',

  properties:['items']

})

@View({

  templateUrl: './components/C2Dropdown/C2Dropdown.html'

})

export class C2Dropdown { 

  constructor() {

  }

  

}

c2dropdown.html

<div>

       <content></content>

</div>

thanks!!

[Eric Martinez]

Hey Lior,

first of all, I'm going to solve this using alpha36 which was released today

Your first issue is that you are using "content" which was replaced with "ng-content" a few alphas ago (don't remember how many). 

Second, I'm assuming that you are injecting "C2Dropdown" into another Component (I'll call it MainCmp), so your code would look like this

@Component({
  selector: 'c2-dropdown',
  properties:['items']
})
@View({

  template: `
  <div>
       <ng-content></ng-content>
  </div>`

})
export class C2Dropdown {
  constructor() {
  }
 
}

@Component({
 selector : 'app'
})
@View({
 template: `

 <c2-dropdown items="['11','12']">
    ++{{items}}++

  </c2-dropdown>`,
  directives : [C2Dropdown]
})
class MainCmp {
 constructor() {
 }


 onInit() {
 }
}
bootstrap(MainCmp);

If you want to set a attach a property to a component, you must enclose it within "[]". Another issue, since you are calling "{{items}}" from a MainCmp, the compiler is looking for "items" in MainCmp. 

The easiest way to do what you want is like this

@View({
 template: `
 <c2-dropdown #dropdown items="['11','12']">
    ++{{dropdown.items}}++
  </c2-dropdown>`,

Like this you are binding the component to "#dropdown" and then you are printing "dropdown"'s items.

For you can look it better I've set up this plnkr: http://plnkr.co/edit/87uJVSfojFgcCVNfC3XP?p=preview

[Lior Messinger]

Eric- thank you VERY much - worked - that's a __huge__ help

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/8yoAgJOdwNU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lior Messinger
+1-646-3730044 

+972-546-888401

[Lior M]

Hi Eric/Everyone

I tried to use this simple approach on an application with a router, and it turned out not so simple.

The plunker is here

so one issue, is that with a router, the transcluded ng-content is not bound at first. Why is that? 

But the really interesting issue, is that after setTimeout, the items are bound again. Any ideas?? All we do is console.log it... 

thanks so much for any idea

Lior

[Lior Messinger]

Of course, to see the issue, click on 'Entity'. thanks!

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/8yoAgJOdwNU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Eric Martinez]

Lior,

about the first issue I would guess it is because of the compiling time. First compiles and shows the parent, then it reads that there is a ng-content so it takes the children content and compiles it into the ng-content. But I'm not sure about that, don't ever take my answer as an absolute :P.

About the last issue is really interesting, there's something weird there. I recommend you two things :

- Ask in the gitter chat https://gitter.im/angular/angular

- If you don't get an answer in there, ask in the git because to me it sounds like a bug or an unexpected behavior (and post this same plnkr)

By the way, I updated the plnkr to use alpha36, the config is a little bit different http://plnkr.co/edit/UioQJt. If you create the issue in git use that plnkr.