Angular - Execute function after http request

Question

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?

David Fontes · Accepted Answer · 2020-09-18 09:28:59Z

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>

Hello @David Fontes, thank you again for your answer, it works. :)

Collectives™ on Stack Overflow

Angular - Execute function after http request

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related