O
O
Ole892018-12-29 11:38:29
Angular
Ole89, 2018-12-29 11:38:29

Would it be faster to do filtering in a component?

Hello!
I use Angular 5.
There is a list of news on the main page. Each news has tags attached, which are opened by clicking on the "Tags" button next to the corresponding news. Filtering occurs through the ngIf operator in the template, but does not leave the feeling that the code written is not optimal, it is better to perform filtering in the component, and if there is a lot of news (for example, 50-100), then the script will slow down a bit, especially on mobile devices.
QUESTION. Would it be faster to do filtering in a component? And if so, how to do it and in what form to pass the result to the template?
I am attaching the code.
Component start.component.ts:

export class StartComponent implements OnInit {
  
  //Список всех тегов
  tags: Tags;
  
  constructor(private http:HttpClient) { }
  
  //Подгружаем список тегов запросом к бекенду
  this.http.get<Tags>('http://site.ru/api/tags').subscribe(
        data => { this.tags = data; },
        error => { console.log(error) });

start.component.html template
<div *ngFor="let item of news">
  <p> {{item.title}} </p>
  <p> {{item.content}} </p>
  <span (click)="item.showTags = !item.showTags">Теги:</span>
  <div *ngIf="item.showTags">
  <br>  		  
  <div name="tags" *ngFor="let tag of tags">
  <div *ngIf="tag.news_id == item.id">  
        	<span> {{tag.title}} </span>
        </div>          
    	</div>
     	</div>
  </div>

Model Tags.ts
export class Tags{
    title: string;
    id: number;
    news_id: number;	   
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question