angular2-ngcontent

问题 Is is possible to transclude custom column definitions via ng-content or TemplateRef or similar? I've been testing via Kendo UI Grid plunker available at site (http://www.telerik.com/kendo-angular-ui/components/grid/) as well as Angular2 child component as data but to no avail. I've also tried it ng-content select but also nothing. Any help is greatly appreciated, thanks! @Component({ selector: 'test-component', template: ` <kendo-grid [data]="Data"> <kendo-grid-column></kendo-grid-column> //

问题 I have created a tab view, with the following structure: <tabs> <ul #getVCRefHERE > <li>tab1</li> <li>tab2</li> </ul> <tab> <ng-content></ng-content> <!--screen for tab2 --> </tab> <tab> <ng-content></ng-content> <!--content for tab1 --> </tab> </tabs> I create each component: tabs,tab,and the component placed in the ng-content. place. The issue is when I insert at the end of the ViewContainer(it uses ul as it's anchor element) the sequential tabs are nest inside of the tab like this: <tabs>

问题 I'm pretty new in angular2 and I'm trying to make a small angular component called " grid " that simply rearranges its content using transclusion. Its template grid component template (grid.component.ts) <div class="grid"> <div class="row"> <div class="col-xs-4"> <ng-content select="[grid-item-index=0]"></ng-content> </div> <div class="col-xs-4"> <ng-content select="[grid-item-index=1]"></ng-content> </div> <div class="col-xs-4"> <ng-content select="[grid-item-index=2]"></ng-content> </div> <

问题 We are developing a corporate component library which should provide Material Designed Angular Components. So the users of this library are not supposed to use e.g. Angular Material directly but rather include some component like " custom-tabs ". Using the components of MatTabModule directly works like a charm, whereas when using our custom components the projected content does not show up. Usage looks very similar to the Angular Material API: <custom-tabs> <custom-tab [label]="labelA"

问题 depending on the value of a (boolean) class variable I would like my ng-content to either be wrapped in a div or to not be wrapped in div (I.e. the div should not even be in the DOM) ... Whats the best way to go about this ? I have a Plunker that tries to do this, in what I assumed was the most obvious way, using ngIf .. but it's not working... It displays content only for one of the boolean values but not the other kindly assist Thank you! http://plnkr.co/edit/omqLK0mKUIzqkkR3lQh8 @Component

问题 I am successfully using <ng-content></ng-content> to show a component in a grandchild as answered here: Father-to-son component tree with guest component, but now I would like to use @ContentChild in that grandchild to access the passed in content, but I can't seem to get anything working. Here is my attempt using a selector and @ContentChild in a stackBlitz: https://stackblitz.com/edit/angular-dpu4pm . No matter what I do, the @ContentChild is always undefined in TheChild component, but

问题 I've been trying to make a tab view and thought content projection might be a good approach.I learned it from this article. I thought that I could make it dynamic by just inputting a given array of components, and they would be displayed as the page for the selected tab. Here is my attempt at doing this: @Component({ selector: 'my-app', template:` <h1>Experiments</h1> <button class="add-button" (click)="add()">Add</button>` }) export class App { components:Array<any> = [PrepSetupTab

问题 plnkr demo here @Component({ selector: 'my-demo', template: `This is <ng-content select=".content"></ng-content>` }) export class DemoComponent { name = 'Angular'; } @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1> <my-demo><div class="content">In Content</div></my-demo> ` }) export class AppComponent { name = 'Angular'; } I want to conditional ng-content , like <ng-template *ngIf='hasContent(".content"); else noContent'> This is <ng-content select=".content"></ng-content>

问题 My child-component looks like: ... @Component({ selector: '[child-component]' templateUrl: './child.template.html' }) ... and my parent template like: <span child-component [someInput]="123"></span> now I want to render the content of my child component without the <span> container around it. I want no container at all in my parent component's template, just the content of our child-component's template. I tried some other tags already. <ng-content> (nothing rendered at all) <ng-template>

问题 Common menu usage case <menu> <menu-item1></menu-item1> <menu-item2></menu-item2> <menu-item3></menu-item3> </menu> menu template <div *ngIf="open$ | async"> <ng-content></ng-content> </div> I was suprised to hear that all menu-item* components ( and all their children ) will be instantiated despite their presence in DOM and menu component *ngIf state. Their OnInit and AfterViewInit hooks will be called even if menu has never been opened and OnDestroy will never fires despite real adding