6

I have a user component for 2 templates. First template for users table, second one for a user page. I select which template to use by role attribute.

First example of using:

<table>
    <tr user *ngFor="let user of users" [user]="user" role="UserTableItem"></tr>
</table>

In another one template I use my component like this:

<div user [user]="user" role="UserCard"></div>

So, my user component template:

// user.template.html

<user-card [user]="user" *ngIf="role === 'UserCard'"></user-card>
<user-list-item [user]="user" *ngIf="role === 'UserListItem'"></user-list-item>

As we can see, here two components user-card and user-list-item. user-card contains div blocks, user-list-item contains td blocks. And table crashed because I have a <user-list-item> block inside and my table looks like:

<table>
   <tr>
     <user-list-item>
       <td></td>
       <td></td>
     </user-list-item>
   </tr>
</table>

How can I solve my problem and get table like this?

<table>
   <tr>
     <td></td>
     <td></td>
   </tr>
</table>

UPD:

My user component:

// user.component.ts

import { Component, Input, Inject, Attribute } from '@angular/core';
import { UserCard } from './userCard.component';
import { UserListItem } from './userListItem.component';

@Component({
  selector: '[user]',
  templateUrl: './user.template.html',
  directives: [UserCard, UserListItem]
})
export class User {
  @Input() user:any = null;
  role:string;

  constructor(
    @Attribute('role') role) {
    this.role = role;
  }
}

userListItem.template.html:

<td>
    {{user.id}}
</td>

<td>
    <img src="{{user.avatarUrl160}}" alt="User profile picture" width="160">
</td>
// ...

userCard.template.html:

<div class="card card-block" *ngIf="user">
    <h4 class="card-title">
        User #{{user.id}}
        <span class="tag tag-success" *ngIf="!user.isBanned">Active</span>
        <span class="tag tag-danger" *ngIf="user.isBanned">Banned</span>
        <span class="tag tag-danger" *ngIf="user.isDeleted">Deleted</span>
    </h4>
    <p>
        <img width="340" src="{{user.avatarUrl160}}">
    // ...
</div>

<div class="card card-block" *ngIf="user">
    <span class="text-muted">Company: </span> {{user.company.name}}<br>
    <span class="text-muted">Company logo: </span>
    // ...
rel1x
  • 2,351
  • 4
  • 34
  • 62

1 Answers1

9

I find your question a bit confusing but I guess what you want is an attribute selector

@Component({
  selector: '[user-list-item]',
  ...
})
export class UserListItem { ... }

and instead of

<user-card [user]="user" *ngIf="role === 'UserCard'"></user-card>
<user-list-item [user]="user" *ngIf="role === 'UserListItem'"></user-list-item>

use

<td user-card [user]="user" *ngIf="role === 'UserCard'"></td>
<td user-list-item [user]="user" *ngIf="role === 'UserListItem'"></td>
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • But how I will use it here? `
    ` I can use ``     – rel1x Aug 17 '16 at 11:08
  • As I said it was hard for me to get what exactly you try to accomplish from the snippets. Can you please post the complete component code so I can see what selectors you use for each component, what the template of what component exactly is. If there are `` or whatever. – Günter Zöchbauer Aug 17 '16 at 11:12
  • Change user-card and user-list-item to use attribute selectors instead of elements selectors and use it like shown in my updated answer. – Günter Zöchbauer Aug 17 '16 at 11:26
  • You also need to remove the `` elements in your `user-list-item` component. I don't know how `user-card` fits in because there you don't have any `` – Günter Zöchbauer Aug 17 '16 at 11:29
  • `userCard.template.html` contains `div` blocks. I can't use `` like ``. Also, I haven't problem with ``. I have a problem with ``. And again, I can't use `` from your example, cause in result I will get `` – rel1x Aug 17 '16 at 11:31
  • can we use attribute selector for bootstrap component? – tsiro Jul 13 '18 at 19:55
  • @tsiro I think so. Should be easy to find out. – Günter Zöchbauer Jul 14 '18 at 03:10