Angular Friends List

Learning objectives

• Be able to create a component in Angular
• Sending data to child component from a parent component
• Sending data to a parent component from a child component

Prerequisites

If you have never used Angular before, run the following command in a terminal to install the Angular CLI

npm install -g @angular/cli

Setup

• Fork this repo to your own github account
• Clone your forked repo
• Open the project in VSCode
• Open a terminal and run the command npm install to install the dependencies

Instructions

Familiarise yourself with the existing App component (Take a look at the Angular component recap for an idea of the different parts of the component)

Implement the following requirements:

• Create a people component that will display a person's name and has a button to allow a user to select them as a favorite
• When the button is clicked, set the favorite property in the app component to the person who was selected to be the favorite

Running the app

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Generating a new component

Run ng generate component component-name to generate a new component.

Extensions

• Add the ability to have multiple favorite friends
• Add a remove button to remove a friend as a favorite

Help

Take a look at the Angular recap for examples on how we can:

• Send data into a child component from a parent component
• Send data from a child component to a parent component