NG010 Angular for kids: the Sticker Board

Predict

The file says <h1>Hello</h1>. If we change Hello to Pixel, what does the page show?

Lesson

A web page is a text file. The browser reads it and draws it. Words inside tags like <h1> are drawn big; the tags are instructions and stay invisible.

Demo

The tutor opens node/ng010/demo/index.html next to the App Preview, changes Hello to Biscuit, saves, and the preview changes at once. Then the tutor puts it back.

Hands-on

Open node/ng010/s1/index.html. Change the word inside the <h1> from Hello to Pixel, save, and watch the preview change.

Explain

Say it out loud: where did the word on the page come from?

Check

The big heading says Pixel — checked (T3): web_dom

#s1-1

Predict

Which tag makes a normal sentence, not a big heading?

Lesson

<h1> is the biggest heading, <h2> a smaller one, and <p> is a paragraph: a sentence or two in normal size. Every opening tag has a closing tag with a slash.

Demo

The tutor adds an <h2> that says "Pixel likes" and a <p> sentence under it in the demo page, then forgets the closing </p> on purpose and shows how the page looks squashed before fixing it.

Hands-on

Under the heading in s1/index.html add an <h2> that says Pixel likes and a <p> with one sentence about Pixel (Pixel is a robot who likes shiny things).

Explain

Point at the two tags you added and say what each one does.

Check

An h2 and a paragraph are on the page — checked (T3): web_dom

#s1-2

Predict

A list with <ul> and three <li> inside: how many dots appear?

Lesson

<ul> starts a bulleted list and each <li> inside it is one item. The browser puts a dot in front of every item and lines them up for you.

Demo

The tutor adds a <ul> with three <li> items (bolts, magnets, a torch) to the demo page and the preview shows three dots. Adding a fourth <li> makes a fourth dot appear.

Hands-on

Add a <ul> with three <li> items to s1/index.html: three things Pixel likes. Make each one a different word.

Explain

What would happen if you added a fourth <li>?

Check

A list with three items — checked (T3): web_dom

#s1-3

Predict

Which comes first on the page: the heading or the list?

Lesson

All of it together: a heading, a sentence and a list, in the order they sit in the file. The browser reads from the top down, like a story.

Demo

The tutor builds the demo page from empty: h1, p, ul with three li, saving after each tag so the preview grows one piece at a time, then shows the machine's check reading the page.

Hands-on

Make s1/index.html Pixel's finished page: an <h1> that says Pixel, one <p> sentence, and a <ul> with three <li> things Pixel likes. The machine will check all three are there.

Explain

Tell the grown-up: which three tags did you use and what does each draw?

Check

Pixel's page has a heading, a sentence and three list items — checked (T3): web_dom

#s1-4

Predict

The rule h1 { color: orange; } is added. What turns orange?

Lesson

A style rule has two parts: which tags it picks (the selector) and how to draw them (inside the curly brackets). h1 { color: orange; } colours every h1 orange.

Demo

The tutor adds a <style> block to the demo page's head with h1 { color: orange; }, saves, and the heading turns orange. Changing orange to teal changes it again.

Hands-on

Add a <style> block inside the <head> of node/ng010/s2/index.html (a copy of your s1 page is there) and give the h1 a colour you like, written as a colour word.

Explain

Which part of the rule said who gets the colour?

Check

A style block colours the heading — checked (T3): seat_file web_dom

#s2-1

Predict

A div gets border: 3px solid black and background: yellow. What do you see?

Lesson

A <div> is an empty box. Give it a class name, then a rule for .sticker with a border, a background colour, some padding and a width, and the box becomes a sticker you can see.

Demo

The tutor adds <div class="sticker">Bolt</div> and a .sticker rule with border, background, padding and width. Changing the padding number makes the sticker fatter.

Hands-on

In s2/index.html add one <div class="sticker"> with a word inside, and a .sticker rule with a border, a background colour and padding so it looks like a sticker.

Explain

What does padding do to the sticker?

Check

One sticker box with a border and background — checked (T3): web_dom seat_file

#s2-2

Predict

Three divs sit in a parent with display: flex. How do they line up?

Lesson

Boxes normally stack top to bottom. Put them inside a parent <div class="row"> and give the row display: flex and a gap, and the boxes stand side by side with space between.

Demo

The tutor wraps three stickers in <div class="row">, adds .row { display: flex; gap: 12px; } and the column becomes a row. Removing display: flex makes them stack again.

Hands-on

Put three .sticker divs inside a <div class="row"> in s2/index.html and add a .row rule with display: flex and a gap, so the stickers sit in a row.

Explain

Which box got the flex rule: the stickers or the row around them?

Check

Three stickers inside a flex row — checked (T3): web_dom seat_file

#s2-3

Predict

Two stickers share class sticker, one also has class gold. Which rule wins for its colour?

Lesson

A sticker can have two classes: sticker for the shape and a colour class for its own background. Later rules win, so the colour class goes after .sticker in the style block.

Demo

The tutor gives each of the three demo stickers a second class (red, gold, sky) with its own background rule, then shows the machine's check counting the stickers and reading the colours.

Hands-on

Finish s2/index.html: a coloured h1, a .row with three .sticker boxes, each with its own second class and a different background colour. Keep the h1, p and list from session 1 above the row.

Explain

Tell the grown-up how one sticker got a different colour from the others.

Check

Heading coloured, three stickers in a row with three colour classes — checked (T3): web_dom seat_file

#s2-4

Predict

The tutor runs the build and opens the preview. Which file holds the words you see?

Lesson

The board in node/ng010/board is an Angular app: a folder of files that a build turns into a page. One component, the board, owns what you see. Its template file holds the words and tags.

Demo

The tutor opens node/ng010/board, runs ng build in the terminal, opens dist/board/browser in the App Preview, and then opens src/app/board.component.html to show the words on the page sitting in the file.

Hands-on

Open node/ng010/board/src/app/board.component.html, find the words "Sticker Board", and read them aloud. Ask the tutor to build; the preview should show the same words. No changes yet.

Explain

Which file has the words the board shows?

No machine check: this step is marked done on your word (T0).

#s3-1

Predict

You change a word in board.component.html and save. When does the preview change?

Lesson

The template is HTML like your page from session 1. Change a word, save, build, and the preview shows it. The build is the step that turns the folder into a page.

Demo

The tutor changes the <p> under the heading in the demo copy node/ng010/demo-board to say "Pixel collects stickers", runs ng build, refreshes the preview, and the sentence has changed.

Hands-on

In node/ng010/board/src/app/board.component.html change the <p> sentence to a sentence about Pixel. Ask the tutor to build and check the preview.

Explain

What did you have to do after saving to see the change?

Check

The board sentence mentions Pixel and the build passes — checked (T3): seat_build seat_file

#s3-2

Predict

The class has title = "Board" and the template has <h1>{{ title }}</h1>. What shows?

Lesson

The other side of the brick is board.component.ts, the class. A value like title = 'Board' lives there and the template shows it with {{ title }}. Change the value once and every place it is shown changes.

Demo

The tutor adds owner = 'Biscuit' to the demo class and {{ owner }} in two places in the template, builds, and both places show Biscuit. Changing the class value to Mango changes both.

Hands-on

In board.component.ts change the title value to a title of your own. In board.component.html make sure the <h1> shows {{ title }}. Build and look.

Explain

Why do the curly brackets help when the same word appears twice?

Check

The h1 shows {{ title }} from the class — checked (T3): seat_build seat_file seat_file

#s3-3

Predict

Two values, title and subtitle, in the class. How many {{ }} do you need in the template?

Lesson

A board with two values from the class: a title in the h1 and a subtitle in the p. The template says where, the class says what.

Demo

The tutor adds subtitle = 'Stickers from the robot workshop' to the demo class and {{ subtitle }} to the p, builds, and shows the machine's check reading the built page.

Hands-on

Give the class a title of "Pixel's Sticker Board" and a subtitle of your own words; show both with {{ }} in the h1 and the p. Build and check the preview.

Explain

Tell the grown-up the two sides of a component brick.

Check

Title and subtitle come from the class — checked (T3): seat_build seat_file web_dom

#s3-4

Predict

<button (click)="cheer()">Cheer</button> is pressed. What happens?

Lesson

A <button> is a thing to press. (click)="cheer()" tells Angular that pressing it runs the method cheer() in the class. Without (click) a button just sits there.

