angular2-ngcontent

kendo component encapsulation template/component use

☆樱花仙子☆ 提交于 2020-01-13 07:17:13
问题 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> //

Angular: ViewContainer isn't inserting component adjacent to anchor element, but nesting within the component itself

情到浓时终转凉″ 提交于 2019-12-23 05:27:36
问题 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>

Multiple transclusion using ngFor in Angular2

醉酒当歌 提交于 2019-12-21 12:35:26
问题 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> <

Angular Material Tabs not working with wrapper component

时光毁灭记忆、已成空白 提交于 2019-12-20 10:11:03
问题 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"

How to conditionally wrap a div around ng-content

吃可爱长大的小学妹 提交于 2019-12-17 10:33:50
问题 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

How can I use ContentChild/Children in nested <ng-content>

不羁岁月 提交于 2019-12-13 13:02:04
问题 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

Angular 2- ContentChidren of parent component are undefined when dynamically creating child component

五迷三道 提交于 2019-12-13 00:04:27
问题 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

In angular2, how can I detect is there any ng-content?

不想你离开。 提交于 2019-12-11 08:44:14
问题 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>

Angular2+ render a component without any wrapping tag at all

半腔热情 提交于 2019-12-11 05:42:08
问题 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>

Instantiate transcluded components depending on their DOM state in angular 2

你说的曾经没有我的故事 提交于 2019-12-06 19:16:40
问题 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