charith24 / lab-angular-pipes

ProGrad Lab | Angular Pipes

Learning Goals

After this lab, you will be able to:

• Create a static Angular application with Angular CLI.
• Build an Angular application with components.
• Use Angular Pipes.
• Build application by using custom pipes.

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.

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 VS Code editor
  • open the ubuntu or cmd terminal or inside the vs code editor
  • run the command following command
  • ng serve --open or ng serve -o

Progression 1: Pipes

• Use the following angular built in pipes to generate the output given below.

  CurrencyPipe
  DatePipe
  DecimalPipe
  JsonPipe
  PercentPipe
  LowerCasePipe
  UpperCasePipe
  SlicePipe
  TitleCasePipe

• Use app.component.html and app.component.ts to write your logic.

Expected Output:

Progression 2: Style

Did you notice that the styles are missing in the above expected output. Styling is a creative aspect and we want you to try and style it all by yourself. However, the objective of this progression is to add styles the page and make it look appealing.

Happy Coding ProGrad ❤️!