Image description

ProGrad Lab | Testimonials

Learning Goals

After this lesson, you will be able to:

  • Create a static Angular application with Angular CLI.
  • Build an Angular application with one component.

Requirements

  • Fork this repo.
  • Clone this repo.

Submission

Upon completion, run the following commands:

$ git add .
$ git commit -m "done"
$ git push origin master

Navigate to your repo and create a pull request from your master branch to the original repository's master branch.

In the pull request name, add your Prograd id, name, and last name separated by a dash "-".

Deliverables

You need to generate the starter code and fill it with the necessary code to satisfy the requirements described below.

Introduction

I hope everyone is comfortable with the angular. The goal here is to work on a small projects where you can practice the concepts we've learned thus far.

Starter Code

To generate the starter code, follow the steps given below

  • To create a new application,
    • Open your ubuntu or cmd terminal and execute the following command
      • ng new app-name
      • for example, ng new super-wars
    • To create a new component, execute the command
      • ng generate component component-name
      • example, ng generate component contacts

How to run

  • To run the project go to your ubuntu terminal or VScode editor
    • open the ubuntu or cmd terminal or inside the vscode editor
    • run the command following command
    • ng serve --open or ng serve -o

PROGRESSION #1: Testimonials

In the project, we are going to create a testimonial with your experience. We are going to create two different components:

  • The MainComponent component will contain the article image, composed of a title, an image, and a description.
  • The TestimonialComponent component, that will contain several testimonials (feel free to add as many testimonial as you want).

At the bottom of the testimonial, we will add a testimonial form to add some reality to our article. We can't have testimonial without a form! (Don't worry, it doesn't need to work. We will get to that later).

The first thing you will have to do is to generate the project with Angular CLI.

Expected Output Testimonials

Happy Coding ProGrad ❤️