Angular Cannot read properties of undefined in html

I'm an angular rookie and working on getting better at it.

I have the three files where I'm using a service(Studentservice.ts) which emits an observable(ShowBeerDetails method) and I later subscribe to it in my component(Beer-details.component.ts).

I made sure that I'm receiving the observable values by console logging in my components onInit method and the value of beerObj prints just fine.

The issue is I get the below error in my HTML when the view is loaded. I think the reason is shared service isn't resolving beerObj variable before view tries to reach it.(I may be wrong about this).

I tried adding <div *ngIf="beerobj"> statement which prevents the console error but since beerObj still remains undefined I'm not seeing my values(name, price, and Id) printed.

I'm not sure to fix this. I have read multiple SF questions but none helped me. ERROR TypeError: Cannot read properties of undefined (reading 'imageUrl') Angular material

Studentservice.ts

import { EventEmitter, Injectable, Output } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { studentInterface } from './studentInterface';
import { Observable } from 'rxjs';
import { beer } from './beerInterface';

@Injectable({
  providedIn: 'root'
})
export class StudentService {

  constructor(private _http:HttpClient) { }
  private _url="../assets/data/student.json";

  getStudents(): Observable<studentInterface[]>{  
//return [{"id":1, "name":"Rama"},{"id":2, "name":"Bheema"},{"id":3, "name":"Hanuman"}];

return this._http.get<studentInterface[]>(this._url);

}

getBeerList(): Observable<beer[]>{

  return this._http.get<beer[]>('https://api.sampleapis.com/beers/ale');
}

@Output() OnShowDetailsClicked= new EventEmitter<beer>;

ShowBeerDetails(beerobj:beer){
  console.log('Value of beer passed in showuserdetials'+beerobj.name);
this.OnShowDetailsClicked.emit(beerobj);
}
}

Beer-details.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { beer } from '../beerInterface';
import { StudentService } from '../student.service';

@Component({
  selector: 'app-beer-details',
  templateUrl: './beer-details.component.html',
  styleUrls: ['./beer-details.component.css']
})
export class BeerDetailsComponent implements OnInit {

  constructor(private _activatedRoute: ActivatedRoute,private _stdservice:StudentService) { }

  beerobj!: beer;
  myname:string="sreemanth";

  ngOnInit(): void {


    this._stdservice.OnShowDetailsClicked.subscribe((data:beer)=>{
      this.beerobj=data;
      console.log('Value set to beer in subscribe'+this.beerobj.name);
      console.log('the emitted beer value in subscribe'+data.name)});

  }
}

Student.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { Beer } from '../beerInterface';
import { StudentService } from '../student.service';


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


export class StudentComponent implements OnInit {

public selectedid:any;
public beers:Beer[]=[];


  constructor(private _router: Router,private _activatedRoute: ActivatedRoute,private _stdservice:StudentService) {

   }



  ngOnInit(): void {

    this._stdservice.getBeerList().subscribe(data=>this.beers=data);


    this._activatedRoute.paramMap.subscribe((params: ParamMap) =>{
      let id=parseInt(params.get('id')||'');
      this.selectedid=id;
    });
  
  }

  onselect(x: { id: any; }){
//this._router.navigate(['/studentdetails',x.id])
this._router.navigate([x.id],{relativeTo:this._activatedRoute})
  }


  onBeerselect(x:Beer){
    console.log('Value of beer passed'+x.id);
    this._stdservice.ShowBeerDetails(x);
    this._router.navigate(['/beer-list',x.id])
   // this._router.navigate([x.id],{relativeTo:this._activatedRoute})
      }


  isSelected(x:any){
return x.id===this.selectedid;

  }

  public studentdetials=[
{"id":1,"name":"sreemanth","grade":"A"},
{"id":2,"name":"robert","grade":"B"},
{"id":3,"name":"karim","grade":"C"}
  ];

}

beer-details.component.html

<!--<div *ngIf="beerobj">-->
<p>beer-details works!</p>
<p></p>
<p></p>
<p></p>
<!--</div>-->

I have checked my code at https://github.com/Jasti4Git/helloworld