✨ scroll infinite added to home

Author: marcode24

package-lock.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "~13.2.0",
     "@angular/platform-browser-dynamic": "~13.2.0",
     "@angular/router": "~13.2.0",
+    "ngx-infinite-scroll": "^13.0.2",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

package.json

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app.routing';
@@ -11,8 +12,9 @@ import { FeaturesModule } from './features/features.module';
   ],
   imports: [
     BrowserModule,
+    HttpClientModule,
     AppRoutingModule,
-    FeaturesModule
+    FeaturesModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.module.ts

@@ -145,8 +145,7 @@ nav.open li a .links_name {
 
 nav li a:hover .links_name,
 nav li a:hover i {
-  transition: all 0.5s ease;
-  /* color: var(--primary-color); */
+  transition: 0.5s ease;
 }
 
 nav li i {

src/app/core/components/sidebar/sidebar.component.css

@@ -0,0 +1,8 @@
+import { Feed } from "../models/feed.model";
+
+export interface IResponseFeed {
+  ok: boolean;
+  feeds: Feed[];
+  feed: Feed;
+  msg?: string;
+};

src/app/core/interfaces/response.interface.ts

@@ -0,0 +1,13 @@
+import { Website } from "./website.model";
+
+export class Feed {
+  constructor(
+    public writer: string,
+    public title: string,
+    public pubDate: Date,
+    public content: string,
+    public link: string,
+    public image: string,
+    public website: Website,
+  ) {};
+};

src/app/core/models/feed.model.ts

@@ -0,0 +1,9 @@
+export class Website {
+  constructor(
+    public name: string,
+    public image: string,
+    public description: string,
+    public link: string,
+    public linkFeed: string,
+  ) {};
+};

src/app/core/models/website.model.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from 'environments/environment';
+import { Observable } from 'rxjs';
+
+import { IResponseFeed } from '@interfaces/response.interface';
+
+const base_url = environment.base_url;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FeedService {
+
+  constructor(private http: HttpClient) { }
+
+  getFeeds(skip = 0, limit = 20): Observable<IResponseFeed> {
+    const url = `${base_url}/feed?skip=${skip}&limit=${limit}`;
+    return this.http.get<IResponseFeed>(url);
+  }
+
+}

src/app/core/services/feed.service.ts

@@ -8,7 +8,6 @@
   width: 100%;
   margin-left: 250px;
   width: auto;
-  transition: 0.5s;
   background: #f4faff;
 }
 

src/app/features/features.component.css

@@ -5,6 +5,7 @@ import { FeaturesComponent } from './features.component';
 import { RouterModule } from '@angular/router';
 
 import { ComponentsModule } from '@components/components.module';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 @NgModule({
   declarations: [
@@ -14,7 +15,8 @@ import { ComponentsModule } from '@components/components.module';
   imports: [
     CommonModule,
     RouterModule,
-    ComponentsModule
+    ComponentsModule,
+    InfiniteScrollModule
   ]
 })
 export class FeaturesModule { }