Conversation
Gw0zdziu
commented
Dec 26, 2025
Gw0zdziu
commented
- refactor CardComponent
- refactor ListItemComponent
- declare "@for" in CardComponent
- delete conditions in CardComponent
tomalaforge
added
answer
| template: ` | ||
| <div | ||
| class="flex w-fit flex-col gap-3 rounded-md border-2 border-black p-4" | ||
| [class]="customClass()"> |
There was a problem hiding this comment.
instead of wrapping your component inside another div, you can use the host metadata property
@Component({
host: {
class: `xxx``
}
}
| [name]="item.firstName" | ||
| [id]="item.id" | ||
| [type]="type()"></app-list-item> | ||
| @for (item of list(); let i = $index; track i) { |
There was a problem hiding this comment.
if possible it's better to track on a unique property like an id,
to be sure that list has an id, you can do CardComponent<T extends {id: string}>
also, you don't have to declare i you can use $index directly inside the @for
| const directive = new OptionTemplateDirective(); | ||
| expect(directive).toBeTruthy(); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
this test is a bit useless 😅
| } | ||
| readonly optionTemplateRef = contentChild(OptionTemplateDirective, { | ||
| read: TemplateRef, | ||
| }); |
| <ng-template appOptionTemplate let-city> | ||
| <app-list-item> | ||
| <ng-container ngProjectAs="item-name">{{ city.name }}</ng-container> | ||
| <button ngProjectAs="item-action" (click)="delete(city.id)"> |
There was a problem hiding this comment.
ngProjectAs is not needed here, but you can use it if you prefer
| private store = inject(CityStore); | ||
|
|
||
| cities = this.store.cities; | ||
| cardType = CardType.CITY; |
| class="rounded-sm border border-blue-500 bg-blue-300 p-2" | ||
| (click)="addNewItem()"> | ||
| Add | ||
| </button> |
There was a problem hiding this comment.
you can add the button to list-item, that's a common button for all cards
|
Nice work and thanks for sponsoring the project |
|
This pull request is stale because it has been open for 15 days with no activity. |
|
This pull request was closed because it has been inactive for 5 days since being marked as stale. |
2 participants
