I am building this app in angular 6 which uses Rest Country API to fetch all the countries and their details.
The problem I am facing is that I am not able to understand how to set routerLink in the parent component in order to fetch the details of the countries.
Any suggestions would be appriciated.
Thanks.
UPDATE
I am not able to understand how to access the name of the country in order to pass it to the URL. I tried almost everything I can think of but nothing seems to work.
Here are my files:
shared.modules.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CountryViewComponent } from './country-view/country-view.component';
@NgModule({
imports: [
CommonModule
],
declarations: [
CountryViewComponent
],
exports: [
CountryViewComponent,
CommonModule
]
})
export class SharedModule { }
Child Component
country-view.component.ts
import { Component, OnInit, Input, OnDestroy } from '@angular/core';
// importing route related code
import { ActivatedRoute, Router } from '@angular/router';
//importing Service related code
import { CountryViewService } from '../../country-view.service';
import { CountryViewHttpService } from '../../country-view-http.service';
@Component({
selector: 'app-country-view',
templateUrl: './country-view.component.html',
styleUrls: ['./country-view.component.css']
})
export class CountryViewComponent implements OnInit, OnDestroy {
@Input() currentCountryName: String;
public currentCountry;
constructor(private _route: ActivatedRoute, private countryViewHttpService: CountryViewHttpService) {
console.log("Contry View Constructor Called");
}
ngOnInit() {
// getting the name of the country from the route
let myCountryName = this._route.snapshot.paramMap.get('currentCountryName');
console.log(myCountryName);
this.countryViewHttpService.getSingleCountryInfo(myCountryName).subscribe(
data => {
console.log(data);
this.currentCountry = data;
},
error => {
console.log("some error occured");
console.log(error.errorMessage);
}
)
}
ngOnDestroy() {
console.log("Country View Component Destroyed");
}
}
Parent Component HTML
africa.component.html:
<!--Home page Html-->
<div class="container-fluid mainContainer">
<div class="row mainRow">
<div class="col mainCol">
<!--Content Section-->
<div class="row africanCountryRowHeading">
<div class="backArrow">
<a [routerLink]="['/home']">
<i class="material-icons">
keyboard_backspace
</i>
</a>
</div>
<div class="col-md-12 upperCol">AFRICA</div>
</div>
<a [routerLink]="['/country']">
<div class="row africanCountryRowContent" *ngIf="allAfricanCountries.length>0">
<div *ngFor="let africanCountry of allAfricanCountries" class="col-xs-12 col-md-6 col-lg-6 col-xl-6 africanCountriesMainCol">
<!--Country Iteration div starts here-->
<div class="row africanCountriesRow">
<div class="col-md-12 africanCountryCol">
<div class="panel-flag africanCountriesFlag">
<img [src]="africanCountry.flag">
</div>
<div class="panel panel-default africanCountriesPanel">
<div class="panel-heading africanCountriesPanelHeading">Country: {{africanCountry.name}}</div>
<div class="panel-body africanCountriesPanelBody">
<p>
Capital: {{ africanCountry.capital }}
</p>
</div>
</div>
</div>
</div>
<!--Countries Iteration div ends here-->
</div>
</div>
</a>
</div>
</div>
</div>
Parent Component Module file
africa.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { CountryViewComponent } from '../shared/country-view/country-view.component';
import { RouterModule, Routes } from '@angular/router';
@NgModule({
imports: [
CommonModule,
SharedModule,
RouterModule.forChild([
{ path: 'country/:name', component: CountryViewComponent }
])
],
declarations: [CountryViewComponent]
})
export class AfricaModule { }
Child Component Service file
country-view-http.service.ts:
import { Injectable } from '@angular/core';
//importing Http Client to make the request
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
//importing observables related code
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { tap } from 'rxjs/operators';
import { delay } from 'rxjs/operators'
@Injectable({
providedIn: 'root'
})
export class CountryViewHttpService {
public currentCountries;
public baseUrl = 'https://restcountries.eu/rest/v2/name';
constructor(private _http: HttpClient) {
console.log("Country View Service Called");
}
// Exception Handler
private handleError(err: HttpErrorResponse) {
console.log("Handle error Http calls")
console.log(err.message);
return Observable.throw(err.message);
}
// method to return single country Informations
public getSingleCountryInfo(currentCountryName): any {
let myResponse = this._http.get(this.baseUrl + '/' + currentCountryName + '?fullText=true');
console.log(myResponse);
return myResponse;
} // end get country info function
}
app.component.html
<div class="container-fluid mainContainer">
<!--Navigation Secion-->
<div class="row navigationMainRow">
<div class="col-12 navigationMainCol">
<div class="row navigationLogoRow">
<div class="col-8 navigationLogoCol">
<a [routerLink]="['/home']">
<img src="../assets/images/Terra.png" alt="Logo" id="logo">
</a>
</div>
<div class="col-4 navigationMenuCol">
<div class="row navigationMenuRow">
<div class="col-6 navigationLanguageCol">
<p>
Language
</p>
</div>
<div class="col-6 navigationCurrencyCol">
<p>
Currency
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
// Router Module for Application level Route
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AfricaComponent } from './africa/africa.component';
import { AmericaComponent } from './america/america.component';
import { AsiaComponent } from './asia/asia.component';
import { EuropeComponent } from './europe/europe.component';
import { OceaniaComponent } from './oceania/oceania.component'
import { FilterComponent } from './filter/filter.component';
// import statement for services
import { AfricaService } from './africa.service';
import { AfricaHttpService } from './africa-http.service';
import { AmericaService } from './america.service';
import { AmericaHttpService } from './america-http.service';
import { AsiaService } from './asia.service';
import { AsiaHttpService } from './asia-http.service';
import { EuropeService } from './europe.service';
import { EuropeHttpService } from './europe-http.service';
import { OceaniaService } from './oceania.service';
import { OceaniaHttpService } from './oceania-http.service';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AfricaComponent,
AmericaComponent,
AsiaComponent,
EuropeComponent,
OceaniaComponent,
FilterComponent,
],
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: 'main', pathMatch: 'full' },
{ path: 'africa', component: AfricaComponent },
{ path: 'america', component: AmericaComponent },
{ path: 'asia', component: AsiaComponent },
{ path: 'europe', component: EuropeComponent },
{ path: 'oceania', component: OceaniaComponent }
]),
HttpClientModule
],
providers: [AfricaService, AfricaHttpService, AmericaService, AmericaHttpService,
AsiaService, AsiaHttpService, EuropeService, EuropeHttpService,
OceaniaService, OceaniaHttpService],
bootstrap: [AppComponent]
})
export class AppModule { }
