You are on page 1of 2

Day 1

1. Create a new project with name course-manager using angular-


cli.
2. Create a new component with name courses using angular-cli.
Add in this component a new property tittle and display it in the
template.
3. Create a course model using angular-cli ng g class my-new-class.
Add the following properties: id, name, description, imageUrl, price,
discount.
4. Inside courses component create a new component with name
course-list using angular-cli. Add a new property courses of type
array of courses and initialize it with 3 courses inside class
constructor.
5. Add course-list in courses component template.
6. Create a new component course-item inside course-list
component with the following template.

<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12 alert alert-secondary" role="alert">
Course name
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://www.appscool.in/wp-
content/uploads/2014/02/Screen-Shot-2014-09-30-at-6.28.31-
PM.png"/>
</div>
<div class="col-xs-8">
Course description
</div>
<div class="col-xs-12"></div>
<button type="button" class="btn btn-primary">Go to
Details</button>
</div>
</div>
</div>
</div>

7. Display the courses using course-item component.


8. Attach to each button click event and define a method that will
display course details and will hide course list.
Day 2
1. Add grey background for courses that has price more that $100
using ngClass directive.
2. Create a directive that will add a red border for courses that has
discount greater than 15% (ng g directive my-new-directive).
3. Display the price of the course according to discount creating a
custom pipe (ng g pipe my-new-pipe).
4. Create a pipe that will filter the list of courses by user input. (ng g
pipe my-new-pipe).
5. Create a service that will manage courses (ng g service my-new-
service). Create a method that will return the course list.
6. Create a Template-driven form to add a new course. Implement
form validation. On submit add new course in courses list. Add reset
form button.
7. Create a reactive form that will update selected course.
Implement form validation. Add reset form button.

Day 3
1. Add in course service a method that will
- get the course list from url ‘https://course-manager-
demo.herokuapp.com/api/courses’, method: get
- get course - url ‘https://course-manager-
demo.herokuapp.com/api/course:id’, method: get
- add a new course - url ‘https://course-manager-
demo.herokuapp.com/api/course’, method: post, body: JSON string
- update a course - url ‘https://course-manager-
demo.herokuapp.com/api/course/:id’, method: put, body: JSON string
- delete a course - url ‘https://course-manager-
demo.herokuapp.com/api/course/:id’, method: delete
2. Implement Routing for course management app (pages: Main
page, Course list, Course details, New course, Edit course, Login)
and create Login page and guard that will restrict access to other
pages.
3. Create a test for course-item component.
4. Create a test for course service.