create view by using two different array

component.html

<!-- display unique subject array and on setTopics() will filter topics by subject name-->
<h3>Classes</h3>
<div *ngFor="let classname of classes" style="display:inline-block;">
  <button style="margin: 0px 5px; color: blue;" (click)="setTopics(classname)">{{classname | uppercase}}  </button>
</div>
<h3>Topics</h3>
<div *ngFor="let topic of topics">
  <div (click)="setTopics(topic)">{{topic.topicName}}  </div>
</div>

compoent.ts

import { Component, VERSION, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{
  name = 'Angular ' + VERSION.major;
  classesArray  = [
  {classid:1,subjectName:"hindi", topicName : "topic1 of hindi class id 10" },
  {classid:1,subjectName:"hindi", topicName : "topic2 of hindi class id 10" },
  {classid:1,subjectName:"English", topicName : "topic1 of English class id 10" },
  {classid:1,subjectName:"English", topicName : "topic2 of English class id 10" },
  {classid:1,subjectName:"English", topicName : "topic3 of English class id 10" },
  {classid:2,subjectName:"hINDI", topicName : "topic1 of hINDI class id 20" },
  {classid:2,subjectName:"HINDI", topicName : "topic2 of hINDI class id 20" },
  {classid:2,subjectName:"HINDI", topicName : "topic3 of HINDI class id 20" },
  {classid:2,subjectName:"English", topicName : "topic1 of English class id 20" },
  {classid:2,subjectName:"English", topicName : "topic2 of English class id 20" },
  {classid:2,subjectName:"English", topicName : "topic3 of English class id 20" },
];
classes = [];
topics = [];
ngOnInit() {
  // find unique class names
  this.classes = this.classesArray.map((obj) => obj.subjectName.toLowerCase());
    this.classes = this.classes.filter((v, i) => this.classes.indexOf(v) === i);
  // default selected subject to hindi
  this.setTopics('hindi');
}
// filter topics by subjectname and generate new topics array
setTopics(subjectName) {
  this.topics = this.classesArray.filter((classes)=> classes.subjectName.toLowerCase() === subjectName.toLowerCase())
}

}

Here is working demo https://stackblitz.com/edit/santosh-angular-array-filter

For this purpose, you can call a method that filters (or sorts, whatever you prefer) the subjectWithTopics array in order to show it.

Let's say you begin with the table at righthand hidden, and will show the selected classId once you click a button.

Hence, we begin with an ngFor that prints all buttons:

<button *ngFor="let c of classes" (click)="selectClass(c)"> 
    {{ c.classname }} 
</button>

The right-handed table, at least in this example, should show all the selected elements for the given classId, or be hidden if it has no elements. I would do it like this:

<table *ngIf="selectedSubjects && selectedSubjects.length > 0" >
    <tr>       
       <th> Subject name </th>
       <th> Subject name </th>
    </tr>
    <tr *ngFor="let subject of selectedSubjects">
       <th> {{ subject.subjectName }} </th>
       <th> {{ subject.topicName }} </th>
    </tr>
</table>

In the controller (.ts file), you write the "selectClass" function, which will filter the subjectWithTopics array, and put it into our newly created array, "selectedSubjects" (which you should define at the controller's class):

selectClass(selectedClass){
   this.selectedSubjects = subjectWithTopics.filter( topic => topic.classId === selectedClass.classid);
}

That should do the trick!

You can store the subjects in the variable and render that variable in html.

You can write a function to get Subjects whenever a class is Clicked. For Eg

let subjects = [];
...
getSubjects(classId){
  this.subjects = this.subjectWithTopics.filter(subject=>subject.classId===classId)
}

and then render this function in for loop in html. For Eg

<div ngFor="let subject of subjects">
</div>