CODEWITHSUNDEEP
angular
Jon
Jon

Reputation: 91

Cannot find name 'paramMap'

I am following an online tutorial and have copied the code below which appears to work for the tutor fine but I am getting an error message:

Cannot find name 'paramMap'.

I can't seem to find a solution online.

import { Component, OnDestroy, OnInit } from '@angular/core';
import { News } from '../news.model';
import { NewsService } from '../news.service';
import { Subscription } from 'rxjs';
import { ParamMap } from '@angular/router';


@Component({
selector: 'app-news-detail',
templateUrl: './news-detail.page.html',
styleUrls: ['./news-detail.page.scss'],
})
export class NewsDetailPage implements OnInit, OnDestroy {
news: News;
private newsSub: Subscription;

constructor(
private NewsService: NewsService
) { }

ngOnInit() {
this.newsSub = this.NewsService.getNews(paramMap.get('newsId')).subscribe(news => {
  this.news = news;
});

}
ngOnDestroy() {
if (this.newsSub) {
this.newsSub.unsubscribe();
}
}}

any ideas would be hugely appreciated, many thanks in advance.

the tutorial code is

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {
NavController,
ModalController,
ActionSheetController
} from '@ionic/angular';
import { Subscription } from 'rxjs';
import { PlacesService } from '../../places.service';
import { Place } from '../../place.model';
import { CreateBookingComponent } from '../../../bookings/create-    
booking/create-booking.component';

@Component({
selector: 'app-place-detail',
templateUrl: './place-detail.page.html',
styleUrls: ['./place-detail.page.scss']
})
export class PlaceDetailPage implements OnInit, OnDestroy {
place: Place;
private placeSub: Subscription;

constructor(
private navCtrl: NavController,
private route: ActivatedRoute,
private placesService: PlacesService,
private modalCtrl: ModalController,
private actionSheetCtrl: ActionSheetController
) {}

ngOnInit() {
this.route.paramMap.subscribe(paramMap => {
  if (!paramMap.has('placeId')) {
    this.navCtrl.navigateBack('/places/tabs/discover');
    return;
  }
  this.placeSub = this.placesService
    .getPlace(paramMap.get('placeId'))
    .subscribe(place => {
      this.place = place;
    });
});
}

onBookPlace() {
// this.router.navigateByUrl('/places/tabs/discover');
// this.navCtrl.navigateBack('/places/tabs/discover');
// this.navCtrl.pop();
this.actionSheetCtrl
  .create({
    header: 'Choose an Action',
    buttons: [
      {
        text: 'Select Date',
        handler: () => {
          this.openBookingModal('select');
        }
      },
      {
        text: 'Random Date',
        handler: () => {
          this.openBookingModal('random');
        }
      },
      {
        text: 'Cancel',
        role: 'cancel'
      }
    ]
  })
  .then(actionSheetEl => {
    actionSheetEl.present();
  });
}

openBookingModal(mode: 'select' | 'random') {
console.log(mode);
this.modalCtrl
  .create({
    component: CreateBookingComponent,
    componentProps: { selectedPlace: this.place, selectedMode: mode }
  })
  .then(modalEl => {
    modalEl.present();
    return modalEl.onDidDismiss();
  })
  .then(resultData => {
    console.log(resultData.data, resultData.role);
    if (resultData.role === 'confirm') {
      console.log('BOOKED!');
    }
  });
}

ngOnDestroy() {
if (this.placeSub) {
  this.placeSub.unsubscribe();
}
}
}

have I missed something?

Upvotes: 0

Views: 550

Answers (1)

atiyar
atiyar

Reputation: 8315

The error is occurring because skipped the part that provided that paramMap parameter in your tutor's code. And it doesn't have to be named paramMap. Its just a parameter - you can name it anything you want. Notice I named it xyz in my following code.

The ActivatedRoute has a property called paramMap, and if you subscribe to it (call the subscribe() method on it) you will receive any changes in the route parameter. You didn't add the ActivatedRoute in your code and skipped subscribing to its paramMap.

Add a ActivatedRoute service to your constructor -

constructor(
private route: ActivatedRoute,
private NewsService: NewsService
) { }

Then modify the ngOnInit method like below -

ngOnInit() {
    this.route.paramMap.subscribe(xyz => {
        this.newsSub = this.NewsService.getNews(xyz.get('newsId')).subscribe(news => {
            this.news = news;       
        })
    });
}

Upvotes: 1

Related Questions