News App Using Angular

// src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NewsAppComponent } from './news-app/news-app.component';

const routes: Routes = [
    { path: '', component: NewsAppComponent },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

// src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'news-angular-app';
}

// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { provideHttpClient, withInterceptorsFromDi }
    from '@angular/common/http';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule }
    from '@angular/material/button-toggle';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';
import { AppComponent } from './app.component';
import { NewsAppComponent } from './news-app/news-app.component';

@NgModule({
    declarations: [
        AppComponent,
        NewsAppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatFormFieldModule,
        MatInputModule,
        MatToolbarModule
    ],
    providers: [provideHttpClient(withInterceptorsFromDi())],
    bootstrap: [AppComponent]
})
export class AppModule { }

//src/app/news-app/news-app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-news-app',
    templateUrl: './news-app.component.html',
    styleUrls: ['./news-app.component.css']
})
export class NewsAppComponent implements OnInit {
    newsArticles: any[] = [];
    filteredArticles: any[] = [];
    searchControl = new FormControl<string>('');
    page = 1;
    totalResults = 0;
    isLoading = false;
    categories = ['general', 'entertainment', 'technology', 'sports', 'business', 'health', 'science'];
    selectedCategory = 'general';

    private apiKey = 'ecfaf9eaaa8d40a5b5d769210f5ee616'; // Make sure this is your valid API key

    constructor(private http: HttpClient) { }

    ngOnInit(): void {
        this.fetchNews();
        this.searchControl.valueChanges.pipe(debounceTime(300)).subscribe(searchTerm => {
            this.filterArticles(searchTerm ?? '');
        });
    }

    fetchNews(): void {
        this.isLoading = true;
        const url = `https://newsapi.org/v2/top-headlines?country=in&category=${this.selectedCategory}
        &page=${this.page}&apiKey=${this.apiKey}`;

        this.http.get<any>(url).subscribe({
            next: (response) => {
                this.newsArticles = response.articles;
                this.totalResults = response.totalResults;
                this.isLoading = false;
                this.filterArticles(this.searchControl.value ?? '');
            },
            error: (err) => {
                console.error('API error occurred:', err);
                this.isLoading = false;
                // Display a user-friendly error message
                alert('Something went wrong; please try again later.');
            }
        });
    }

    loadMore(): void {
        if (this.newsArticles.length < this.totalResults) {
            this.page += 1;
            this.fetchNews();
        }
    }

    filterArticles(searchTerm: string): void {
        if (searchTerm) {
            this.filteredArticles = this.newsArticles.filter(article =>
                article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                article.description?.toLowerCase().includes(searchTerm.toLowerCase())
            );
        } else {
            this.filteredArticles = this.newsArticles;
        }
    }

    onCategoryChange(category: string): void {
        this.selectedCategory = category;
        this.page = 1;
        this.fetchNews();
    }
}

// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { provideHttpClient, withInterceptorsFromDi }
    from '@angular/common/http';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule }
    from '@angular/material/button-toggle';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';
import { AppComponent } from './app.component';
import { NewsAppComponent } from './news-app/news-app.component';

@NgModule({
    declarations: [
        AppComponent,
        NewsAppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatFormFieldModule,
        MatInputModule,
        MatToolbarModule
    ],
    providers: [provideHttpClient(withInterceptorsFromDi())],
    bootstrap: [AppComponent]
})
export class AppModule { }

// src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'news-angular-app';
}

// src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NewsAppComponent } from './news-app/news-app.component';

const routes: Routes = [
    { path: '', component: NewsAppComponent },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

//src/app/news-app/news-app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-news-app',
    templateUrl: './news-app.component.html',
    styleUrls: ['./news-app.component.css']
})
export class NewsAppComponent implements OnInit {
    newsArticles: any[] = [];
    filteredArticles: any[] = [];
    searchControl = new FormControl<string>('');
    page = 1;
    totalResults = 0;
    isLoading = false;
    categories = ['general', 'entertainment', 'technology', 'sports', 'business', 'health', 'science'];
    selectedCategory = 'general';

    private apiKey = 'ecfaf9eaaa8d40a5b5d769210f5ee616'; // Make sure this is your valid API key

    constructor(private http: HttpClient) { }

    ngOnInit(): void {
        this.fetchNews();
        this.searchControl.valueChanges.pipe(debounceTime(300)).subscribe(searchTerm => {
            this.filterArticles(searchTerm ?? '');
        });
    }

    fetchNews(): void {
        this.isLoading = true;
        const url = `https://newsapi.org/v2/top-headlines?country=in&category=${this.selectedCategory}
        &page=${this.page}&apiKey=${this.apiKey}`;

        this.http.get<any>(url).subscribe({
            next: (response) => {
                this.newsArticles = response.articles;
                this.totalResults = response.totalResults;
                this.isLoading = false;
                this.filterArticles(this.searchControl.value ?? '');
            },
            error: (err) => {
                console.error('API error occurred:', err);
                this.isLoading = false;
                // Display a user-friendly error message
                alert('Something went wrong; please try again later.');
            }
        });
    }

    loadMore(): void {
        if (this.newsArticles.length < this.totalResults) {
            this.page += 1;
            this.fetchNews();
        }
    }

    filterArticles(searchTerm: string): void {
        if (searchTerm) {
            this.filteredArticles = this.newsArticles.filter(article =>
                article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                article.description?.toLowerCase().includes(searchTerm.toLowerCase())
            );
        } else {
            this.filteredArticles = this.newsArticles;
        }
    }

    onCategoryChange(category: string): void {
        this.selectedCategory = category;
        this.page = 1;
        this.fetchNews();
    }
}