tomalaforge / angular-challenges Goto Github PK
View Code? Open in Web Editor NEWSet of Angular challenges to practise and train on Angular
Home Page: https://angular-challenges.vercel.app
Set of Angular challenges to practise and train on Angular
Home Page: https://angular-challenges.vercel.app
I think it's a good idea to discuss about new challenges in the first place. So I've created this "issue" here to talk about it. Hope that's fine.
Since we talked about signal
challenges in my last challenge proposal, I've thought about a cool challenge user story. It might be a 3/4 parts series about signals, including the new input
, output
, viewChild
syntax among other things. My idea would be to create a new section in the challenges (like angular, forms, performance, testing, ...) for signals. That could be a eyecatcher for devs who want to learn more about signals.
Here is our discussion from my last challenge proposal, if you want to look at it again. Feel free to give some feedback to the draft below.
Example:
Challenge 1: Signal Effect Bug | bug-effect-signal
computed
signal.Challenge 2: Signal Basics
signal
feature.Observable
to signal
@ViewChildren()
with viewChild()
(With a suitable example that highlights the advantages)Challenge 3: Computed function with a ternary inside
isDarkModeActive
with a computed
signal (computed function with a ternary inside)Challenge 4: ...
Hello, everybody! 👋
I've been thinking if it's possible to add "pt-BR" (i.e. brazilian portuguese) as a new language for the I18n.
I'll be glad to help in the translation. Also, If someone wants to help, please let me know.
I'm suggesting this, because some friends at my work doesn't have a good grasp in English. Likewise, I would dare to say that more people who uses Angular could enjoy the challenges if it was in portuguese. So it would be nice to make these challenges available to more languages.
PS: Sorry for any language/grammar mistake 🙋
Cheers!
Since you didn't actually use any Tailwind styling, when you run the app, you get a warning in the terminal. It can be fixed by commenting out the Tailwind styles or removing them. If you want to delete the Tailwind styles, the Tailwind config can be removed as well. Of course, a style could added to the form and then the warning will be gone as well.
Unrelated issue with Tailwind in VSCode, there will be warnings when using @tailwind
syntax (only seen when user goes to the file).
In the VSCode settings.json
, this could be added to eliminate those warnings:
"files.associations": {
"*.scss": "tailwindcss"
}
This is really minor stuff, but less confusion for challengers.
I don't know if you want bother updating all those articles vs adding a note in the docs about how not to worry about different titles in the articles and just match the challenge number. This is something that it didn't occur to me until the discussion about permissions
was posted. If you were new to the repo and had no prior knowledge, you might overlook the challenge number and look for the previous challenge name and find it missing and get confused.
I found a typo in docs/src/content/docs/guides/getting-started.md
:
- ## Install all dependancies
+ ## Install all dependencies
So, we have 3 native Spanish speakers, and we didn't decide the right localization
When I started to do my part of translations, I didn't consider if it should be:
The funny part: all of the Spanish translators (@ErickRodrCodes, @eduardoRoth and @nelsongutidev ) are Latin-American folks :)
The constrains between ex-MX and es-LA overlaps each other. My suggestion is to use ES without no localization, and here is why: we are talking to our community in technical language that is common. the context of the exercises remains intact because the language is very standard, and we don't talk about local lexical context. Example: We know we have to have a "git fork" to contribute, but when we translate back to Spanish, there is no way we say "git tenedor" because it is technical language.
I read through all the exercises and in my opinion, there is few rooms for specific lexical variation given the kind of language we intend to provide. So, it is better we just leave ES instead breaking up on multiple Spanish localizations.
cc @tomalaforge
Guide
Angular
Ngrx
NX
Performance
Testing
Rxjs
Typescript
Guide
Angular
Ngrx
NX
Performance
Testing
Rxjs
Typescript
Guide
Angular
Ngrx
NX
Performance
Testing
Rxjs
Typescript
This repo is a good resource and maybe it could help you get more exposure.
I want to how ngrx handles nested entities with different entities. This will be very useful to understand entities handling
Hi ,
npx nx serve rxjs-pipe-bu
to npx nx serve rxjs-pipe-bug
.NX Could not find any runner configurations in nx.json
. NX Cannot read properties of undefined (reading 'default')
.doc url: https://angular-challenges.vercel.app/challenges/rxjs/11-bug-chaining-operator/
I'm starting a new issue, this will be easier to follow.
From @jdegand
I think the dark mode problems may stem from the binding of the theme. See this giscus issue. On my computer the comment section is still white on the dark mode as well. You are binding in the comment section.astro file with data-theme="preferred_color_scheme"
. I noticed inspecting source code both light and dark in some classes.
Giscus doesn't really seem to support / advertise Angular support (Giscus component has no version for Angular) and I think the binding issue is probably why.
It is just a minor issue.
Originally posted by @jdegand in #377 (comment)
Need to update Cypress to >= 13.5 for Angular 17 syntax.
Testing Library probably could also be updated.
@ngrx packages need updates
Guide
Angular
Form
Ngrx
NX
Performance
Testing
Rxjs
Typescript
Translate the rest of the missing challenges to spanish
create an injection token to hide the push service implementation.
-> Couldn't you just remove the notifications service completely and inject the push service and recreate the init
method in each store ? i.e. When we navigate to any route, the init method will dispatch an event and a new student etc will be added to the list. This does work but the notifications will continue when you navigate away from that route. Notifications for each route should be displayed only when the user is on that route.
Option 1: set SchoolStore in root, but we don't want this to separate our class.
-> This is unclear.
You can't listen to an action to trigger an effect with the SchoolStore because the SchoolStore uses Component Store. A Component Store has no actions. So even if it is set in root, I don't see how that would work.
I used a global effect for a snackbar alert and added a student effect like this
addStudent$ = createEffect(() =>
this.actions$.pipe(
ofType(studentActions.addOneStudent),
map(action =>
appActions.showAlert({
message: "Add 1 Student"
})
)
)
);
This causes a snackbar alert with the message.
I could rewrite the school store to mimic the other stores but that is not the intended fix.
// from school.store
private readonly loadSchools = this.effect<void>(
pipe(
switchMap(() =>
this.httpService.getAllSchools().pipe(
tapResponse(
(schools) => this.patchState({ schools }),
(_) => _ // This confused me initially. Best to add a comment that you don't have to implement error handling ?
)
)
)
)
);
The directions could use a mention of Angular Material snackbar since Angular Material is an included dependency.
With the angular documentation now moving to angular.dev, I think we should start changing the documentation links to point to it instead.
Also LICENSEV
typo ?
Guide
Angular
Ngrx
NX
Performance
Testing
Rxjs
Typescript
Constraints section includes such point, maybe we should change it to ListItemComponent
?
The NgFor directive must be declared and remain inside the
CardComponent
. You might be tempted to move it to the
CardComponent
but avoid doing so.
The NgFor directive must be declared and remain inside the
CardComponent
. You might be tempted to move it to the
ListItemComponent
but avoid doing so.
#441 needs the answer author
tag.
@tomalaforge can you add the answer label for that PR? currently it's not visible under "Community solutions", i was surprised for a moment because i thought i had already done this challenge 😄
Originally posted by @svenson95 in #704 (comment)
Hi, Thomas 👋 How are you?
I've just finished the first challenge about Projection and I'd like to suggest some additions that I believe it would make a better experience for developers allowing them to focus in the projection side of the challenge.
These considerations are based on some common behaviours among some PRs that I saw during my challenge implementation.
🖥 Project's code
CardComponent
HTML to the proprierty template
in the @Component
decorator📖 Challenge's documentation
ngTemplateOutlet
:ngTemplateOutlet
: https://www.youtube.com/watch?v=ELRCT7ooNCU.@if
, @for
, @empty
) and signals for state management, since in some comment of yours, you recommend to use theses features.What do you think?
Take care and have a nice day 😄
I didn't think of this earlier, but did the file changes break functionality with pulling past PRs with the GitHub CLI? Has anyone tried this? This could be a big problem.
ngrx notification
is in the libs folder whereas challenge is called 7-power of effect
.
bug-signal-effect
vs. 50-bug-signal-effect
. And bug-signal-effect
is not in the signal category.
Each challenge's index.html
has the older title.
The size of the repo has doubled in the past few months. I'd suggest you remove rx-angular
from dependencies. Unless you have an rx-angular
challenge in progess, I'd remove it. rx-angular
has 4,000 npm downloads a week. Niche dependencies like @ngrx/signals
(7,000 a week) can added per PR. If you remove rx-angular etc, previous PR could break so you'd have to add a warning to the docs when checking out a PR with rx-angular or any removed dependency.
A common task for any web developer is to build forms, some of them are more than just a simple “login” form.
Lets take an example of creating “Create new Challenge” form, with 3 parts:
Now the aim of the challenge is to:
I think strongly typed forms is a bit tricky when trying to split into components.
What do you think about the idea?
There is some shared component used in every page, but we need to use a key for i18n instead of a default english phrase.
The goal of this issue is to prepare the work by creating keys that can be translated afterwards.
Guide
Angular
Form
Ngrx
NX
Performance
Testing
Rxjs
Typescript
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.