Live coding: User posts

• For senior developers using modern Angular, use the default app (ng serve).
• For senior developers using legacy code, use the senior-dev-legacy project (ng serve senior-dev-legacy).
• For junior developers, use the junior-dev project (ng serve junior-dev).

Steps to follow (for senior developers using modern Angular)

• Adds minimal global CSS

• Creates layout component

• Inserts layout component into app component

• Creates menu component

• Inserts menu component into app component

• Creates home component

• Adds routing for home component

• Creates not-found component

• Adds routing for not-found component (including "catch-all" route)

• Creates user-posts component (without implementation)

• Adds routing (with parameter) for user-posts component

• Creates user-post interface

• Creates user-posts service

• Creates user-posts resolver

• Adds user-posts resolver to the user-posts route

• Completes user-posts component implementation

• Creates user-post-item component

• Inserts user-post-item component into user-posts component

Nice to have

• Creates ellipsis pipe
• Uses ellipsis pipe for the body in user-post-item component

Concepts covered in this coding game

• Component (HTML, CSS and TS)
• Property binding and event listener in templates
• Control-flow
• Content projection (ng-content)
• Parent-child communication between components (input)
• ApplicationConfig providers
• Routing (Router, Route, RouterLink, RouterLinkActive, Lazy loading, Resolver, withComponentInputBinding, RedirectCommand)
• Service
• HttpClient and some RxJS (map and catchError operators)
• Signal
• Pipe (nice to have)