I have successfully implemented code in my app component to retrieve the current URL and display it in app.component.html.
app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
public href: string = "";
constructor(private router: Router) {}
ngOnInit() {
}
}
app.component.html
<div class="page-wrap {{router.url}}">
<app-header></app-header>
<div class="content-wrap">
<app-sidebar></app-sidebar>
<div class="app-content">
<flash-messages></flash-messages>
<router-outlet></router-outlet>
</div>
</div>
</div>
However, when attempting to compile the code using "ng serve -prod," an error is displayed:
ERROR in C:/Users/theone/Documents/Node Projects SourceTree/dream-angular/src/$$_gendir/app/app.component.ngfactory.ts (58,68): Property 'router' is private and only accessible within class 'AppComponent'.