Route Parameters in Angular 2 and Express API (Get Single Post) - rest

Question

I'm trying to return a single article from a Express API using Angular 2.
The Express app has this section of code for single get request:
router.get('/articles/:articleId', (req, res) => {
let articleId = req.params.articleId;
Article.findById(articleId, (err, article) => {
if(err) {
res.send(err);
} else {
res.json(article)
}
});
});
If I do console.log(article) it returns the whole JSON object in the terminal so it's working.
Next, the Article Service looks like this:
import { Injectable } from '#angular/core';
import { Http, Headers } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class ArticleService {
constructor( private http:Http ) {
console.log('Article service initialized...')
}
getArticles() {
}
getArticle(id) {
return this.http.get('http://localhost:3000/api/articles/'+id)
.map(res => res.json());
}
addArticle(newArticle){
}
deleteArticle(id){
return this.http.delete('http://localhost:3000/api/articles/'+id)
.map(res => res.json());
}
}
With the code above the deleteArticle(id) works.
And finally, the ArticleDetailComponent looks like this:
import { Component, OnInit } from '#angular/core';
import { ArticleService } from '../services/article.service';
import { Router, ActivatedRoute, Params } from '#angular/router';
import { ArticleComponent } from '../article/article.component'
import 'rxjs/add/operator/switchMap';
#Component({
selector: 'app-articledetail',
templateUrl: './articledetail.component.html',
styleUrls: ['./articledetail.component.css']
})
export class ArticleDetailComponent implements OnInit {
article: ArticleComponent;
title: string;
text: string;
constructor(
private router: Router,
private route: ActivatedRoute,
private articleService:ArticleService){
}
ngOnInit() {
var id = this.route.params.subscribe(params => {
var id = params['id'];
this.articleService.getArticle(id)
.subscribe(article => {this.article = article});
console.log(id) //returns article id correctly
});
}
}
The articledetail.component.html looks like this:
<div class="article-container">
<div class="col-md-12">
<h2>{{article.title}}</h2>
{{article.text}}
<br><br>
</div>
</div>
When I run the application I can get a list of articles and delete articles by Id, but I can't get single articles to be displayed in the ArticleDetailComponent.
If I do console.log(id) within the ArticleDetailComponent it shows the article id, but I can't get the JSON object in the response and show it in the HTML.
Could somebody please tell me what's missing?
Thanks

Answer 1

I actually see where your mistake is.. you need to initialize article to empty object, because angular is probably throwing errors in the console that it cannot find article.title. The error is probably: cannot find title of undefined. And when angular throws an error like that the whole app freezes, and you cannot do anything. So initialize article like this:
article: any = {} and it will work
The other alternative would be to use the "safe operator" (?) in the template like
{{article?.title}}. This prevents the error, so if article is undefined it wont throw the exception, but its not a good practice rly
The third alternative would be to add *ngIf on the HTML which is throwing errors if article is undefined. Like this:
<div class="article-container" *ngIf="article">
<div class="col-md-12">
<h2>{{article.title}}</h2>
{{article.text}}
<br><br>
</div>
</div>