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;
}

------------------------------------------------------------------------------

// app.component.ts
import { Component } from '@angular/core';

const coursesData = [
  { id: 1, name: 'Math', description: 'Mathematics Course' },
  { id: 2, name: 'Science', description: 'Science Course' },
  { id: 3, name: 'History', description: 'History Course' },
  // Add more courses
];

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>Course Selection App</h1>
      <select (change)="handleCourseChange($event)">
        <option value="">Select a course</option>
        <option *ngFor="let course of coursesData" [value]="course.id">{{ course.name }}</option>
      </select>
      <app-courses-list [selectedCourse]="selectedCourse"></app-courses-list>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'p2c';
  coursesData = coursesData;
  selectedCourse: any;

  handleCourseChange(event: any) {
    const courseId = event.target.value;
    this.selectedCourse = this.coursesData.find((course) => course.id === parseInt(courseId, 10));
  }
}

Run App:

ng serve

6.B Passing data from Child Component to ContainerComponent

AIM: Create an AppComponent that loads another component called the CoursesList component. Create another component called CoursesListComponent which should display the courses list in a table along with a register .button in each row. When a user clicks on the register button it should say you are registered for this course

PROGRAM: 

create new App by

ng new c2p

create a component courses-list

ng generate component courses-list

  1. Create the Course Interface:

Define an interface for the course data.


// course.model.ts export interface Course { id: number; name: string; description: string; }

save in src/models folder

  1. Create the CoursesListComponent Component:

Create the CoursesListComponent component that displays the list of courses in a table along with a registration button.


// courses-list.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Course } from '../../models/course.model';

@Component({
  selector: 'app-courses-list',
  template: `
    <table>
      <tr *ngFor="let course of courses">
        <td>{{ course.name }}</td>
        <td>{{ course.description }}</td>
        <td><button (click)="registerForCourse(course)">Register</button></td>
      </tr>
    </table>
  `,
})
export class CoursesListComponent {
  @Input() courses: Course[] = [];
  @Output() registerCourse = new EventEmitter<Course>();

  registerForCourse(course: Course) {
    this.registerCourse.emit(course);
  }
}

  1. Create the AppComponent:

Create the AppComponent that loads the CoursesListComponent and handles the registration event.


// app.component.ts import { Component } from '@angular/core'; import { Course } from '../models/course.model'; @Component({ selector: 'app-root', template: ` <div> <h1>Course Registration App</h1> <app-courses-list [courses]="courses" (registerCourse)="onRegisterCourse($event)"></app-courses-list>

 <p *ngIf="registeredCourse">You are registered for the course: {{ registeredCourse.name }}</p> </div> `, }) export class AppComponent { courses: Course[] = [ { id: 1, name: 'Math', description: 'Mathematics Course' }, { id: 2, name: 'Science', description: 'Science Course' }, { id: 3, name: 'History', description: 'History Course' }, // Add more courses ];  registeredCourse: Course | null = null;

  onCourseRegistered(course: Course) {
    this.registeredCourse = course; // Update the registeredCourse property
  }

}







update app.module.ts with

import { Course } from './course.model'; // Import the Course interface

Comments

Post a Comment

Popular posts from this blog

9. Angular and MongoDBs

Angular and MongoDBs 1.       Angular Application Setup Observe   the   link   http://localhost:4200/welcome   on   which   the   mCart   application   is   running.     2.       Components   and   Modules Create   a   new   component   called   hello   and   render   Hello   Angular   on   the   Page   3.       Elements   of   Template Add   an   event   to   the   hello   component   template   and   when   it   is   clicked,   it   should   change the   courseName.   4.       ngFor Create a courses array and rendering it in the template using ngFor directive in a list format   5.       ngClass Ap...
Read more

1. a. Angular Application Setup

Observe the link http://localhost:4200/welcome on which the mCart application is running. Perform the below activities to understand the features of the application. Angular Application Setup: Install Node.js: Visit the Node.js website ( https://nodejs.org ) and download the latest version of Node.js. Follow the installation instructions specific to your operating system. PRebuilt software (2nd Pane) Install Angular CLI: Open a terminal or command prompt and run the following command to install the Angular CLI globally: npm install -g @angular/cli@13.0 Create a new Angular project: In the terminal or command prompt, navigate to the desired directory where you want to create your Angular project. Run the following command to create a new project named "mCart": ng new mCart Change into the project directory: Move into the newly created project directory by running the following command: cd mCart Serve the application: Start a local development server and s...
Read more

2. Structural Directives - ngIf

 2.a  Structural Directives - ngIf Create a login form with username and password fields. If the user enters the correct credentials, it should render a "Welcome <<username>>" message otherwise it should render "Invalid Login!!! Please try again..." message Step 1: Generate a new component ng generate component login step 2: Update the login component template Open the login.component.html file and replace its content with the following code: <div *ngIf="isLoggedIn; else loginForm"> <h2>Welcome {{ username }}!</h2> </div> <ng-template #loginForm> <form (ngSubmit)="submitForm()"> <div> <label for="username">Username:</label> <input type="text" id="username" [(ngModel)]="username" required> </div> <div> <label for="password">Password:</label> <input type=...
Read more