tomalaforge / angular-challenges Goto Github PK

@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)

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!

I found a typo in docs/src/content/docs/guides/getting-started.md:

- ## Install all dependancies
+ ## Install all dependencies

• Home Page (missing the sponsor box)

Guide

• Check out Somebody's Answer
• Contribute
• Create your own challenge
• FAQ
• Getting Started
• Rebase your branch
• Resolve a Challenge

Angular

• Projection (Missing the Bonus Challenges)
• Directive Enhancement
• Typed ContextOutlet
• Crud application
• Structural Directive
• Pure Pipe
• Wrap Function Pipe
• Utility Wrapper Pipe
• Highly Customizable CSS
• Master Dependancy Injection
• Anchor Navigation
• @RouterInput()
• Interoperability Rxjs/Signal
• Module to Standalone
• Change Detection Bug
• Decoupling Components
• InjectionToken
• Signal Input
• View Transition
• React in Angular

Ngrx

• Effect vs Selector
• Power of Effect

NX

• Extend Lib Generator
• Component Generator
• Custom Eslint Rule

Performance

• Optimize Change Detection
• Default vs OnPush
• Memoization
• NgFor Optimization
• Optimize Big List
• Web workers
• Index

Testing

• Router
• Nested Components
• Input Output
• Modal
• Harness
• Harness Creation
• Checkbox
• Real Application
• Index

Rxjs

• High Order Operator Bug
• Race Condition
• catchError

Typescript

• Function Overload

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

• Context: Bob 🧙‍♂️ want's to update the project to the newest version of angular, and take advantage of the new signal feature.
• User Story:
  • Task 1: refactor a Observable to signal
  • Task 2: refactor @ViewChildren() with viewChild() (With a suitable example that highlights the advantages)

Challenge 2: Signal Basics

• Context: Bob 🧙‍♂️ want's to update the project to the newest version of angular, and take advantage of the new signal feature.
• User Story:
  • Task 1: refactor a Observable to signal
  • Task 2: refactor @ViewChildren() with viewChild() (With a suitable example that highlights the advantages)

Challenge 3: Computed function with a ternary inside

• Context: You're working an application which has a light and dark theme. Bob 🧙‍♂️ want's a cleaner way to detect if dark mode is active.
• User Story: refactor a function isDarkModeActive with a computed signal (computed function with a ternary inside)

Challenge 3: ...

• Home Page

Guide

• Check out Somebody's Answer
• Contribute
• Create your own challenge
• FAQ
• Getting Started
• Rebase your branch
• Resolve a Challenge

Angular

• Projection
• Directive Enhancement
• Typed ContextOutlet
• Crud application
• Structural Directive
• Pure Pipe
• Wrap Function Pipe
• Utility Wrapper Pipe
• Highly Customizable CSS
• Master Dependancy Injection
• Anchor Navigation
• @RouterInput()
• Interoperability Rxjs/Signal
• Module to Standalone
• Change Detection Bug
• Decoupling Components
• InjectionToken
• Signal Input
• View Transition
• React in Angular

Form

• Form control Value accessor

Ngrx

• Effect vs Selector
• Power of Effect

NX

• Extend Lib Generator
• Component Generator
• Custom Eslint Rule

Performance

• Optimize Change Detection
• Default vs OnPush
• Memoization
• NgFor Optimization
• Optimize Big List
• Web workers
• Index

Testing

• Router
• Nested Components
• Input Output
• Modal
• Harness
• Harness Creation
• Checkbox
• Real Application
• Index

Rxjs

• High Order Operator Bug
• Race Condition
• catchError

Typescript

• Function Overload

Translate the rest of the missing challenges to spanish

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

