Route

Having a separate route to display all the hardcoded project’s configuration makes it very easy to compare web apps with each other. A similar architecture has been followed in loklak to create a ‘/settings’ route to display configs used inside it. Respective implementation would be discussed in this blog. Creating Settings Component First step would be to create a Settings component to render under /settings route. ng g component settings   This command will create new settings component. We have to create settings-routing and settings module inside settings component separately. This route module will be called inside the root app module. The settings-routing module would import Router module as follows: import { NgModule } from ‘@angular/core’; import { Routes, RouterModule } from ‘@angular/router’; import { SettingsComponent } from ‘./settings.component’; const routes: Routes = [ { path: '', component: SettingsComponent } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], providers: [] }) export class LoklakSettingsRoutingModule { }   The settings module would follow the basic module configuration of Angular, and import the settings-routing module as follows: import { NgModule } from ‘@angular/core’; import { CommonModule } from ‘@angular/common’; import { LoklakSettingsRoutingModule } from ‘./settings-routing.module’; import { SettingsComponent } from ‘./settings.component’; @NgModule({ imports: [ CommonModule, LoklakSettingsRoutingModule ], declarations: [ SettingsComponent ] }) export class SettingsModule { }   At this point of time, we are having a basic settings component to render under /settings route. Loading /settings as child route under root app module Now, we need to add path of ‘/settings’ route inside root app module as follows: path: ‘settings’, loadChildren: ‘./settings/settings.module#SettingsModule’   Which means when user is on path /settings, load settings component. Fetching project configs inside settings component At this point, we have successfully established /settings route and settings component. Now we need to fetch the project configs inside the settings component to display. We would actually import the config and store it in an array to loop through it in template file using *ngFor to display the items under config array. Note: We would import newsOrgs containing twitter username of news organizations, and the defaultUrlConfig containing the list of all hardcoded URLs used inside the project. It can be taken as an example to add and display more configurations. import { Component, OnInit } from ‘@angular/core’; import { defaultUrlConfig } from ‘../shared/url-config’; import { newsOrgs } from ‘../shared/news-org’; @Component({ selector: ‘app-settings’, templateUrl: ‘./settings.component.html’, styleUrls: [‘./settings.component.scss’] }) export class SettingsComponent implements OnInit { public urlObject = []; public newsConfigOrgs = newsOrgs; ngOnInit() { let i = 0; for (const key in defaultUrlConfig) { if (key) { const data = []; const value = defaultUrlConfig[key]; const data2 = []; for (const key2 in value) { if (key2) { const value2 = value[key2]; data2.push(key2, value2); } } data.push(key, data2); this.urlObject.push(data); i++; } } } }   urlObject is an array used to store the list of hardcoded URLs, and newsConfigOrgs is an array containing all the list of news organizations. Displaying array items in template file Up to this point, we have successfully…