•Create a new Angular project called yourLoginNameA3

• Create a header component and a footer component • Create a file in the app folder called [login to view URL] in the app folder • Create another .ts (example: [login to view URL]) file in your app folder to hold another class for books that will include the following definition (your choice of file name and class name):  book name / author / genre / year published / picture • Create a data file (hard-coded) called myBooks.ts. Create data for 4 of your favourite books with the data from the class created (use [login to view URL] in our in-class exercise for reference)  Note: Pictures will need to be included in the images folder created for the default setup. The picture itself can be anything you want. • Create a component called detail. Create a structure using a grid-area that include a navigation section that goes across the screen with 2 areas (one on the left and one on the right) under the navigation section. One side will hold a picture and the other will hold book details. For Portrait mode, display all sections vertically (Navigation on top of picture on top of book details) • Be sure to import your book data into the [login to view URL] and setup a variable to hold the data (see [login to view URL] in our in-class project for reference) • In the [login to view URL], setup a directive (*ngFor) to create 4 buttons for the 4 books in the nav section; be sure to include an index so you can capture which is selected so you can display detail data and the picture from the data file based on the button clicked; also be sure to include a (click) event to call a function to find correct book data. • Note: Use *ngFor not only with list items (as we did in our in-class exercise) but also with buttons or any other HTML tag (NO hard-coding).