• A city service for data access already created
• A city image already in the assets' folder
  (There a variety of images in the PRs; the ones listed below matches with the student and teacher image style)
  • https://github.com/tomalaforge/angular-challenges/pull/343/files#diff-29ee3b110a44bf1d6620c6695a3b32c6d10f525579ee326afc0745ceea86cb79
  • https://github.com/tomalaforge/angular-challenges/pull/376/files#diff-29ee3b110a44bf1d6620c6695a3b32c6d10f525579ee326afc0745ceea86cb79
  • https://github.com/tomalaforge/angular-challenges/pull/384/files#diff-29ee3b110a44bf1d6620c6695a3b32c6d10f525579ee326afc0745ceea86cb79
  • https://github.com/tomalaforge/angular-challenges/pull/125/files#diff-cd0f7d3cc6d0a7e436c8e7760b4603ec153edf2cfc631c053fdd371185d48faa
• Following the other components pattern, move CardComponent HTML to the proprierty template in the @Component decorator

📖 Challenge's documentation

• Add a new source for understading or further reading about ngTemplateOutlet:
  (It's because the official documentations (either Angular.io or Angular.dev) doens't help very much as reading some tutorials or your article with the answer)
  • I'd like to suggest the article "ngTemplateOutlet: The secret to customisation" by Stephen Cooper. Also, his talk about typing in ngTemplateOutlet: https://www.youtube.com/watch?v=ELRCT7ooNCU.
  • Likewise two articles of yours about typing:
    • NgTemplateOutlet Type Checking
    • NgTemplateOutlet Typed Checking (Part 2)
• A section named "A Step Further" (something with this ideia) listing some minichallenges about using some new Angular features like the new control flow syntax (e.g. @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 😄

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:

• Basic info: name, description, difficulty
• author details: name, age, socialUrl
• references: array of useful urls

Now the aim of the challenge is to:

1. Split the form logic into smaller components, while still be able to maintain the form state (valid \ etc)
2. Maintain the form type, using strongly typed forms
3. Be able to reuse the smaller components in different context, such as “edit address” dialog

I think strongly typed forms is a bit tricky when trying to split into components.
What do you think about the idea?

• Home Page

Guide

• Check out Somebody's Answer
• Contribute
• Create your own challenge
• FAQ
• Getting Started
• Rebase your branch
• Resolve a Challenge

Angular

• Projection
• Directive Enhancement
• Typed ContextOutlet
• Crud application
• Structural Directive
• Pure Pipe
• Wrap Function Pipe
• Utility Wrapper Pipe
• Highly Customizable CSS
• Master Dependancy Injection
• Anchor Navigation
• @RouterInput()
• Interoperability Rxjs/Signal
• Module to Standalone
• Change Detection Bug
• Decoupling Components
• InjectionToken
• Signal Input
• View Transition
• React in Angular
• Animations

Form

• Form control Value accessor

Ngrx

• Effect vs Selector
• Power of Effect

NX

• Extend Lib Generator
• Component Generator
• Custom Eslint Rule

Performance

• Optimize Change Detection
• Default vs OnPush
• Memoization
• NgFor Optimization
• Optimize Big List
• Web workers
• Index

Testing

• Router
• Nested Components
• Input Output
• Modal
• Harness
• Harness Creation
• Checkbox
• Real Application
• Index

Rxjs

• High Order Operator Bug
• Race Condition
• catchError

Typescript

• Function Overload

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)

#441 needs the answer author tag.

Also LICENSEV typo ?

• Home Page

Guide

• Check out Somebody's Answer
• Contribute
• Create your own challenge
• FAQ
• Getting Started
• Rebase your branch
• Resolve a Challenge

Angular

• Projection
• Directive Enhancement
• Typed ContextOutlet
• Crud application
• Structural Directive
• Pure Pipe
• Wrap Function Pipe
• Utility Wrapper Pipe
• Highly Customizable CSS
• Master Dependancy Injection
• Anchor Navigation
• @RouterInput()
• Interoperability Rxjs/Signal
• Module to Standalone
• Change Detection Bug
• Decoupling Components
• InjectionToken

Ngrx

• Effect vs Selector
• Power of Effect

NX

• Extend Lib Generator
• Component Generator
• Custom Eslint Rule

Performance

• Optimize Change Detection
• Default vs OnPush
• Memoization
• NgFor Optimization
• Optimize Big List
• Web workers
• Index

Testing

