Lately, I've been diving into Angular and attempting to create a github search application using the github api. However, I've encountered some roadblocks with routing and data passing. My goal is for the user to land on a page like /user/userID upon clicking the view profile button. I have four components in place - home, list, 404, and app component. The issue arises when the URL changes upon button click, and although the list component renders, the main page content remains visible. I aim for the user to only see the child component content. In React, I typically resolve this problem using "exact", but I'm unsure of how to achieve the same effect in Angular. Additionally, when attempting to send data to the list component using Input(), the list component also displays on the main page. To provide more context, I have included screenshots and code snippets below.
Home page: https://i.sstatic.net/BGsPJ.png
user/userID page: https://i.sstatic.net/WmGBl.png
app.component.html :
<ng-template [ngIf]="profile !== '' && user" style=" border: 5px solid black;padding: 2em;">
<img [src]="user.avatar_url" alt="" style="width: auto; height: 100px;">
<p>Username: {{user.login}}</p>
<p>Location: {{user.location}}</p>
<p>E-mail: {{user.email}}</p>
<p>Blog Link: {{user.blog}}</p>
<p>Member Since: {{user.created_at}}</p>
<button href="#" [routerLink]="['/', user.login.toLowerCase(), user.id ]" style="padding: .5em;">View Profile</button>
</ng-template>
<div>
<app-list [data]="user"></app-list>
</div>
<div class="container">
<router-outlet></router-outlet>
</div>
app.component.ts:
import { HttpService } from './http.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
user: any;
profile: any;
constructor(private userData: HttpService) {}
ngOnInit() {
}
findProfile() {
this.userData.updateProfile(this.profile);
this.userData.getUser().subscribe((result) => {
console.warn(result);
this.user = result;
});
}
title = 'my-app';
}
list.component.html:
<h1>list component</h1>list.component.ts:
import { ActivatedRoute } from '@angular/router';
import { HttpService } from '../http.service';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.scss'],
})
export class ListComponent implements OnInit {
@Input() data: any;
userID: any;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.queryParams.subscribe(
params => this.userID = params['userID']
);
}
}
home.component.html:
<h1>home component!</h1> app-routing.module.ts:
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: ':user/:userID', component: ListComponent },
{ path: '**', component: PageNotFoundComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}