Question: Objective: This assignment aims to introduce students to the basics of Angular, including project setup, component creation, and basic data binding. Instructions: 1 . Setup

Objective: This assignment aims to introduce students to the basics of Angular, including project setup, component creation, and basic data binding. Instructions: 1. Setup and Installation: Install Node.js and Angular CLI if not already installed. Create a new Angular project named yourname_assignment1 using Angular CLI. 2. Project Structure: Familiarize yourself with the generated project structure. Understand the purpose of key files and folders. 3. Create Components: Create the following components: header: For the sites header. footer: For the sites footer. home: For the home page content. testimonials: For displaying user testimonials. include-testimonial: For including new testimonials (child component).4. App Component: In the app.component.html, set up a basic layout that includes the header, a router outlet, and the footer. 5. Routing: Configure routing for the home and testimonials components. Set the home component as the default route. 6. Home Component: In the home component, include the following: A welcome heading. A brief description of the application. A section where you describe yourself, including: Your skills Projects you have worked on Your aims Your hobbies Your image. Navigation links to the testimonials page. 7. Testimonials Component: In the testimonials component, display some dummy testimonials. Include an input box for the user to enter their name and an "Add Testimonial" button. On clicking the "Add Testimonial" button, the name from the input box should be passed to the include-testimonial child component and make it visible. Display a text box for the user to write their testimonial and a submit button. In the include-testimonial component, display a thank you message such as "Thank you, John, for giving a testimonial." On submitting the testimonial, pass the testimonial information back to the parent testimonials component and display it there. 8. Styling: Add basic styles to your application to ensure it looks clean and organized. You can use CSS or Angulars built-in styling solutions. 9. Data Binding: Demonstrate both interpolation and property binding in your components, especially in the home and testimonials components. 10.Submission: Run your Angular application and take screenshots of the following: The home page. The testimonials page showing added testimonials. Submit a .docx file containing the screenshots along with the source code of your Angular components and the routing module.

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!