Demo

The tutor adds a button to the demo board with no (click) and presses it: nothing. Then adds (click)="cheer()" and a cheer() method that logs to the console, presses again, and the console shows the message.

Hands-on

Add <button (click)="cheer()">Cheer</button> to the board template and a cheer() method in the class that writes "Cheer!" with console.log. Build, press it, and look in the browser console.

Explain

What does the (click) part mean in your own words?

Check

A Cheer button wired to cheer() — checked (T3): seat_build seat_file seat_file

#s4-1

Predict

cheers = signal(0) and cheer() does this.cheers.update(n => n + 1). After three presses?

Lesson

A signal is a value the page watches. cheers = signal(0) starts at zero; this.cheers.update(n => n + 1) adds one. In the template, {{ cheers() }} shows it, brackets included, and it changes on its own.

Demo

The tutor adds cheers = signal(0) to the demo class, makes cheer() update it, puts {{ cheers() }} in the template, builds, and presses the button while the number climbs.

Hands-on

Add cheers = signal(0) to the class (import signal from @angular/core), make cheer() add one with update, and show {{ cheers() }} in the template next to the button.

Explain

Why does the number on the page change without you doing anything else?

Check

A cheers signal shown in the template — checked (T3): seat_build seat_file seat_file

#s4-2

Predict

reset() does this.cheers.set(0). The counter shows 7 and Reset is pressed. Then?

Lesson

set gives a signal a brand-new value; update changes it from what it was. A Reset button that calls this.cheers.set(0) wipes the count.

Demo

The tutor adds a Reset button and reset() with set(0) to the demo board, clicks Cheer five times, then Reset, and the number drops to 0.

Hands-on

Add a second button, Reset, with (click)="reset()", and a reset() method that sets cheers to 0. Build and try: cheer a few times, then reset.

Explain

What is the difference between set and update?

Check

A Reset button sets the signal to 0 — checked (T3): seat_build seat_file seat_file

#s4-3

Predict

The machine tries your board: Cheer twice, Reset, Cheer once. What number should it see?

Lesson

The whole counter: a signal, a Cheer button that updates it, a Reset button that sets it, and the number on the page. The machine will press the buttons for you and read the number.

Demo

The tutor rebuilds the demo board's counter from scratch in two minutes and then runs the course's test file that presses the buttons and reads the number, showing the green result.

Hands-on

Make sure the board has the cheers signal, a Cheer button, a Reset button and the number shown in a <span class="count">. Build it; the machine will press the buttons and read the span.

Explain

Tell the grown-up what a signal is.

Check

Cheer and Reset work when the test presses them — checked (T3): seat_build seat_test

#s4-4

Predict

stickers = signal(['Bolt', 'Magnet', 'Torch']). How many stickers are in the list?

Lesson

Square brackets make a list: ['Bolt', 'Magnet', 'Torch']. Put the list in a signal so the page can watch it. {{ stickers().length }} shows how many there are.

Demo

The tutor adds stickers = signal(['Bolt', 'Magnet', 'Torch']) to the demo class and shows the count with {{ stickers().length }}; adds a fourth name and the count says 4.

Hands-on

Add a stickers signal to the class with three sticker names of your own choosing (things, not people). Show the count in the template: "Stickers: {{ stickers().length }}".

Explain

What are the square brackets for?

Check

A stickers signal with three names and a count — checked (T3): seat_build seat_file seat_file

#s5-1

Predict

@for (s of stickers(); track s) { <div class="sticker">{{ s }}</div> } with three names draws?

Lesson

@for repeats a piece of template for every item in a list. Inside, s is the current name. track s tells Angular how to tell the boxes apart. Give the box the .sticker class from session 2 and it looks like one.

Demo

The tutor replaces the one demo sticker with an @for over stickers(), builds, and three boxes appear. Adding a name to the list in the class adds a box.

Hands-on

Replace any single sticker in the template with an @for over stickers(), drawing <div class="sticker">{{ s }}</div> for each. Copy the .sticker and .row styles into board.component.css.

Explain

What is s inside the @for?

Check

@for draws a sticker box per name — checked (T3): seat_build seat_file web_dom

#s5-2

Predict

add() does this.stickers.update(list => [...list, 'Star']). Press it twice: how many Stars?

