Skip to content

Answer:1 Angular projection challenge #1334

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

pchessah
Copy link

Checklist for challenge submission

  • Start your PR message with Answer:${challenge_number}

Warning:

  • If you want feedback or review, you must support the project on GitHub:

Alternatively, you can still submit your PR to join the list of answered challenges or to be reviewed by a community member. 🔥

@github-actions github-actions bot added 1 exercice projection answer answer labels May 20, 2025
@tomalaforge tomalaforge added the sponsor sponsor the project label May 20, 2025

@Component({
selector: 'app-list-item',
template: `
<div class="border-grey-300 flex justify-between border px-2 py-1">
{{ name() }}
<button (click)="delete(id())">
<ng-content></ng-content>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: use self-closing tag. it's nicer 😅

this.studentStore.deleteOne(id);
}
}
delete = output<number>();
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you don't need to output the id, you can just emit an event and the parent will passs the id to the function

[name]="item.firstName"
[id]="item.id"
[type]="type()"></app-list-item>
<app-list-item [id]="item.id" (delete)="delete.emit($event)">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could move the app-list-item directly in the parent. but this works

readonly list = input<any[] | null>(null);
readonly type = input.required<CardType>();
readonly cardImgSrc = input.required<string>();
readonly nameTemplate = input<TemplateRef<any>>();
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do you use an input, most of the time you should use a contentchild with template


ngOnInit(): void {
this.http.fetchCities$.subscribe((t) => this.store.addAll(t));
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you could try to refactor this using httpRessource or rxRessource to be more declarative

@tomalaforge
Copy link
Owner

great work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1 exercice projection answer answer sponsor sponsor the project
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants