Posts

Showing posts from August, 2023

7.a Template Driven Forms

Image
 AIM:  Create   a   course   registration form   as   a   template-driven form. Template-Driven Forms are a way to manage forms using Angular's two-way data binding and directive approach. Here's how you can create a basic course registration form: Create a New Angular Project: ng new course-registration-form cd course-registration-form Create the Registration Form: create a new component for the registration form: ng generate component registration-form Modify the HTML Template: Open the registration-form.component.html file in the src/app/registration-form folder and modify it as follows: <div class="registration-form"> <h2>Course Registration</h2> <form #registrationForm="ngForm" (ngSubmit)="onSubmit(registrationForm.value)"> <div class="form-group"> <label for="name">Full Name:</label> <input type="text" id="name" name="name" ngMo...

6. A. Passing data from Container Component to Child Component

  AIM :  Create an AppComponent that displays a dropdown with a list of courses as values in it. Create another component called the CoursesList component and load it in AppComponent which should display the course details. When the user selects a course from the list, the details should be updated. Program:  Create the CoursesList Component import { Component , Input } from '@angular/core' ; @ Component ({   selector : 'app-courses-list' ,   template : `     <div>       <h2>Course Details</h2>       <p *ngIf="selectedCourse">Course Name: {{ selectedCourse.name }}</p>       <p *ngIf="selectedCourse">Course Description: {{ selectedCourse.description }}</p>     </div>   ` ,   styleUrls : [ './courses-list.component.css' ] }) export class CoursesListComponent {   @ Input () selectedCourse : any ; } ----...