service - Angular ERROR TS2341: Property 'X' is private and only accessible within class

Question

I'm doing an exercise code from an angular course.

The app works but I have this error in my mac terminal, I'm doing it exactly as the course shows, can't find what's wrong.

Error: src/app/components/articles/articles.component.html:1:22 - error TS2341: Property 'articles' is private and only accessible within class 'ArticlesComponent'.

1 <h3>Repositorios : {{articles.articlesCount}}</h3>

Here es my service:

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


@Injectable({
  providedIn: 'root'
})
export class ArticleService {
    public articlesCount : number = 30;

    constructor(private http: HttpClient) { }

    public getAll(){
            this.http.get('https://api.github.com/users/codigofacilito/repos').subscribe(data=> {
            console.log(data);
    })
}}

Heres is the article.component who consumes the service:

import { Component, OnInit } from '@angular/core';
import {ArticleService} from '../../services/article.service';


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

    constructor(private articles : ArticleService) { }

    ngOnInit(){
      this.articles.getAll();
    }

}

And the view HTML:

<h3>Repositorios : {{articles.articlesCount}}</h3>

Answer 1

You should declare a public property in the class to be able to use it in the template

articles refers to a service injected privately, so it cannot be accessed from the component template, and it is a service instance and you cannot use it to store articles in. you should use a different variable for that purpose.

you can declare a public property allArticles in your ArticlesComponent component, assign to it the result from your service, and this way it can be accessed from the template.

you can do this way:

import { Component, OnInit } from '@angular/core';
    import {ArticleService} from '../../services/article.service';


    @Component({
      selector: 'app-articles',
      templateUrl: './articles.component.html',
      styleUrls: ['./articles.component.css']
    })
    export class ArticlesComponent implements OnInit {
        public allArticles;
        
        constructor(private articles : ArticleService) { }

        ngOnInit(){
          this.articles.getAll().subscribe( results => {
            this.allArticles = results;
          });
        }

    }

in the template:

<h3>Repositorios : {{allArticles.articlesCount}}</h3>

In your service getAll() should return an Observable

import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ArticleService {
  public articlesCount : number = 30;

  constructor(private http: HttpClient) { }

  public getAll(): Observable<any> {
    return this.http.get('https://api.github.com/users/codigofacilito/repos');
  }
}

in your ArticleService, you have to remove the subscribe in getAll() as well