•Create a new Angular project called

• Create a header component and a footer component

 Format both header and footer components (tags to be used; ex. h1 and h3) to the same formatting in regard to background and text colour plus any other formatting of your choice; You can format each .css for header and footer or use the [login to view URL] to create global styles for your tags

• Create a file in the app folder called [login to view URL] in the app folder. In this file, create a class called YourLoginName that includes the following definition with your choice of label and type (see [login to view URL] file in our in-class example as a reference):

 Your student number, your name, your login name, your campus, and assignment title

 In both the header and footer component .ts files, import and create a variable to fill in the class data with your information.

Note: For this task, you will duplicate the data in the header and footer components; we will learn later how to set it once and use in multiple components

 In the header component html file, use string interpolation from your personal class data to display task title / your name in an HTML header tag (not hard-coded).

 In the footer component html file, use string interpolation from your personal class data to display your name / your student number / your login name / your campus in an HTML header tag (not hard-coded)

 Note: You may need to stop the node server and start up again after creating a class. Use Ctrl+C to terminate batch job then "ng serve" again after class file is created.

• Be sure to update your [login to view URL] with the components you want to display

• 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).

Habilidades: AngularJS, Mobile App Development, Web Development, AJAX, HTML5

Veja mais: run angular app locally, angular material, angular project example, angular tutorial, angular cli, angular routing, create angular 7 project, ng generate component, house related websites to get idea to create new website of houses for project, how to create new project in ruby on rails, netbeans 8.2 can't create new project, netbeans can't create new project mac, sublime text 3 create new project, how to create new project in codeigniter, tfs create new project from existing, create new angular project, create new ruby project, visual studio 2017 create new team project, create new flutter project, create new wix project

Acerca do Empregador:
( 15 comentários ) Brampton, Canada

ID do Projeto: #26781567

8 freelancers are bidding on average $37 for this job

(20 Comentários)

Hello sir, I am a 5 year experienced full stack developer having expertise in java, spring boot, spring MVC, hibernate, angular 2,4,5,6,7,8, reactjs. I can do it. Please hire me.

$40 CAD in 7 dias
(4 Comentários)

Dear Sir. I see that you need help HTML/CSS/JS specialist. I think I am the ideal choice for resolve this issue, because I have a rich experience with WEB Development and ReacJS. This is the web design I referenced Mais

$20 CAD in 7 dias
(0 Comentários)

Hi, Dear. (✿ *‿* ✿) Thanks for reading in my proposal. Very interested to work on your project. While doing many large and small projects, I have gained depth knowledge and rich experience with Website development usin Mais

$100 CAD in 2 dias
(1 Comentário)

Hi There, I have all the necessary skills required to complete your app on time, within your budget and without compromising on quality. I'm Ram, a Senior Angular developer who take pride in web I have built. I am Mais

$20 CAD in 7 dias
(0 Comentários)

Hello there. Nice to meet you. Could you send all details? I am experienced in PHP, JavaScript (full stack). I have a lot of experience in Javascript, jQuery, HTML5, CSS, Joomla, Prestashop, Opencart, Drupal, React.js Mais

$50 CAD in 7 dias
(0 Comentários)

Hey, I am interested in this task. I can build this Angular Project with Bootstrap responsive design and within your timeline as you described. As I have worked on Angular, PrimeNG, Bootstrap, on different functionali Mais

$20 CAD em 1 dia
(0 Comentários)

Hi, I went through your work description and i think it fits to my work pretty well. I am work experience in Angular and NodeJs ( MEAN stack). You can go through some of the websites developed by me for my client. Its Mais

$19 CAD in 10 dias
(0 Comentários)