I am trying to follow the [CRUD Operations](https://www.c-sharpcorner.com/article/crud-operation-in-angular-7-using-web-api/) to perform basic CRUD operation with Angular as front end and Web API as back end.

The API is very simple and it just returns the following JSON. 

```
[
  {
    "studentId": 1,
    "studentName": "Andrew"
  },
  {
    "studentId": 2,
    "studentName": "Steve"
  },
  {
    "studentId": 3,
    "studentName": "Williams"
  }
]

```

I tested it on browser and it works as expected. But in Angular it is not getting displayed.

Student Model

```
export class Student {
    StudentId: number;
    StudentName: string;
}

```

Student HTML

```
<div class="container">  

<mat-card>   
  <mat-card-content>  
<br><br>  
      <table class="table" >  
          <tr ngclass="btn-primary">  
            <th class="tbl2">Student Id</th>  
            <th class="tbl2">Studen Name</th>  
          </tr>  
          <tr *ngFor="let student of allStudents | async">  
            <td class="tbl2">{{student.Id}}</td>  
            <td class="tbl2">{{student.Name }}</td>  
          </tr>  
        </table>  
  </mat-card-content>  
</mat-card>  
</div> 

```

Student Component

```
import { Component, OnInit } from '@angular/core';  
import { FormBuilder, Validators } from '@angular/forms';  
import { Observable } from 'rxjs';  
import { StudentService } from '../student.service';  
import { Student } from '../student';  

@Component({
  selector: 'app-student-details',
  templateUrl: './student-details.component.html',
  styleUrls: ['./student-details.component.css']
})

export class StudentDetailsComponent implements OnInit {

  allStudents: Observable<Student[]>;  

  constructor(private studentService:StudentService) { }

  ngOnInit() {
    this.getAllStudents();
  }

  getAllStudents() {  
    this.allStudents = this.studentService.getAllStudent();  
  }  
}

```

Student Service

```
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';  
import { HttpHeaders } from '@angular/common/http';  
import { Observable } from 'rxjs';  
import { Student } from './student'

@Injectable({
  providedIn: 'root'
})
export class StudentService {
  url = 'http://localhost:59829/api/';  
  constructor(private http: HttpClient) { }

  getAllStudent(): Observable<Student[]> {  
    return this.http.get<Student[]>(this.url + 'student');  
  }  
}

```

I searched the Google but wasn't able to figure it out. Kindly help me.