angular2-ngcontent

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-removing from DOM. Here is a closed issue about this https://github.com/angular/angular/issues/13921 (there

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> </div> <div class="row"> <div class="col-xs-4"> <ng-content select="[grid-item-index=3]"></ng-content> <

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">Content A</custom-tab> <custom-tab [label]="labelB">Content B</custom-tab> <custom-tab [label]="labelC"

I'm trying to create a tab component using bootstrap. <app-tabs> <app-tab [label]="'label1'">Description 1</app-tab> <app-tab [label]="'label2'">Description 2</app-tab> </app-tabs> I had a look at this article: https://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/ but my use case is different. I need to use a different <ng-content> in each loop of the for. This is my plunker: https://plnkr.co/edit/N2p8Vx?p=preview It prints both descriptions in the second tab, leaving the first one empty. Appreciate any help! You can take a look at how angular material implemented tabs control.

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({ selector: 'my-component', template: ` <div *ngIf="insideRedDiv" style="display: inline; border: 1px

What I'm trying to achieve is a generic component that is bound to an array of arbitrary objects that allows adding and removing rows dynamically when the view of each row is also arbitrarily defined with components by a master component that uses it. Note that MasterComponent is an arbitrary component that would be implemented for different pages and is intended to be self contained and not defined by any metadata or external source. What I have so far are the following Components: RepeaterComponent template : <input type="button" value="Add" (click)="addRow()"> <div class="repeater" *ngFor=