CODEWITHSUNDEEP
angular
Fel
Fel

Reputation: 4818

How to embed Twitter timeline in Angular 6 application

I'd like to embed a Twitter timeline into an Angular 6 application, but I couldn't find a good solution. This is what I've tried:

enter image description here

enter image description here

How could I get it? Thanks in advance,

Upvotes: 5

Views: 5552

Answers (3)

Rohit Chauhan
Rohit Chauhan

Reputation: 1

To embed twitter timeline in Angular there are 2-3 packaged available, I have used this one it works fine, Also is has many other functionalities. https://www.npmjs.com/package/ngx-twitter-widgets

Install Package

npm i ngx-twitter-widgets

Add NgxTwitterWidgetsModule to imports list in module file

...
imports: [
    BrowserModule,
    NgxTwitterWidgetsModule
],
...

Use timeline in component file

<ngx-twitter-timeline
  [source]="{sourceType: 'profile', screenName: 'StackOverflow'}"
  [options]="{height: '400'}" (onLoad)="onLoad($event)">
</ngx-twitter-timeline>

Here is documented properly... https://romikmakavana.github.io/ngx-twitter-widgets

Upvotes: 0

Emeric
Emeric

Reputation: 6885

You don't need to install any package:

index.html:

<head>
   <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>

app.component.html:

<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">
   Tweets by TwitterDev
</a>

app.component.ts:

ngAfterViewInit(): void {
    (<any>window).twttr.widgets.load();
}

Source: https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview.html

Upvotes: 18

Fel
Fel

Reputation: 4818

As I've read, there's no Angular-only way of getting the Twitter timeline due to CORS security mechanism. However, I found some good tutorials to do it using NodeJS, like this one:

http://thelillysblog.com/2017/02/26/getting-twitter-feed-angular-nodejs/

Upvotes: 0

Related Questions