Skip to content

This implementation gave me a clear idea of how to start with Angular. Concepts like Modules Components, Array of objects, ngFor and ngIf structural directive is used.

Notifications You must be signed in to change notification settings

shivani-1401/StartingWith_Angular

Repository files navigation

Angular assignment on interpolation with Array of Employee objects and ngIf structural directive

Objective:

The Objective of this application is to understand the fundamentals of intepolation of data in angular after creating an array of employee objects and usage of ngIf

Expected Outcome:

By the end of the assignment you should be able to understand

  1. Modules
  2. Components
  3. Array of objects
  4. ngFor and ngIf structural directive

Prerequisites

  1. Fork the boilerplate repository.
  2. Clone the boilerplate repository and move into the project folder with cd command.
  3. Install dependencies npm install.
  4. Run the code with npm run start which will run on port:4200.

Assignment

Create an Angular application which will display the hard coded value for an employee object's array.

  1. We need to define an Employee class and create an array of objects of the Employee class in the parameterless constructor of Component class. Employee class will have following members.
variabletype
idnumber
firstnamestring
lastnamestring
addressstring
emailstring
passwordstring
genderstring
date_of_birthstring
2. Create a parameterized constructor in the Employee class and pass the data for all the members while creating the array of objects within the constructor of the Component class.
  1. The Component class in this assignment will be having two members:
variabletype
titlestring
employeeEmployee[]
  1. title will be having the value as Registration details.

  2. We will be having 4 employee objects with the data as follows:

         `1,Raghav,Singh,A/22 Gaziabad,raghavsingh@gmail.com,raghav@123,Male,22-Aug-1990
          2,Sujit,Kumar,Kanpur,sujitkumar@rediffmail.com,sujitkumar@123,Male,12-Nov-1981
          3,Payel,Dutta,Kolkata,payeldutta@gmail.com,payel@123,Female,12-Mar-1985
          4,Murali,Naidu,Chennai,muralinaidu@gmail.com,muralinaidu@123,Male,05-Jun-1989"`
    

Instructions:

  1. You are expecteded to display title with h1 header tag of HTML.
  2. Rest of the details should be displayed within a table and only the records of the male employees should be displayed.
  3. Ensure following commands succeed in your local machine - npm install
    npm run build
    npm run lint
    npm run test
    npm run e2e

References:

  1. [Angular Architecture] (https://angular.io/guide/architecture)
  2. [Angular CLI] ( https://cli.angular.io/)
  3. [Angular Templates] ( https://angular.io/guide/architecture#templates)
  4. [Angular Interpolation] ( https://angular.io/guide/template-syntax)

About

This implementation gave me a clear idea of how to start with Angular. Concepts like Modules Components, Array of objects, ngFor and ngIf structural directive is used.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published