undefined variable in angular 7

i have this error Property 'country' does not exist on type 'ViewComponent'. Did you mean 'country$'?

i dont have any idea about what to do , i know that the there is an undefined country variable , but where i set the variable and how ? and this is my view.component.ts

    import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Country } from '../models/country';
import { CountryService } from '../services/country.service';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { switchMap } from 'rxjs/operators';

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


  country$:Observable<Country>;
  constructor(
        private route:ActivatedRoute,
        private router:Router,
        private countryService:CountryService) { }

  ngOnInit() {

    this.country$ = this.route.paramMap.pipe(
        switchMap((params: ParamMap)=>
            this.countryService.getCountryById(Number.parseInt(params.get('countryID')))
            ));
  }


  editCountry(country:Country):void{
    this.country$.subscribe(country =>{
        console.log('edit clicked');
        this.router.navigate(['countries/edit/'+country.countryID]);
        });
  }

}

and this is my view.component.html

    <label for="" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <label for="" class="col-sm-12 col-form-label"></label>
    </div>
  </div>
    <div class="form-group row">
      <label for="" class="col-sm-2 col-form-label">&nbsp;</label>
      <div class="col-sm-10">
          <button type="button" class="btn btn-success fa fa-pencil-square-o"  (click)='editCountry(country)' >&nbsp;Edit</button>&nbsp;
          
      </div>
    </div>
  </div>