You should always use type or interface for your model. In this case, we create the Person type with id, name, and description.

person.service.ts:

//... other import stuff

export type Person = {
  readonly id: number;
  readonly name: string;
  readonly description: string;
};

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

  //...

}

Then you can import that Person type and use it. Notice that we use a question mark ? next to the private _currentperson?. This tells the compiler that _currentperson is undefined. In other words, it is not set (initialized).

Then whenever you want to access this._currentperson, you always need to check if it's not undefined. In this case, we do it in setAvailableStatus function.

It's a good habit to avoid using any type. We use TypeScript because it enables us to use type system. Using any defeats that purpose. In short, avoid any at all cost. You will need it only when you have to deal with low level advanced stuff.

person-details.component.ts

import { Component, OnInit } from '@angular/core';
import { PersonService, Person } from 'src/app/services/person.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-person-details',
  templateUrl: './person-details.component.html',
  styleUrls: ['./person-details.component.css']
})
export class PersonDetailsComponent implements OnInit {
  private _currentperson?: Person;
  message = '';

  public get currentPerson() {
    return this._currentPerson;
  }

  constructor(
    private personService: PersonService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit(): void {
    //...
  }

  getPerson(id: number): void {
    this.personService.read(id)
      .subscribe(
       //...
      );
  }

  setAvailableStatus(status: boolean): void {
    
    if(this._currentperson === undefined)
      throw error('Person does not exist');
    
    const data = {
      name: this.currentperson.name,
      description: this.currentperson.description,
      available: status
    };

    this.personService.update(this.currentperson.id, data)
      .subscribe(
         //...
       );
  }

  // ...
}

It's best to show some sort of error message in the HTML when the id doesn't exist and hide the page. It's not productive to show the page and buttons when the consumers can't even use it.

person-details.component.html

<div *ngIf="currentperson">
  <!-- Show person detail stuff -->
</div>

<div *ngIf="!currentperson">
  <!-- Show error message or something here because id is invalid -->
</div>

I would like to thank the user @skouch2022 for the clarifications. I understood that instead of passing any, i can pass the variable type. I find it better to read also (passing any was like passing null to an method in any other language).

I got that we created the type Person so it could be used around the project. On my next projects i'll surely do that. Like i mentioned, i'm totally new to angular (i'm just good at coding(generally speaking)).

Point: inside person-service.ts i created also the type available: boolean - so i could access it inside person-details-component.ts

However, now i've got an error that is way beyond my capabilities.

  ngOnInit(): void {
    this.message = '';  
    this.getPerson(this.route.snapshot.paramMap.get('id'))
    //this.getPerson(this.route.snapshot.paramMap.get(id || ''));
  }

The error says "Argument of type 'string | null' is not assignable to parameter of type 'number'. Okay i got it, paramMap returns me a number and i'm passing a type null. However, i need id being a number so i can search a person by its id later - right?

Anyway, i feel like i'm way better than before. Really thank you for your help.

person-details-components.ts

import { Component, OnInit } from '@angular/core';
import { Person, PersonService } from 'src/app/services/person.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-person-details',
  templateUrl: './person-details.component.html',
  styleUrls: ['./person-details.component.css']
})
export class PersonDetailsComponent implements OnInit {
 
  private _currentPerson?: Person;
  message = '';
  public get currentPerson(){
    return this._currentPerson
  }
 

  constructor(
    private personService: PersonService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit(): void {
    this.message = '';  
    this.getPerson(this.route.snapshot.paramMap.get('id'))
    //this.getPerson(this.route.snapshot.paramMap.get(id || ''));
  }

  getPerson(id: number): void {
    this.personService.read(id)
      .subscribe(
        person => {
          this._currentPerson = person;
          console.log(person);
        },
        error => {
          console.log(error);
        });
  }

  setAvailableStatus(status: boolean): void {
   if(this._currentPerson == undefined)
   throw Error ('Person does not exist');   
    const data = {
      name: this._currentPerson.name,
      surname: this._currentPerson.surname,
      address: this._currentPerson.address,
      phone: this._currentPerson.phone,
      whatsapp: this._currentPerson.whatsapp,
      instagram: this._currentPerson.instagram,
      available: status
    };
    this.personService.update(this._currentPerson.id, data)
    .subscribe(
      response => {
        if(this._currentPerson == undefined)
        throw Error ('Error while updating person');
        else
        this._currentPerson.available = status;
        console.log(response);
      },
      error => {
        console.log(error);
      });

   }
   updatePerson(): void {
    this.personService.update(this.currentPerson?.id, this.currentPerson)
      .subscribe(
        response => {
          console.log(response);
          this.message = 'The person was updated!';
        },
        error => {
          console.log(error);
        });
        
  }
  deleteProduct(): void {
    this.personService.delete(this.currentPerson?.id)
      .subscribe(
        response => {
          console.log(response);
          this.router.navigate(['/persons']);
        },
        error => {
          console.log(error);
        });
  }


      
};
   

person-service.ts

   import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const baseURL = 'http://localhost:8080/api/persons';

export type Person =
{  
  available: boolean;
  readonly id: number;
  readonly name: string;
  readonly surname: string;
  readonly address: string;
  readonly phone: string;
  readonly whatsapp: string;
  readonly instagram: string;
};

@Injectable({
  providedIn: 'root'
})

export class PersonService {

  constructor(private httpClient: HttpClient) { }
  
  readAll(): Observable<any> {
    return this.httpClient.get(baseURL);
  }

  read(id: number): Observable<any> {
    return this.httpClient.get(`${baseURL}/${id}`);
  }

  create(data: any): Observable<any> {
    return this.httpClient.post(baseURL, data);
    
  }
  update(id: number, data: any): Observable<any> {
    return this.httpClient.put(`${baseURL}/${id}`, data);
  }

  delete(id: number): Observable<any> {
    return this.httpClient.delete(`${baseURL}/${id}`);
  }

  deleteAll(): Observable<any> {
    return this.httpClient.delete(baseURL);

    
  }

  searchByName(name: string): Observable<any> {
    return this.httpClient.get(`${baseURL}?name=${name}`);
  }


}