/angular-friends-list

Primary LanguageTypeScript

Angular Friends List

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