Code Monkey home page Code Monkey logo

angular-friends-list's Introduction

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

angular-friends-list's People

Contributors

auenc avatar guro18 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.