http://robertdunaway.github.io

Angular2 code kata list

All code katas lists

002 Angular2 - passing data

Duration

5 minutes

Brief

We have a bootstrapped Angular application. Now we want to pass values into the HelloWorld constructor and display it instead of “Hello World”.

For more information

BING/GOOGLE: “Angular2 ”

Read eBook: https://www.ng-book.com/2/

Instructions

Get tutorial folder or the entire katas-angular2 repo.
Open the [before/*.sln] file and execute the kata.
Feel free to execute this kata multiple times because repetition creates motor memory.

Github

• Before (start kata with this)
  
  • https://github.com/robertdunaway/katas-angular2/tree/master/002%20Angular2%20-%20passing%20data/before
• After
  
  • https://github.com/robertdunaway/katas-angular2/tree/master/002%20Angular2%20-%20passing%20data/after

Kata

Add multiple properties (FName, LName, Age) to the HelloWorld class and set their values. Output these values through the template of our app component.

Your class might look something like this.

class HelloWorld {
    FName: string = 'John';
    LName: string = 'Doe';
    Age: number = 25;
}

Your template might look something like this.

@Component({
    selector: 'hello-world',
    template: `
    <div>
        Hello {{FName}} {{LName}} age {{Age}}
    </div>
`
})

Next

Take a few minutes and imagine more examples.