• Router
• Nested Components
• Input Output
• Modal
• Harness
• Harness Creation
• Checkbox
• Real Application
• Index

Rxjs

• High Order Operator Bug
• Race Condition
• catchError

Typescript

• Function Overload

This repo is a good resource and maybe it could help you get more exposure.

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.

as above https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d

With the angular documentation now moving to angular.dev, I think we should start changing the documentation links to point to it instead.

• Home Page

Guide

• Check out Somebody's Answer
• Contribute
• Create your own challenge
• FAQ
• Getting Started
• Rebase your branch
• Resolve a Challenge

Angular

• Projection
• Directive Enhancement
• Typed ContextOutlet
• Crud application
• Structural Directive
• Pure Pipe
• Wrap Function Pipe
• Utility Wrapper Pipe
• Highly Customizable CSS
• Master Dependancy Injection
• Anchor Navigation
• @RouterInput()
• Interoperability Rxjs/Signal
• Module to Standalone
• Change Detection Bug
• Decoupling Components
• InjectionToken
• Signal Input
• View Transition
• React in Angular
• Simple Animation

Ngrx

• Effect vs Selector
• Power of Effect

NX

• Extend Lib Generator
• Component Generator
• Custom Eslint Rule

Performance

• Optimize Change Detection
• Default vs OnPush
• Memoization
• NgFor Optimization
• Optimize Big List
• Web workers
• Index

Testing

• Router
• Nested Components
• Input Output
• Modal
• Harness
• Harness Creation
• Checkbox
• Real Application
• Index

Rxjs

• High Order Operator Bug
• Race Condition
• catchError

Typescript

• Function Overload

Hi ,

• There is typo in doc, please update this typo from npx nx serve rxjs-pipe-bu to npx nx serve rxjs-pipe-bug.
• I am also facing error when running this command NX Could not find any runner configurations in nx.json.
  I have restarted the vs code and run the serve command again. Now i am getting different error: NX Cannot read properties of undefined (reading 'default').

doc url: https://angular-challenges.vercel.app/challenges/rxjs/11-bug-chaining-operator/

Link to challenge:

🟢 Projection

Description

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.

Expected result

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.

• Need to update Cypress to >= 13.5 for Angular 17 syntax.

• Testing Library probably could also be updated.

• @ngrx packages need updates

I follow the steps in site, but i cant start up a single challenge.
I run npm ci
i installed nx with global scope
i tried run npx nx serve angular-permissions --verbose

and i got this error:

I'm using nvm....and tried with ?
v16.12.0
v18.19.0

can anyone help me ?

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:

• Iberican Spanish (es-ES)
• or Latin-American Spanish (es-LA)
• and now Mexican Spanish (es-MX)

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

Expected result: to add the option "forms" in the select. See image below

I want to how ngrx handles nested entities with different entities. This will be very useful to understand entities handling

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.

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.

• Home Page

Guide

• Check out Somebody's Answer
• Contribute
• Create your own challenge
• FAQ
• Getting Started
• Rebase your branch
• Resolve a Challenge

Angular

• Projection
• Directive Enhancement
• Typed ContextOutlet
• Crud application
• Structural Directive
• Pure Pipe
• Wrap Function Pipe
• Utility Wrapper Pipe
• Highly Customizable CSS
• Master Dependancy Injection
• Anchor Navigation
• @RouterInput()
• Interoperability Rxjs/Signal
• Module to Standalone
• Change Detection Bug
• Decoupling Components
• InjectionToken
• Signal Input
• View Transition
• React in Angular

Ngrx

• Effect vs Selector
• Power of Effect

NX

• Extend Lib Generator
• Component Generator
• Custom Eslint Rule

Performance

• Optimize Change Detection
• Default vs OnPush
• Memoization
• NgFor Optimization
• Optimize Big List
• Web workers
• Index

Testing

• Router
• Nested Components
• Input Output
• Modal
• Harness
• Harness Creation
• Checkbox
• Real Application
• Index

Rxjs

• High Order Operator Bug
• Race Condition
• catchError

Typescript

• Function Overload