Lesson

To add to a list in a signal, make a new list: [...list, 'Star'] means "everything that was there, then Star". update hands you the old list and takes the new one. The @for draws the extra box on its own.

Demo

The tutor adds an Add button and add() with update and spread in the demo board, builds, and presses it three times while three Star boxes appear at the end of the row.

Hands-on

Add a button "Add Star" with (click)="add()" and an add() method that updates stickers to the old list plus 'Star'. Build and press it.

Explain

Why do we make a new list instead of pushing onto the old one?

Check

An Add button grows the list — checked (T3): seat_build seat_file seat_file

#s5-3

Predict

Three stickers to start. The machine presses Add Star twice. How many boxes?

Lesson

All of session 5 together: a list signal, an @for that draws a box per item, an Add button that grows the list. The machine will press Add and count the boxes.

Demo

The tutor runs the supplied stickers.spec.ts against the demo board: it counts three boxes, presses Add twice and counts five, and the result goes green.

Hands-on

Check the board has three starting stickers, the @for row and the Add Star button; copy the supplied stickers.spec.ts from node/ng010/samples/s5 into the board and ask the tutor to run ng test.

Explain

Tell the grown-up what @for does.

Check

Three boxes, then five after two Adds — checked (T3): seat_build seat_test

#s5-4

Predict

A sticker is { name: 'Bolt', color: 'gold' }. In the @for, what shows the name?

Lesson

A sticker can be a record: a name and a colour together in curly brackets, { name: 'Bolt', color: 'gold' }. The list holds records, and in the @for you write s.name for the words.

Demo

The tutor changes the demo list to three records with colours, updates the @for to {{ s.name }}, builds, and the names still show. A Sticker type with name and color is added so mistakes are caught.

Hands-on

Change your stickers list to records, each with a name and a color, with a Sticker type above the class. Change the @for to show {{ s.name }}. Make add() add { name: 'Star', color: 'gold' }.

Explain

What two things does each sticker record hold now?

Check

Stickers are records with name and color — checked (T3): seat_build seat_file seat_file

#s6-1

Predict

[style.background]="s.color" on the sticker div. A sticker has color gold. What colour is its box?

Lesson

Square brackets on an attribute bind it to a value: [style.background]="s.color" paints each box with its own colour from the record. No new CSS class per colour needed.

Demo

The tutor adds [style.background]="s.color" to the demo @for box, builds, and three different colours appear. Changing one colour word in the class repaints one box.

Hands-on

Add [style.background]="s.color" to the sticker div inside your @for. Build and look: each sticker should wear its own colour.

Explain

What do the square brackets do that curly brackets do not?

Check

Each sticker is painted from its record — checked (T3): seat_build seat_file

#s6-2

Predict

remove('Bolt') keeps every sticker whose name is not Bolt. Five stickers, one Bolt. After?

Lesson

To remove, make a new list without that sticker: list.filter(x => x.name !== name). Each box gets its own small Remove button that calls remove(s.name).

Demo

The tutor puts a small x button inside each demo sticker with (click)="remove(s.name)" and a remove() method with filter; pressing an x makes that box vanish.

Hands-on

Add a <button class="x" (click)="remove(s.name)">x</button> inside each sticker and a remove(name) method that filters the list. Build and remove a sticker.

Explain

What does filter keep?

Check

A Remove button filters the list — checked (T3): seat_build seat_file seat_file

#s6-3

Predict

The machine gives your board stickers you never typed and presses Add once. What must the summary say?

Lesson

The show: coloured stickers from records, Add and Remove, the cheer counter, and a summary line "<span class="summary">N stickers, M cheers</span>" that uses a computed signal. The machine tries it with its own stickers.

Demo

The tutor adds summary = computed(() => ...) to the demo board and the summary span, then runs the hidden test, which swaps in four new stickers, presses Add and Cheer, and reads the summary.

Hands-on

Add a computed summary signal and show it in <span class="summary">. Make sure Add, Remove and Cheer all work and the board shows title and subtitle. Ask the tutor to run the check.

Explain

Tell the grown-up the three things your board can do.

Check

The Sticker Board works with stickers the machine chose — proven (T4): seat_build web_dom seat_test

#s6-4