Assignments - 1

      1) A) Angular Application Setup

         Observe the link http://localhost:4200/welcome on which the mCart 

          application is running. 

    B)    Elements of Template

Add an event to the hello component template and when it is clicked, it should 

change the courseName.

2)  A)   Components and Modules

 Create a new component called hello and render Hello Angular on the Page

B)   ngFor 

Create a courses array and rendering it in the template using ngFor directive in              

a list format

3)   ngClass

       Apply multiple CSS classes to the text using ngClass directive.

4)   A) Built in Pipes

      Display the product code in lowercase and product name in uppercase 

      using built-in pipes.

      

     B) Attribute Directives - ngStyle 

    Apply multiple CSS properties to a paragraph in a             

      component using ngStyle.

5)  A)  Property Binding 

           Binding image with class property using property binding.

    

      B)  Explain event binding, property binding, two way binding by examples with proper syntax

6)  Nested Components Basics 

     Load CourseslistComponent in the root component when a user clicks 

      on the View courses list button.


7)  Create a course registration form as a template-driven form.

8) Create multiple components and add routing to provide navigation between them.

https://ms2ng.blogspot.com/2025/11/10a-routing-basics-router-links.html

9)   Demonstrate MongoDB queries to perform CRUD operations on document using insert(),  

      

      find(), update(), remove()

 

  https://ms2ng.blogspot.com/2025/10/mongodb-insertfindupdate-and-delete.html

10)  Demonstrate MongoDB queries to work with documents using find(), limit(), sort()

       Write MongoDB queries to Create and drop databases and collections   

  https://ms2ng.blogspot.com/2025/10/mongodb-insertfindupdate-and-delete.html

  https://ms2ng.blogspot.com/2024/09/create-and-drop-database-and-collection.html

Assignment 1: Display a Welcome Message

AIM: Create a simple Angular app that displays your name and a welcome message.

Assignment 2: Two-Way Data Binding with an Input Box

AIM: Create an input box where the user can type their name, and it updates live on the screen.

Assignment 3: Simple Task List (Mini Todo App)

AIM: Add tasks to a list and display them.

Assignment 4: Profile Card App

AIM: Show a profile card using a separate ProfileCardComponent.

Assignment 5: Counter App

AIM: Have a counter with increment/decrement buttons using a separate CounterComponent.

Assignment 6: Task List App

AIM: A simple todo list with add/remove functionality using a TaskListComponent.