Welcome folks today in this blog post we will be displaying the twitter user timeline
in angular 14 using the ngx-twitter-timeline
library in browser using typescript. All the full source code of the application is shown below.
Get Started
In order to get started you need to create a new angular
project using the below command
ng new sampleproject
And after that you need to install the below libraries using the below command
npm i ngx-twitter-timeline
And after that you will see the below directory
structure of the angular app
Now we need to go to app.module.ts
file and copy paste the below code
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // Import ngx-twitter-timeline import { NgxTwitterTimelineModule } from 'ngx-twitter-timeline'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, // Specify library as an import NgxTwitterTimelineModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
After that we need to go to app.component.html
file and copy paste the following code
app.component.html
1 2 3 4 5 |
<!-- You can now use the library component in app.component.html --> <ngx-twitter-timeline [data]="{sourceType: 'url', url: 'https://twitter.com/twitterdev'}" [opts]="{tweetLimit: 5}" ></ngx-twitter-timeline> |
This will display the twitter
timeline of the above user that you have provided inside the url
and also it will only show the 5
tweets because you have provided the tweetLimit
to 5