HTTP - API and Angular

Question

I understand how the *ngFor works taking the list items from the return on the api call and populating the page. I have a slightly different use I am attempting on a personal/business project. I have a database based on top level categories and then individual sets in those categories and finally the individual parts going into making the sets. To start I am looking to populate my categories. I have a page where I only want to show three and I am currently hand selecting those three. I have an api call to obtain the category by id and I can see the information in the console.log but I am struggling with how to populate the information to the page. I have a box with a title where the title comes from the database. I have an image that will come from the database to populate the box. Eventually I will have a specific font that will format the title but I am not there yet. The alt text for the image also comes from the database. So all this information is in the call, how do I extract to populate? Can Angular make such a specific fill? Eventually on other pages I will be able to use the *ngFor but until then I can not find any documentation on this type of fill. Can anyone help? Is this TypeScript related and not necessarily Angular? Any help would be greatly appreciated.... Categories.component.html is where I am struggling:

<div class="row photo-grid-container"> 

  <ng-container *ngFor = "let c of category"> 
    <div class = "theme-s photo-grid">
      <a routerLink = "#">
        <div class = "theme-title-s">
            <p class = "theme-title-text-s camelot"> {{c.Name}} 
            </p>
        </div>
        <img class="theme-image-s photo-grid-item containimg" 
            src="././assets/images/KnightsLarge.png" alt= {{c.Name}} >
      </a>  
    </div>
    <!-- <div *ngIf = "(i + 1) % 2===0" class = "w-100">
    </div> -->
  </ng-container> 
</div>

Categories.component.ts:

import { PostCategoriesService } from '../services/post-categories.service';
import { Component, OnInit } from '@angular/core';
import { Category } from '../category';

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

export class PostsCategoriesComponent implements OnInit {
  id: 1494;
  categoryUrl: any;
  posts: Category[];
  category;

  constructor(private service: PostCategoriesService) {} 

  ngOnInit() {
    this.getPosts();
    this.getCategory();
  }

  getPosts(): void {
    this.service.getPosts()
      .subscribe(posts => this.posts = posts);
  }

  getCategory(): void {
    this.service.getCategory(this.id)
  }


}

finally the categories.service.ts

import { Category } from './../category';
import { Observable } from 'rxjs/Rx';
import { Http } from '@angular/http';
import { HttpClient, HttpClientModule, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError, map, tap } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { MessageService } from './../message.service';

@Injectable()
export class PostCategoriesService {


  private categoryUrl = 'http://playwellusa.com/api/sitecontent/categories/';

   // Inject HttpClient into your component or service.
   constructor(
     private http: HttpClient,
     private messageService: MessageService) {}

    /** GET posts from the server */
  getPosts(): Observable<Category[]> {
  return this.http.get<Category[]>(this.categoryUrl)
    .pipe(
      catchError(this.handleError('getPosts', []))
  );
}

/** GET post by id. Will 404 if id not found */
getCategory(id: number): Observable<Category> {
  const url = `${this.categoryUrl}/${id}`;
  return this.http.get<Category>(url).pipe(
    catchError(this.handleError<Category>(`getCategory id=${id}`))
  );
}
/**
 * Handle Http operation that failed.
 * Let the app continue.
 * @param operation - name of the operation that failed
 * @param result - optional value to return as the observable result
 */
private handleError<T> (operation = 'operation', result?: T) {
  return (error: any): Observable<T> => {

    // TODO: send the error to remote logging infrastructure
    console.error(error); // log to console instead


    // Let the app keep running by returning an empty result.
    return of(result as T);
  };
}


}

Welcome to the Treehouse Community

Looking to learn something new?

Tracy Nickel

Tracy Nickel

HTTP - API and Angular

Brendan Whiting

Brendan Whiting