CODEWITHSUNDEEP
javascriptangulartypescript
Joaquim Cànoves Marqués
Joaquim Cànoves Marqués

Reputation: 15

Angular - Execute function after http request

hope you're okey.
I have a blog component which obtains posts from a DB via http request.
So, what i'm trying is, when the posts are in my component i want to filter them with a function.
I'm calling this function after get the posts in the subscribe method, but it doesn't works.

Function to filter the posts:

filtrarArticles(tipus)
  { 
    var articles = document.getElementsByClassName("article") as HTMLCollectionOf<HTMLElement>;

    for (var i = 0; i < articles.length; i++)
    {
      var tipusArticle = this.articles[i].categoria;
      

      if (tipus == tipusArticle) 
      {
          articles[i].style.display = "";
      } 
      else 
      {
          articles[i].style.display = "none";
      }
    }
  }

HTML code that filters my function:

<div class="articles row w-100 align-self-end d-flex justify-content-center">
      <div class="article col-xl-3 mb-md-0 mb-3" *ngFor="let article of articles; index as i" (click)="obrirModalArticle(article)">
        <img class="imatgeAllargada d-block w-100" src="https://drive.google.com/uc?id={{article.img}}">
        <br>
        <h4>{{article.title_article}}</h4>
        <p [innerHTML]="article.descripcio1"></p>
      </div>
</div>

The articles array have one property which name is "categoria" an it's the key to filter it.

I call the filter function here:

this.articleService.obtenirArticles(this.idioma).subscribe(
      res=>
      {
        this.articles = res;

        this.filtrarArticles('generals');
      },
      error =>
      {
        alert("No s'han pogut obtenir els articles, intenta-ho més tard.");
      });
  
    this.translate.onLangChange.subscribe((event: LangChangeEvent) => 
    {
      this.idioma = event.lang;

      this.articleService.obtenirArticles(this.idioma).subscribe(
        res=>
        {
          this.articles = res;
        },
        error =>
        {
          alert("No s'han pogut obtenir els articles, intenta-ho més tard.");
        }
      )
    });

This code is on init method. And I don't know why doesn't works?

Upvotes: 0

Views: 970

Answers (1)

David Fontes
David Fontes

Reputation: 1508

It is considered a bad practice to access the DOM directly, one of the reasons being that you should not manipulate the template directly but rather let Angular do it for you. So what you should be doing instead is, create a model and let Angular know about it, bind it to the template and once it changes Angular will update the template for you.

Component

export class YourComponent {
  allArticles;      // Property to hold the result of the response
  filteredArticles; // Property to hold what is going to be rendered on the template

  ...

  ngOnInit() {
    this.articleService.obtenirArticles(this.idioma).subscribe(res => {
      this.allArticles = res; // Save the original response

      this.filteredArticles = this.filtrarArticles('generals'); // Get the articles filtered and show this property on the template
    },
    error => {
      alert("No s'han pogut obtenir els articles, intenta-ho més tard.");
    });

    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
      this.idioma = event.lang;

      this.articleService.obtenirArticles(this.idioma).subscribe(res => {
        this.allArticles = res; // Save the original response
        this.filteredArticles = [...this.allArticles]; // Clone the response array unfiltered
      },
      error => {
        alert("No s'han pogut obtenir els articles, intenta-ho més tard.");
      })
    });
  }
}

Filter function

filtrarArticles(tipus) {
  // The filter method will return a copy of the array once it has been iterated over each item.
  // If the condition is met, the item is going to be included in the resulting array, otherwise it won't.
  return this.allArticles.filter(article => article.categoria === tipus);
}

Then in your template, you iterate over the filterArticles array, once that array change, Angular will update the template.

Template

<div class="articles row w-100 align-self-end d-flex justify-content-center">
  <div class="article col-xl-3 mb-md-0 mb-3" *ngFor="let article of filteredArticles; index as i" (click)="obrirModalArticle(article)">
    <img class="imatgeAllargada d-block w-100" src="https://drive.google.com/uc?id={{article.img}}">
    <br>
    <h4>{{article.title_article}}</h4>
    <p [innerHTML]="article.descripcio1"></p>
  </div>

Upvotes: 1

Related Questions