Working with pipes

In this lab you will use built in pipes and create a custom pipe

  • Create a new App
  • Create a class Instructor with id, first name, last name, price, rate and type
  • Create a new component – Instructor list

Add the following data:

ins: Instructor[] =  
         [
            {
                "id": 100,
                "FirstName": "avi",
                "LastName" : "Cohen",
                "Price": 100,
                "rate": 3
                "type": 1
            },
            {
                "Id": 200,
                "FirstName": "dana", 
                "LastName" : "levi",                 
                "Price": 200,
                "rate": 5,
                "type": 2,
            },
            {
                "Id": 300,
                "FirstName": "rina",
                "LastName" : "lavi",
                "Price": 150,
                "rate": 5,
                "type": 1
            },
            {
                "Id": 400,
                "FirstName": "dina",
                "LastName": "mor",
                "Price": 250,
                "rate": 4
                "type": 3
            },
        ];
  • Create a table to display the above data with full name with first letter capital , price with ILS and 2 decimal places
  • Using pipe convert the type to: 1 – Regular, 2 – External, 3 – Graduate
  • Create a custom pipe to search an instructor by name – add a textbox and filter the table as you type