Outline
-
Let's Code Together - Flopnames
- Introduction
- Demo Code Introduction
- First Assignment
- Create Toggle Button Event Handler
- Show & Hide the Key
- Toggle Team Name Display
- Toggle Team Name Color
- Handle Grid Cell Click
- Create Background Color Binding
- Set Background to Red on Click
- Create a Model for the Tiles
- Set Background Correctly
- Create new Child Component Files
- Move Game Grid Display to new Child Component
- Write the Initial checkForWinner Method
- Refactor Into a countTile Method
- Log Out the Correct Winner
- Report the Winner to the Parent Component
- Show the User the Winner
- Create the Game Service
- Extract Game Logic to Service & Summary
Outline
-
Let's Code Together - Flopnames
- Introduction
- Demo Code Introduction
- First Assignment
- Create Toggle Button Event Handler
- Show & Hide the Key
- Toggle Team Name Display
- Toggle Team Name Color
- Handle Grid Cell Click
- Create Background Color Binding
- Set Background to Red on Click
- Create a Model for the Tiles
- Set Background Correctly
- Create new Child Component Files
- Move Game Grid Display to new Child Component
- Write the Initial checkForWinner Method
- Refactor Into a countTile Method
- Log Out the Correct Winner
- Report the Winner to the Parent Component
- Show the User the Winner
- Create the Game Service
- Extract Game Logic to Service & Summary
In this video
We set the background correctly when clicked by reading the correct class out of the grid key
Assignment:
- Create a new child component named gamegrid.
- Only create the HTML and TS files. Don't worry about the CSS.
- Create them in their own subdirectory
- Just put in a static H1 inside the template
- Don't remove any HTML or functionality as of yet from the app component
- put a reference to the child component in the app component so that the h1 from the new child component displays just before the game grid
Warning:
After you create the child component, if it's not displaying properly, try saving and reloading the stackblitz project.