1st Treasure: [Medium - 500 Points] Angular Skill Builder Competition

This is the 500 points Medium level problem of Topcoder Skill Builder Challenge: Angular.
For more challenge context info Register for the Host Competition before submitting a solution to this problem.

1st Treasure

This is the Medium Level with 500 Points Angular Skill Builder Competition

Treasure hunter creates a treasure list, started with a map from an old bottle that he found under the tree behind his home backyard.

Your tasks for this level is to continue the previous solution. So, the application now has a basic title. Next, you need to create a new component to display treasure information and place that component in the application shell.

What do you need to do?

• Learning Material: https://angular.io/tutorial/toh-pt1
• MPORTANT: Follow the exact naming from challenge descriptions, automated testers will check the exact same values.
• Double check your submissions to make sure there are no errors
• There will be 2 sections for this web app with these unique id:

1. Header section

• Use “treasure-header” for the id.
• Use Bootstrap Navbar: https://getbootstrap.com/docs/4.5/components/navbar/
• Use these class: “navbar-expand-lg navbar-dark bg-dark”
• No need include the nav toggler like in bootstrap
• Add h1 with class “navbar-brand” for the title
• Update the the h1 title into “Topcoder Learning Angular Level 2”

2.  List section

• Create new component: ng generate component treasures
• Place a component in app
• Create a new file to mock the treasures: src/app/mock-treasures.ts.
• You must use this exact data:
  • treasure: Treasure = {
  •         id: 1,
  •         name: 'Windstorm Gold Staff',
  •         location: 'Tree behind home',
  • };
• Binding Treasure data to the template
• Insert the treasure component to the main app component
• Create new section, use “treasure-details” for the id and “container-fluid” for the class
• Use this Bootstrap Container Fluid : https://getbootstrap.com/docs/4.5/layout/overview/#fluid
• Add a new h3 title with text {{treasure-name}} + ”Details”
• Display details as list using Bootstrap List : https://getbootstrap.com/docs/4.5/components/list-group/#basic-example
• Show 3 rows for the details list
• Add label for the title of “Id”, “Name” & “Location”
• Id values need use “treasure-id” for the id & plain text
• Name values need use “treasure-name” for the id & text input. Add attributes type="text"
• Location values need use “treasure-location” for the id & plain text
• Two-way data binding need able to changes related h2 when user start typing on the “treasure-name” text input

Instructions:

• We have prepared three problems: Easy, Medium, and Hard, which are worth 250, 500, 1000 points respectively. Points are based on the difficulty of the problem.
• The competitions may or may not be related to each other.
• The links to the problems/competitions are provided below.
• Each problem has one single requirement to achieve. We will judge your submission based on the requirement being fulfilled in each problem, so as long as the requirements are met with minimal code quality, you would be rewarded with points for that particular problem.
• Here is the leaderboard with individual problem score and total score across weeks is available.

Problems

1. Easy: 250 Points :: Treasure Map
2. Medium: 500 Points :: 1st Treasure
3. Hard: 1000 Points :: Treasure Chest

Final Submission Guidelines

Submission deliverables