I have integrated a Heroku-based Twitter API with my web application, using Angular Material table and other related components.
My goal is to allow users to input a string query and update the displayed results based on that input (with debounce applied).
Here's an example of the API:
https://am-twitter-scrape.herokuapp.com/hashtags/Python?pages_limit=3&wait=0
I want the hashtags value to dynamically change based on user input and reflect updated results. Although I'm following a tutorial at , I am facing difficulties in adapting it to suit my needs.
Currently, my code is neither throwing errors nor functioning correctly. Can someone please provide assistance?
Data service (twitterdata.service.ts)
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Users } from '../models/users.model';
@Injectable()
export class TwitterdataService {
private myCustomHashtag:string = 'Python';
private myCustomUser:string = 'Twitter';
private hashtagsUrl:string = `https://am-twitter-scrape.herokuapp.com/hashtags/${this.myCustomHashtag}?pages_limit=3&wait=0`;
private usersUrl:string = `http://am-twitter-scrape.herokuapp.com/users/${this.myCustomUser}?pages_limit=3&wait=0`;
constructor( private http: HttpClient ) { }
getTweetsByHashtag(): Observable<Users[]> {
return this.http.get<Users[]>(this.hashtagsUrl);
}
getTweetsByUsers(): Observable<Users[]> {
return this.http.get<Users[]>(this.usersUrl);
}
}
HTML template for displaying twitter table data (hashtag-tweets-component.html)
<mat-card>
<div class="search-container" style="direction: rtl;">
<mat-form-field>
<mat-icon matPrefix aria-hidden="false" aria-label="Search">search</mat-icon>
<input matInput #hashtagsSearchInput placeholder="Search by hashtag" [(ngModel)]="myCustomHashtag">
</mat-form-field>
</div>
<div class="spinner-container" *ngIf="dataSource.loading$ | async">
<mat-spinner></mat-spinner>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="text">
<th mat-header-cell *matHeaderCellDef> Tweet </th>
&td mat-cell *matCellDef="let hashtags"> {{hashtags.text | ellipsis: 50}} </td>
</ng-container>
... // Additional column definitions
<!--Table pagination-->
<mat-paginator
[length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
[showFirstLastButtons]="yes">
</mat-paginator>
Typescript file for handling twitter table data (hashtag-tweets-component.ts)
import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { TwitterdataService } from '../services/twitterdata.service';
import { Users } from '../models/users.model';
... // Import statements
@Component({
selector: 'app-hashtag-tweets',
templateUrl: './hashtag-tweets.component.html',
styleUrls: ['./hashtag-tweets.component.sass']
})
export class HashtagTweetsComponent implements OnInit {
dataSource = new MatTableDataSource<Users>();
displayedColumns = ['text', 'likes', 'replies', 'retweets', 'hashtags', 'date'];
... // Pagination attributes
@ViewChild('hashtagsSearchInput') hashtagsSearchInput: ElementRef;
apiResponse:any;
isSearching:boolean;
... // More variables and functions
convertDate(rawDate: string): string {
const dateOnly = rawDate.split('-')[1].trim();
const [day, month, year] = dateOnly.split(' ');
return `${month} ${day}, ${year}`;
}
constructor( private twitterdataService: TwitterdataService ) {
}
... // ngOnInit hook and additional logic