Nested Components

9. A. AIM: Load CourseslistComponent in the root component when a user clicks on the View courses list button.

Step-1: Create new component (courseslist component), run the following command in terminal:

.../first-app> ng generate component courseslist

Step-2: Edit the app.component.ts with the following code.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isLoading = false
  NavigateToCourselist(){
    this.isLoading = true
  }
}

Step-2: Edit the app.component.html with the following code.

app.component.html

<button type="button" (click)="NavigateToCourselist()">View Courses</button>
<div *ngIf="isLoading">
  <app-courseslist></app-courseslist>
</div>

Step-3: Edit the courseslist.component.ts with the following code.

courseslist.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-courseslist',
  templateUrl: './courseslist.component.html',
  styleUrls: ['./courseslist.component.css']
})
export class CourseslistComponent {
  courseList = [
    {courseId: 'CS001', courseName: 'HTML'},
    {courseId: 'CS002', courseName: 'CSS'},
    {courseId: 'CS003', courseName: 'JavaScript'},
    {courseId: 'CS004', courseName: 'Angular'},
    {courseId: 'CS005', courseName: 'React'}
  ]
}

Step-4: Edit the courseslist.component.html with the following code.

courseslist.component.html

<h3>Courses Offered</h3>
<table border="1">
  <tr>
    <th>Course ID</th>
    <th>Course Name</th>
  </tr>
  <tr *ngFor="let course of courseList">
    <td>{{ course.courseId }}</td>
    <td>{{ course.courseName }}</td>
  </tr>
</table>

Step-5

Run the following command to build and serve your app.

.../first-app> ng serve

Open browser and enter the URL http://localhost:4200 to find the application.

Output:

---

9. B. 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 dropdown.

Step-1: Create new component (courseslist component), run the following command in terminal:

.../first-app> ng generate component courseslist

Step-2: Edit the app.component.ts with the following code.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedCourse!: string
  sendToChild(sc:any){
    this.selectedCourse = sc.target.value
  }
}

Step-2: Edit the app.component.html with the following code.

app.component.html

<h3>Select Course</h3>
<select (change)="sendToChild($event)">
  <option value="">--Select a Course--</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="angular">Angular</option>
</select>

<h4>Details of Selected Course</h4>
<app-courseslist [scName]="selectedCourse"></app-courseslist>

Step-3: Edit the courseslist.component.ts with the following code.

courseslist.component.ts

import { Component, Input } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-courseslist',
  templateUrl: './courseslist.component.html',
  styleUrls: ['./courseslist.component.css']
})
export class CourseslistComponent{
  courseList = [
    {courseId: 'CS001', courseName: 'HTML'},
    {courseId: 'CS002', courseName: 'CSS'},
    {courseId: 'CS003', courseName: 'JavaScript'},
    {courseId: 'CS004', courseName: 'Angular'},
    {courseId: 'CS005', courseName: 'React'}
  ]
  @Input() scName!: string;
  constructor (){}
}

Step-4: Edit the courseslist.component.html with the following code.

courseslist.component.html

<p>Course Selected is {{ scName }}</p>
<table border="1">
  <tr>
    <th>Course ID</th>
    <th>Course Name</th>
  </tr>
  <tr *ngFor="let course of courseList">
    <td *ngIf="course.courseName.toLowerCase()==scName.toLowerCase()">{{ course.courseId }}</td>
    <td *ngIf="course.courseName.toLowerCase()==scName.toLowerCase()">{{ course.courseName }}</td>
  </tr>
</table>

Step-5

Run the following command to build and serve your app.

.../first-app> ng serve

Open browser and enter the URL http://localhost:4200 to find the application.

Output: