Geek Answers Handbook

Remove the angular2 component selector tag

I have a custom component for 2 templates. The first template for the user table, the second for the user page. I choose which template to use for the role attribute.

First use case:

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

In another template, I use my component as follows:

 <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, there are two components user-card and user-list-item . user-card contains div blocks, user-list-item contains td blocks. And the table crashed because I have a <user-list-item> block inside and my table looks like this:

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

How can I solve my problem and get the table as follows?

 <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> // ...
+5
source share
1 answer

I find your question a bit confusing, but I assume you want to select an attribute selector

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

and instead

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

using

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

More articles:


All Articles