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
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.
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!
Guide
Angular
Ngrx
NX
Performance
Testing
Rxjs
Typescript
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?
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 😄
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 ?
Need to update Cypress to >= 13.5 for Angular 17 syntax.
Testing Library probably could also be updated.
@ngrx packages need updates
Guide
Angular
Ngrx
NX
Performance
Testing
Rxjs
Typescript
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
I want to how ngrx handles nested entities with different entities. This will be very useful to understand entities handling
Guide
Angular
Ngrx
NX
Performance
Testing
Rxjs
Typescript
Guide
Angular
Form
Ngrx
NX
Performance
Testing
Rxjs
Typescript
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)
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.
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.
@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)
Guide
Angular
Form
Ngrx
NX
Performance
Testing
Rxjs
Typescript
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.
Challenge 1: Signal Effect Bug | bug-effect-signal
signal
feature.Observable
to signal
@ViewChildren()
with viewChild()
(With a suitable example that highlights the advantages)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 3: ...
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.
#441 needs the answer author
tag.
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/
Translate the rest of the missing challenges to spanish
This repo is a good resource and maybe it could help you get more exposure.
Guide
Angular
Ngrx
NX
Performance
Testing
Rxjs
Typescript
I found a typo in docs/src/content/docs/guides/getting-started.md
:
- ## Install all dependancies
+ ## Install all dependencies
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.