Issue
I have created a custom component in Angular that projects content provided:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-box',
template: '<ng-content select="[body]"></ng-content>',
})
export class BoxComponent {
constructor() {}
}
I use it like this in application.component.html:
<app-box>
<div body>1</div>
</app-box>
Causing digit 1 to be displayed.
Now, I would like to pass variable number of items to the app-box component in the template, and display them selectively in the app-box component.
Something like this:
app-box component:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-box',
template: '<ng-content select="[body]:nth-of-type(2)"></ng-content>', /* :nth-of-type(2) */
})
export class BoxComponent {
constructor() {}
}
app.component.ts:
<app-box>
<div body>1</div>
<div body><b>2</b></div>
<div body><i>3</i></div>
</app-box>
The code presented should show the second div (digit 2).
How to show specific div by its number?
Solution
Since you're working with multiple, variable number of items, I'd do something like the following:
<div *ngFor="let item of items; let i = index">
<app-box itemToShow="i">
<div class="i">1</div>
<div class="i">2</div>
<div class="i">3</div>
</app-box>
</div>
Then, in your app-box
component, you can bind the selector to the itemToShow
input.
<ng-content select=".{{itemToShow}}"></ng-content>
Answered By - Kenneth
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.